使用Javascript或jquery从表单字段构建URL [英] Build URL from Form Fields with Javascript or jquery

问题描述

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

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.

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

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

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将是显示在url命名字段中。

The resulting URL will be shown in the "url" named field.

以下是表单示例：

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

提前致谢！
Troy

Thanks in advance! Troy

推荐答案

jQuery有序列化构建查询字符串值

jQuery has serialize which builds the querystring values

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

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

这篇关于使用Javascript或jquery从表单字段构建URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！