如何将输入字段值作为将在单击提交按钮时打开的url查询字符串传递？ [英] How to pass input field values as a url query string that will be opened on click of a submit button?

问题描述

我必须输入这样的字段

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

点击提交后，我想将它们发送到带有输入值的新页面使用查询字符串附加到url。

On click of the submit I would like to send them to a new page with the value of the input appended to the url with query string.

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

这是我的开始思考但是想到 .serialize（）可以处理这个优于示例

Here is my start thinking but was thinking .serialize() can handle this better than this example

  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
  });

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

let me know if i am approaching it the right way..

推荐答案

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

You don't need JavaScript to do this.

只需添加 action 带有URL的属性，并将方法属性设置为 GET （这将追加命名字段值作为查询字符串）。

Simply add an action attribute with the URL and set the method attribute to GET (this will append the named field values as a query string).

<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 属性在你的领域。

NOTE: You'll need name attributes on your fields.

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

这篇关于如何将输入字段值作为将在单击提交按钮时打开的url查询字符串传递？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！