Create an auto-populate dynamic link URL based on user info in an input field
Question
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
2 answers
solution1
0 2020-09-10 20:06:30
wrong quotes char around id :)
must be
<input type="text" id="z">
and
var inputvalue = $("#z").val();
solution2
0 ACCPTED 2020-09-10 20:13:29
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.