Url Query String - Passing Liquid Values To Fill Out Form On Another Page
On my shopify website I have a product page with a request button, that when clicked should redirect the user to another page which has a form on it.
Clicking the button on the product page should pass the product title from that page to the other page and place that string variable into the form for the user to see and so that they can fill out the rest of the form with their information.
This is my link:
<a href="/pages/other-page#request-form">REQUEST ITEM</a>
What needs to be passed:
{{ product.title }}
Where it needs to be placed ( #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>
How would I go about writing a url query string to pass this liquid variable?
Edit:
Thank you to @TylerSebastion, I was able to get it to work.
The link:
<a href="/pages/other-page#request-form?product={{ product.title | url_param_escape }}">REQUEST ITEM</a>
Here is the code I used on the form page:
$(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, " "));
}
});
Answer
You can pass it in via a query parameter.
<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/pages/other-page#request-form?product={{ product.title }}">REQUEST ITEM</a>
As for getting it into the form, use the method from this post and
$(function() {
$("form #form_text").val(getParameterByName("product"));
});
I would also suggest, if at all possible in the templating engine you're using, to url encode the product name before appending it to the url.
If looks like there is a request object, though, in the Shopify/Liquid templating engine - I would try something like
<textarea id="form_text" name="content" placeholder="What item do you want?">{{ request.params.product }}</textarea>
and ditch the JS altogether (for this example)
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM