首页 文章

Url查询字符串 - 传递液体值以填写另一页上的表单

提问于
浏览 次
0

在我的shopify网站上，我有一个带有请求按钮的产品页面，点击后应该将用户重定向到另一个页面上，该页面上有一个表单 .

单击产品页面上的按钮应将产品 Headers 从该页面传递到另一页面，并将该字符串变量放入表单中供用户查看，以便他们可以使用其信息填写表单的其余部分 .

这是我的链接：

<a href="/pages/other-page#request-form">REQUEST ITEM</a>

需要传递什么：

{{ product.title }}

需要放置的位置（#form_text）：

<form id="request-form" method="post">
    <input id="first_name" name="firstName" placeholder="First Name*" type="text" value="" /> 
    <input id="last_name" name="lastName" placeholder="Last Name*" type="text" value="" /> 
    <textarea id="form_text" name="content" placeholder="What item do you want?"></textarea> 
    <input id="requestFormSubmit" type="submit" value="SUBMIT" /> 
</form>

我如何写一个url查询字符串来传递这个液体变量？

编辑：

感谢@TylerSebastion，我能够让它发挥作用 .

链接：

<a href="/pages/other-page#request-form?product={{ product.title | url_param_escape }}">REQUEST ITEM</a>

这是我在表单页面上使用的代码：

$(function() {
    var product = getParameterByName('product');
    $("#form_text").text(product);

    function getParameterByName(product) {
        url = window.location.href;
        product = product.replace(/[\[\]]/g, "\\$&");
        var regex = new RegExp("[?&]" + product + "(=([^&#]*)|&|#|$)"),
            results = regex.exec(url);
         if (!results) return null;
         if (!results[2]) return '';
         return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
});
javascript jquery html shopify liquid

1 回答

  • 0

    您可以通过查询参数传递它 .

    <a href="/pages/other-page#request-form?product={{ product.title }}">REQUEST ITEM</a>

    至于将其放入表单中，请使用方法from this post和

    $(function() {
    $("form #form_text").val(getParameterByName("product"));
});

    我还建议，如果您正在使用的模板引擎中尽可能地对产品名称进行url编码，然后再将其附加到网址 .

    如果看起来有一个请求对象，但是，在Shopify / Liquid模板引擎中 - 我会尝试类似的东西

    <textarea id="form_text" name="content" placeholder="What item do you want?">{{ request.params.product }}</textarea>

    并完全放弃了JS（对于这个例子）

    回复于

相关问题