使用JavaScript或jQuery从表单域构建URL
使用JavaScript或jQuery从表单域构建URL
提问于 2010-10-24 11:04:01
我正在尝试用JavaScript或jQuery创建一个网址生成器表单。
基本上，它将获取两个表单域的值，将它们添加到一个预设的URL中，并在提交时将其显示在第三个域中。
生成的URL可能是http://example.com/index.php?variable1=12&variable2=56。
现在，这不是表单的“动作”，应用程序不能读取URL (以获取变量)，因此它必须在页面上完成。
生成的URL将显示在名为"url“的字段中。
以下是该表单的示例：
<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>回答 3
Stack Overflow用户
回答已采纳
发布于 2010-10-24 20:15:52
jQuery具有构建查询字符串值的serialize。
因此，如果您想要完成整个表单：
alert($("#form1").serialize());如果你只想做几个字段，那么就让选择器选择这些字段。
alert($("#variable1, #variable2").serialize());Stack Overflow用户
发布于 2010-10-24 11:22:47
使用像这样的东西。
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);这将选择带有type='text'的form1中的所有<input>，并将它们连接成一个查询字符串。参见encodeURIComponent()。
Orrrr.....you可以直接使用.serialize()。Thank you, prodigitalson。
Stack Overflow用户
发布于 2010-10-24 11:23:25
下面这样的代码应该是有效的：
var partFields = '#variable1,#variable2';
$(partFields).change(function(){
var url = 'static/URL/to/file.php?';
$('#url').val(url + $(partFields).serialize());
});但是，除非您希望人们能够覆盖URL，否则您可能希望使用隐藏字段和常规元素来显示和提交URL值，在这种情况下，您将具有类似以下内容：
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
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4006991
复制相关文章
相似问题
腾讯云开发者
