For example I have a form:

<form name='myform' id='myformid'>

  <input type='text' name='name' id='name'>
  <input type='text' name='color' id='color'>
  <input type='text' name='made' id='made'>

  <input type='submit' name='submit'>

</form>

Now I want to call a javascript function on above form submit. This function will get all form elements values and create a URL to redirect.

For example:

example/search.php?name=toyota&color=white&made=abc

How can I create this JS function?

Thanks

For example I have a form:

<form name='myform' id='myformid'>

  <input type='text' name='name' id='name'>
  <input type='text' name='color' id='color'>
  <input type='text' name='made' id='made'>

  <input type='submit' name='submit'>

</form>

Now I want to call a javascript function on above form submit. This function will get all form elements values and create a URL to redirect.

For example:

example./search.php?name=toyota&color=white&made=abc

How can I create this JS function?

Thanks

• php
• javascript
• forms

Share Improve this question Follow edited Sep 27, 2011 at 12:05 EoghanM 27.1k2424 gold badges9494 silver badges126126 bronze badges asked Sep 27, 2011 at 11:02 AwanAwan 18.6k3838 gold badges9494 silver badges133133 bronze badges 3

• 2 Why you want to do this with JavaScript, if the form tag can deliver all you need? Do you want to validate the contents? – yan.kun Commented Sep 27, 2011 at 11:09
• 1 I need this. I want to know this. You don't know where will I use this. You don't know what point I want to learn. I write a simple question with simple example to get answer. Anyway thanks for your concern. – Awan Commented Sep 27, 2011 at 11:15
• @Awan — As a rule of thumb, if someone doesn't know how to do something then there is a good chance that they aren't in a good position to judge if they should do the something. Throwing a "Don't question me!" rant at people trying to help you is going to reflect badly on you and throw away the opportunity to get suggestions about how better to solve the real problem. – Quentin Commented Sep 27, 2011 at 12:32

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

function getValues(){
  var form = document.getElementById('myformid');
  var url  = 'example./search.php?';

  for(var i=0; i<form.elements.length; i++) {
     var element = form.elements[i];
     //url += (i>0 ? '&' : '') + element.name + '=' + element.value;
     //UPDATE
     url += (i>0 ? '&' : '') + encodeURIComponent(element.name) + '=' + encodeURIComponent(element.value);
  }
  return url;
}

With the MochiKit library you could use:

http://mochi.github./mochikit/doc/html/MochiKit/DOM.html#fn-formcontents

Source here:

https://github./mochi/mochikit/blob/master/MochiKit/DOM.js#L45

This along with the 'querystring' function from the same library:

http://mochi.github./mochikit/doc/html/MochiKit/Base.html#fn-querystring

https://github./mochi/mochikit/blob/master/MochiKit/Base.js#L1184

And you can have a simple solution:

window.location.href = 'example./search.php?' + queryString(formContents(getElement('myformid')))

I know you want a javascript function, but this way maybe better if you want to send your request after submit:

<form name='myform' action='search.php' method='get'>
  <input type='text' name='name' />
  <input type='text' name='color' />
  <input type='text' name='made' />
  <input type='submit' />
</form>

<script>

function myFunction() {
    var name=document.myform.name.value;
    var color=document.myform.color.value;
    var made=document.myform.made.value;

    alert('example./search.php?name='+name+'&color='+color+'&made='+made);

}

</script>

<form name='myform' id='myformid' onSubmit='javascript:myFunction()'>

  <input type='text' name='name' id='name'>
  <input type='text' name='color' id='color'>
  <input type='text' name='made' id='made'>

  <input type='submit' name='submit'>

</form>