如何在javascript中获取表单元素值并使用这些值创建URL

时间:2011-09-27 11:02:22

标签: php javascript forms

例如,我有一个表格:

<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>

现在我想在上面的表单提交上调用javascript函数。此函数将获取所有表单元素值并创建要重定向的URL。

例如:

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

如何创建此JS函数?

由于

4 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:1)

使用MochiKit库,您可以使用:

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

来源:

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

这与来自同一个库的'querystring'函数一起使用:

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

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

你可以有一个简单的解决方案:

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

答案 2 :(得分:1)

我知道您想要 javascript 功能,如果您想在提交后发送请求,这种方式可能更好:

<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>

答案 3 :(得分: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>