I'm trying to make a text input field where visitors can enter a value and then hit go or submit., and based on the input value they would be send to a new page with the information from the input field already populated.
For example if they type in 12345 as a zip code in the input field, we want them to be directed to http://www.example.com/&z=12345&ct=residential
And it would pull up in a separate window with the zip code field already populated in the embedded link.
I have tried this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $(“#z”).val();
window.location.replace("https://example.com/enroll?rb=Triple25&pc=Triple25&utm_source=cordial&utm_medium=email&utm_campaign=Triple25&z=&ct=residential"+inputvalue);
});
});
</script>
</head>
<body>
<input type="text" id=“z”>
<button type="button" id="button">Click Me!</button>
</body>
</html>
However it still will not auto-populate based on the input field information.
Could anybody please help me get this up and running? Thank you
You can use template string to inject the value of inputvalue into the string of the url.
Then use window.open() in order to open the page in a new window.
$(document).ready(function(){
$('#button').click(function(e) {
var inputvalue = $("#z").val();
var url = `https://example.com/enroll?rb=Triple25&pc=Triple25&utm_source=cordial&utm_medium=email&utm_campaign=Triple25&z=${inputvalue}&ct=residential`;
window.open(url);
});
});
HTML:
<input type="text" id="z">
<button type="button" id="button">Click Me!</button>