Pass text to a url through input form

MultiformeIngegno

  • Posts: 1,337
Pass text to a url through input form
« 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.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Pass text to a url through input form
« Reply #1, 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.
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

MultiformeIngegno

  • Posts: 1,337
Re: Pass text to a url through input form
« Reply #2, 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 ? :)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278

MultiformeIngegno

  • Posts: 1,337
Re: Pass text to a url through input form
« Reply #5, on April 28th, 2013, 01:45 AM »Last edited on April 28th, 2013, 02:01 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

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Pass text to a url through input form
« Reply #6, 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.

MultiformeIngegno

  • Posts: 1,337
Re: Pass text to a url through input form
« Reply #7, 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. :)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Pass text to a url through input form
« Reply #8, 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?

MultiformeIngegno

  • Posts: 1,337
Re: Pass text to a url through input form
« Reply #9, 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">

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Pass text to a url through input form
« Reply #10, 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.

MultiformeIngegno

  • Posts: 1,337

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Pass text to a url through input form
« Reply #12, 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;
}

MultiformeIngegno

  • Posts: 1,337
Re: Pass text to a url through input form
« Reply #13, 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 :)
Re: Pass text to a url through input form
« Reply #14, 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). :)