如何将输入字段值作为将在单击提交按钮时打开的url查询字符串传递？

Question

我必须输入这样的字段

 <form>
    <input type="text" id="keyword" placeholder="XXX">
    <input type="text" id="state" placeholder="XXX">
    <button type="submit" id="submit">Submit</button>
 </form>

点击提交后,我想将它们发送到一个新页面,其中输入的值附加到带有查询字符串的URL.

 http://www.link.com/page?keyword=XYXYX&state=XZXX

这是我的开始思考,但正在考虑.serialize()可以比这个例子更好地处理这个问题

  var keywordVal = $("#keyword").val();
  var stateVal = $("#state").val();

  $( "form" ).on( "submit", function() {
   event.preventDefault();
   location.href='http://www.link.com/page?keyword=' + keywordVal + '&state=' + stateVal
  });

如果我以正确的方式接近它,请告诉我..

Answer 1

您不需要JavaScript来执行此操作.

只需添加action带URL的method属性GET并将属性设置为(这会将指定的字段值附加为查询字符串).

<form action="<yourURL>" method="GET">
    <input type="text" id="keyword" name="keyword" placeholder="XXX">
    <input type="text" id="state" name="state" placeholder="XXX">
    <button type="submit" id="submit">Submit</button>
</form>

注意:您需要name在字段上使用属性.

小提琴:http://jsfiddle.net/pjh7wkj4/