通过 url 和 jQuery 传递值的更好方法

Question

我正在使用表单插件的 Wordpress 网站上工作。该插件使用一种不寻常的方法来 post 表单值，并且似乎不支持传递任何 $POST 或 $GET 变量的方法。 IE。 print_r on $POST returns 一个空数组。奇怪的是插件还"requires" 表格的动作是空白的。基本上它所做的就是在提交数据后将您重定向到 "thank you page"。

我需要在后续表单中预填充一个单一字段，所以我想到了使用 javascript 将所需变量传递给 "thank you page" url真正导致后续表格。通常这个 url 应该被硬编码为表单中的隐藏字段，但我决定即时创建它。遗憾的是，我对 jQuery 比 js 更熟悉，所以我决定改用它。

所以无论如何我使用下面的代码让它工作，但感觉有更好的方法，并且担心我这样做的方式可能会有一些无法预料的后果。

$('#address').keyup(function () {
   string = this.value; //store value from address input field
   string = string.replace(/\s/g,"%20"); // Replace spaces 
   var url = "http://example.com/?page_id=156"; // url to thank you page 
   jQuery('#thankyou').html('<input type="hidden" name="thank_you_page" value="' + url  + '&property=' + string + '" type="text">');  // add the required hidden field to the form
 });

Answer 1

而不是使用 jQuery 注入。您可以简化并直接将隐藏的内容添加到带有 ID 的表单中。

例如

<form>
  <input id="thank_you_page_field" type="hidden" name="thank_you_page" value="" type="text">
</form>

然后只需使用 jquery 来填充它。

例如

$('#address').keyup(function () {
   string = this.value; //store value from address input field
   string = string.replace(/\s/g,"%20"); // Replace spaces 
   var url = "http://example.com/?page_id=156"; // url to thank you page 
   url += '&property=' + string
   jQuery('#thank_you_page_field').val(url) // update the value.
 });

也代替了

 string = string.replace(/\s/g,"%20"); // Replace spaces

试试 encodeURIComponent() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

最终代码可能如下所示

$('#address').keyup(function () {
   var url = "http://example.com/?page_id=156"; // url to thank you page 
   url += '&property=' + this.value //append the value
   $('#thank_you_page_field').val(encodeURIComponent(url)) // update the value
 });

通过 url 和 jQuery 传递值的更好方法

A better way to pass values through url with jQuery

forms

variables

url

jquery