如何在提交表单时将查询字符串附加到 URL？答案

【问题标题】：How to append querystrings to a URL on submit of a form?如何在提交表单时将查询字符串附加到 URL？
【发布时间】：2012-02-02 13:49:40
【问题描述】：

好的，所以我在客户网站上有 2 个表单（网站是用 wordpress 构建的）。

客户正在使用 Mail Chimp 进行电子邮件营销，并在 Mail Chimp 中设置了 2 个表单来捕获用户数据并将他们订阅到两个不同的列表。

我在网站上有 2 个部分，其中包含这些表格的迷你版 - 他在 mail chimp 中完成的表格要大得多，需要分配更多详细信息，而我在网站上只有姓名、电话、电子邮件的表格。

我在 mail chimps 博客上阅读了一篇文章，其中讨论了如何通过在 url 末尾添加相关查询来自动填写页面加载表单上的某些字段，例如http:/FORMADRESS&MERGE1=Jack - 这会在表单上的“名字”框中预先填写 Jack。

((http://blog.mailchimp.com/how-to-pre-fill-items-on-your-mailchimp-hosted-form/))

如何将这些查询字符串添加到 URL 的末尾，以便在大型邮件黑猩猩表单上预先填写站点上迷你表单中的 3 个字段？

任何人都知道的任何替代解决方案也将不胜感激。

亲切的问候，

【问题讨论】：

标签： html forms mailchimp

【解决方案1】：

如果我理解正确，表格应该可以解决问题：

<form action="http://echo.iambroken.com/" method="get">
    <input name="one">
    <input name="two">
    <input type="submit">
</form>

请注意，如果action URL 上已经有查询字符串，这将替换它 - 因此，如果 URL 上已经有其他参数，请将它们作为隐藏输入包含在表单中，如下所示：

<input type="hidden" name="q" value="123">

【讨论】：

非常感谢！我稍后会试一试。为您的帮助干杯。

【解决方案2】：

您可以使用简单的附加查询将隐藏变量附加到表单在这里，您可以在您的 javacript 中执行以下操作。

Var hiddenVar="<input type="hidden" name="q" value="123">"
$('form').append(hiddenVar)

您可以在您的操作中获取此值请求参数。

【讨论】：

【解决方案3】：

使用 JQuery，您可以在表单加载时修改 action 属性。在下面的示例中，我只过滤掉了我需要与表单一起提交的 QueryString 参数并将它们应用于操作。

$(function(){
    var urlParams = new URLSearchParams(location.search);
    var id = urlParams.get('id');
    var codeid = urlParams.get('codeid');
    var params = "?id=" + id + "&codeid=" + codeid;
    $("form").attr("action", location.pathname + params);
});

【讨论】：

【解决方案4】：

您获得迷你表单的三个字段并将它们作为隐藏字段推送到其他表单。然后在使用时提交它们，隐藏字段也是表单的一部分，并将添加到 URL。

【讨论】：

你能扩展一下吗？我不完全是专家 - 更多的是平面设计师而不是网页设计师，所以任何关于如何理解的建议都将不胜感激。谢谢:)
您可以使用javascript获取迷你表单值并将它们推送到主表单，然后在主表单中您可以从迷你表单获取值到隐藏字段。如果您可以将您的表单分享给 Fiddle，我们将尝试使用。