Wedge

Public area => The Pub => Off-topic => Topic started by: MultiformeIngegno on April 27th, 2013, 07:11 PM

Title: Pass text to a url through input form
Post by: MultiformeIngegno on April 27th, 2013, 07:11 PM
I need a box where users type an address and when they press the "Go" button they're pointed to: `http://maps.google.it/maps?saddr=INPT_VALUE&daddr=My+Address&dirflg=r` (where of course INPUT_VALUE is the address typed in the box).

I'm looking for the cleanest solution. Is this possible with just HTML (or Javascript is needed)? :)

EDIT: Not jQuery.
Title: Re: Pass text to a url through input form
Post by: Arantor on April 27th, 2013, 07:16 PM
Code: [Select]
<form action="http://maps.google.it/maps" method="get">
  <input type="text" name="saddr">
  <input type="hidden" name="daddr" value="My Address">
  <input type="hidden" name="dirflg" value="r">
  <input type="submit" value="Go">
</form>

Adjust for XHTML and other values as necessary. ISTR that text values will be urlencoded by the browser as necessary, you may need to experiment on that part but should be fine.
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 27th, 2013, 07:26 PM
Thanks!! Works like a charm. :) :cool:
Last thing, how can I automatically append a text after the string typed by the user? Practical example: user types street name but 90% of the time they forget to add also city name. Because in my case all the addresses typed by users are from the same city, how can I automatically have in final url (example with London): saddr=INPUT_TEXT, London&other_params ? :)
Title: Re: Pass text to a url through input form
Post by: Arantor on April 27th, 2013, 07:32 PM
That will require JS to do, and offhand I'm not sure how best to do that.
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 27th, 2013, 07:33 PM
Quote from Arantor on April 27th, 2013, 07:32 PM
That will require JS to do, and offhand I'm not sure how best to do that.
Thanks. :)
Users will have to insert cityname for now. ;)
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 28th, 2013, 01:45 AM
Code: [Select]
function calcRoute() {
  var start = document.getElementById('start').value;
 }

    <select id="start" onchange="calcRoute();">
      <option value="Piazza dei cinquecento, Roma">Termini</option>
      <option value="Via Fausto Gullo 58, Roma">Giacomo</option>
      <option value="Via Daniele Manin 72, Roma">Manin</option>
    </select>

Works.

Anyway Instead of a dropdown list I need an input box. How can I pass the value to getElementById with an input box?
I tried something like this but seems plain wrong.. :P

Code: [Select]
<form style="display:inline">
<input type="text" id="start" placeholder="Start address">
<input type="submit" value="Go" onsubmit="calcRoute();">
</form>

Demo: http://ffio.it/test.html
Title: Re: Pass text to a url through input form
Post by: Arantor on April 28th, 2013, 02:24 AM
Call getElementById() on the select, get its value, then call getElementById() on the textbox and set its value to that of the dropdown.
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 28th, 2013, 02:26 AM
Quote from Arantor on April 28th, 2013, 02:24 AM
Call getElementById() on the select, get its value, then call getElementById() on the textbox and set its value to that of the dropdown.
The dropdown can go, it's just there to prove everything works :D
So there's no problem of double-called function. I just need input box to work. :)
Title: Re: Pass text to a url through input form
Post by: Arantor on April 28th, 2013, 02:28 AM
I don't see what's wrong with it. If you get the textbox element by id then check its value, it'll have the value in it. Seems straightforward enough?
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 28th, 2013, 02:35 AM
You mean something like

Code: [Select]
function calcRoute( input ) {
  var start = document.getElementById('start').value;
}

Code: [Select]
<input type="text" id="start">
<input type="submit" value="Go">
Title: Re: Pass text to a url through input form
Post by: Arantor on April 28th, 2013, 02:56 AM
Yup. I don't see what you need to do differently to that ;) Obviously it depends what else the calcRoute function has to do... but it doesn't need the input parameter because it won't be using it.
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 28th, 2013, 02:59 AM
It worked with this:
Code: [Select]
<form>
<input type="text" id="start" name="start">
<input type="button" onclick="calcRoute();" value="Go">
</form>
Title: Re: Pass text to a url through input form
Post by: Arantor on April 28th, 2013, 03:02 AM
Of course it would. Except the 'input' variable that you're 'passing' to calcRoute would just be undefined. Since you're not passing anything to it from the onclick, there's no need to declare that it accepts a parameter ;)

