Question

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

生成的网址可能是http://www.mydomain.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>

提前致谢！特洛伊

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

这将选择<input>中带有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
});

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

3 个答案: