使用 Javascript 或 jquery 从表单字段构建 URL
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4006991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Build URL from Form Fields with Javascript or jquery
提问by Troy
I have a quick question, I can't seem to find a suitable solution to anywhere else. I'm trying to create a URL builder form with Javascript or jquery. Bascially, it will take the value of the two form fields, add them to a preset url and show it on a third field on submit.
我有一个简短的问题，我似乎无法在其他任何地方找到合适的解决方案。我正在尝试使用 Javascript 或 jquery 创建一个 URL 构建器表单。基本上，它将获取两个表单字段的值，将它们添加到预设的 url 并在提交时显示在第三个字段上。
The resulting URL might be http://www.mydomain.com/index.php?variable1=12&variable2=56
生成的 URL 可能是http://www.mydomain.com/index.php?variable1=12&variable2=56
Now, this isn't the "action" of the form and the app can't read a URL (to grab the variables) so it has to be done in page.
现在，这不是表单的“操作”，应用程序无法读取 URL（以获取变量），因此必须在页面中完成。
The resulting URL will be shown in the "url" named field.
生成的 URL 将显示在“url”命名字段中。
Here's a sample of the form:
这是表单的示例：
<form id="form1" name="form1" method="post" action="">
<p>
<label>Variable 1
<input type="text" name="variable1" id="variable1" />
</label>
</p>
<p>
<label>Variable 2
<input type="text" name="variable2" id="variable2" />
</label>
</p>
<p>
<label>URL
<input type="text" name="url" id="url" />
</label>
</p>
<p>
<input type="submit" name="button" id="button" value="Submit" />
</p>
</form>
Thanks in advance! Troy
提前致谢！特洛伊
回答by epascarello
jQuery has serializewhich builds the querystring values
jQuery 已经序列化了，它构建了查询字符串值
So if you want to do the entire form:
所以如果你想做整个表格：
alert($("#form1").serialize());
If you want to do only a few fields, than just make the selector select those fields.
如果你只想做几个字段，而不是让选择器选择这些字段。
alert($("#variable1, #variable2").serialize());
回答by clarkf
How about something like...
比如说……
var inputs = $('#form1').find('input[type=text]').not('#url');
var str = "http://www.base.url/path/file.ext?"
inputs.each(function (i, item) {
str += encodeURIComponent(item.name) + "=" + encodeURIComponent(item.value) + "&";
});
$('#url').val(str);
This will select all <input>s on in form1with type='text', and concatenate them into a query string. See encodeURIComponent().
这将<input>在form1with 中选择所有s type='text'，并将它们连接成一个查询字符串。见encodeURIComponent()。
Orrrr.....you could just use .serialize(). Thank you, @prodigitalson.
Orrrr ......你可以使用.serialize(). 谢谢你，@prodigitalson。
回答by prodigitalson
Something like the following should work:
像下面这样的东西应该工作：
var partFields = '#variable1,#variable2';
$(partFields).change(function(){
var url = 'static/url/to/file.php?';
$('#url').val(url+$(partFields).serialize());
});
However unless you want people to be able to override the URL you might want to use a hidden field and a rgeular element for display and submission of the URL value in which cse youd have something like the following:
但是，除非您希望人们能够覆盖 URL，否则您可能希望使用隐藏字段和 rgeular 元素来显示和提交 URL 值，其中 cse 具有以下内容：
var partFields = '#variable1,#variable2';
$(partFields).change(function(){
var url = 'static/url/to/file.php?';
var urlValue = url+$(partFields).serialize();
$('#url-display').text(urlValue); // set the displaying element
$('#url').val(urlValue); // set the hidden input value
});