Code: [Select]
function calcRoute() {
  var start = document.getElementById('start').value;
}
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 28th, 2013, 03:10 AM
Quote from Arantor on April 28th, 2013, 03:02 AM
Of course it would. Except the 'input' variable that you're 'passing' to calcRoute would just be undefined. Since you're not passing anything to it from the onclick, there's no need to declare that it accepts a parameter ;)

Code: [Select]
function calcRoute() {
  var start = document.getElementById('start').value;
}
Right! Removed the redundant declaration :)
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 28th, 2013, 03:22 AM
Anyway I'm so happy I managed to get this working, take a look at danielamandolini.it/map.html . If you click on "(calcola percorso)" which mean "calculate route" near "Mezzi pubblici" (public transports) and insert an address (for example "Via eugenio checchi, Roma") it shows you the route to an address (in this case an ambulatory) via public transports! :)
The only thing I have to look for this to be perfect is to set the time for the route (of course in the night there are a lot less means). :)
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 28th, 2013, 03:29 PM
The form works properly on every browser if you click the "Go" button (<input type="button">). It doesn't if I fill the input type="text" and press ENTER on my keyboard (or for example push the "Go" button in iOS keyboard). So: it works if I push the input type="button", not if I press ENTER from keyboard. How can I make it work that way too?
Title: Re: Pass text to a url through input form
Post by: Arantor on April 28th, 2013, 04:06 PM
Attach it to an onsubmit event of the form as a whole rather than the go button's onclick event then it'll trigger before going to another page.
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 28th, 2013, 04:09 PM
Uhm, I tried with this but didn't work:

   <form onsubmit="calcRoute();reducemap();" id="percorsoform" style="display:none;top:-3px;position:relative">
      <input type="text" id="start" name="start" placeholder="Indirizzo di partenza" style="margin-left:5px;width:200px">
      <input type="submit" value="Vai">
   </form>

http://ffio.it/map.html
Title: Re: Pass text to a url through input form
Post by: Arantor on April 28th, 2013, 04:20 PM
Define 'didn't work'
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 28th, 2013, 04:27 PM
Quote from Arantor on April 28th, 2013, 04:20 PM
Define 'didn't work'
Right! :D
If you go to http://goo.gl/wr3qi (live site), click on "calcola percorso", enter an address (example: "Via Eugenio Checchi, Roma") and push the Vai (Go) button, the route is built. If you enter the address and instead of the button you press ENTER, the page is reloaded.

Now with onsubmit the page is reloaded both if I press ENTER and if I push the Go button: http://ffio.it/map.html
Title: Re: Pass text to a url through input form
Post by: Arantor on April 28th, 2013, 04:30 PM
At the end of the onsubmit event, return false. You don't want the page to be reloaded, so that's the way to do that.

The only reason it didn't get reloaded before is because you're not using input type="submit" which would do that.
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 28th, 2013, 04:32 PM
Quote from Arantor on April 28th, 2013, 04:30 PM
At the end of the onsubmit event, return false. You don't want the page to be reloaded, so that's the way to do that.

The only reason it didn't get reloaded before is because you're not using input type="submit" which would do that.
Yup! onsubmit="calcRoute();reducemap(); return false" worked. :D
Title: Re: Pass text to a url through input form
Post by: MultiformeIngegno on April 29th, 2013, 08:51 PM
This is turning me mad. I'm sure yesterday this worked just fine... Without me changing anything now the form route is calculated only the SECOND time you fill the form and press ENTER. It's non sense.. <_< The first time it seems the form is submitted to the server (note the ?=... after the url)
http://goo.gl/wr3qi (to try you have to click as always on "calcola il percorso" and then enter an address like "Via Eugenio Checchi, Roma", even though it works also with a starting address from London :D )
Posted: April 29th, 2013, 08:49 PM

EDIT: Uhm, no. Now it's working again. Maybe it was just an old version of the page cached.