how to get form elements values in javascript and create a url with thoese values

Question

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.com/search.php?name=toyota&color=white&made=abc

How can I create this JS function?

Thanks

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
– yan.kun, Commented Sep 27, 2011 at 11:09
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
– 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
– Quentin, Commented Sep 27, 2011 at 12:32

Jan Pfeifer · Accepted Answer · 2011-09-27 11:21:32Z

3

function getValues(){
  var form = document.getElementById('myformid');
  var url  = 'example.com/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;
}

edited Sep 27, 2011 at 11:21

answered Sep 27, 2011 at 11:08

Jan Pfeifer

2,85130 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Quentin Over a year ago

Don't try to build URIs by just smashing together arbitary strings. encode them properly

Jan Pfeifer Over a year ago

You are right, encodeURIComponent(value) should be sufficient IMHO

Quentin Over a year ago

You need to encode the names too (at least in the general case).

Awan Over a year ago

I have a problem. My actual form has some dropdowns. It is writing Array for those elements in URL. How to solve this.. Any solution ??

Awan Over a year ago

It is giving me result something like this ?Array=toyota&Array=red&Array=abc

|

EoghanM · Accepted Answer · 2011-09-27 11:12:33Z

1

With the MochiKit library you could use:

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

Source here:

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

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

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

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

And you can have a simple solution:

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

answered Sep 27, 2011 at 11:12

EoghanM

27.5k25 gold badges95 silver badges126 bronze badges

6 Comments

Awan Over a year ago

I cant use any library. I need simple javascript. Thanks

EoghanM Over a year ago

I understand. Just note that e.g. MochiKit takes care of browsers where encodeURIComponent isn't defined.

Quentin Over a year ago

JavaScript is simpler when you let someone else package up all the complicated parts in a library.

Quentin Over a year ago

@EoghanM — What browsers which don't support encodeURIComponent are of concern these days? (Or even 5 years ago)

RobG Over a year ago

encodeURIComponent was in ECMA-262 ed 3, so 12 years old. Any browser so old as to not support it would be utterly useless on the web today.

|

masoud · Accepted Answer · 2011-09-27 11:14:12Z

1

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>

answered Sep 27, 2011 at 11:14

masoud

56.8k18 gold badges152 silver badges214 bronze badges

1 Comment

RobG Over a year ago

Why the XML-style markup? If you want valid markup, you also need a block element inside the form to wrap the form controls. But browsers will tolerate its absence.

Mohamed Atef · Accepted Answer · 2011-09-27 11:12:59Z

0

<script>

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

    alert('example.com/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>

answered Sep 27, 2011 at 11:12

Mohamed Atef

1961 gold badge3 silver badges12 bronze badges

2 Comments

Quentin Over a year ago

Why have you got a label named javascript: in there? It isn't doing anything.

Quentin Over a year ago

And you've failed to escape the data you are smashing together into a URL.

Collectives™ on Stack Overflow

how to get form elements values in javascript and create a url with thoese values

4 Answers 4

9 Comments

6 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

6 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related