使用Javascript或jquery从表单字段构建URL

我有一个简单的问题，我似乎无法找到适合其他地方的解决方案。 我正在尝试使用Javascript或jquery创建URL构建器表单。 基本上，它将获取两个表单字段的值，将它们添加到预设URL并在提交时显示在第三个字段上。

生成的URL可能是http://www.mydomain.com/index.php?variable1=12&variable2=56

现在，这不是表单的“动作”，应用程序无法读取URL（以获取变量），因此必须在页面中完成。

生成的URL将显示在“url”命名字段中。

以下是表单的示例：

 
 Variable 1   
 
 Variable 2   
 
 URL   
 
  
  

提前致谢！ 特洛伊

Answer 1

jQuery有serialize来构建查询字符串值

所以如果你想做整个表格：

 alert($("#form1").serialize()); 

如果您只想做几个字段，那么只需让选择器选择这些字段即可。

 alert($("#variable1, #variable2").serialize()); 

Answer 2

怎么样……

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

这将在form1中选择type='text'所有 ，并将它们连接成一个查询字符串。 请参见encodeURIComponent() 。

---

Orrrr …..你可以使用.serialize() 。 谢谢@prodigitalson。

Answer 3

像下面这样的东西应该工作：

 var partFields = '#variable1,#variable2'; $(partFields).change(function(){ var url = 'static/url/to/file.php?'; $('#url').val(url+$(partFields).serialize()); }); 

但是，除非您希望人们能够覆盖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 });