I am having trouble with my form redirecting to a specific URL based on user input
Question
I have a form where I am trying to redirect the user to a different URL based on the input in the text field. So if they put "string1" it will redirect them to "./string1.html" if they put "string2" it will redirect them to "./string2.html" and if they put "string3" it will redirect them to "./string3.html"
When I click on the "submit-form" button it takes me to the "./default.html" page instead of going to its corresponding page with the input from the form.
Here is the Code:
<!DOCTYPE html> <html> <head> <title>redirect</title> <meta content="noindex, nofollow" name="robots"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href='redirect_form.css' rel='stylesheet' type='text/css'> <!--== Include CSS File Here ==--> <script type="text/javascript" src="validate.js"></script> <script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> </head> <body> <div class="main"> <div class="first"> <center><img src="hrhclogo.png" alt="Har"></center> <br> <form class="form-inline"> <div class="form-group"> <input type="text"> <button id="submit-form" type="button">Go!</button> </div> </form> <script type="text/javascript"> var urlMapping = { "fiftytwenty": "https://www.google.com", "fiftysixty": "https://www.yahoo.com", "fiftyeighty": "https://www.gmail.com" } $("#submit-form").click(function () { var input = $("input").val().trim(); if (urlMapping.hasOwnProperty(input)) { window.location = urlMapping[input]; } else { //if url not found, redirect to default url window.location = "./default.html"; } }); </script> </div> <!---- Including PHP File Here ----> <?php include "insert.php"; include "autoload.php"; ?> </div> </body> </html>
3 answers
solution1
1 2020-02-02 09:37:00
You have to include JQuery in this file.
<script
src="http://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
also need to be toLowercase()
solution2
0 2020-02-02 09:37:22
Just remove .toUpperCase() call
var urlMapping = { "string1" : "./string1.html", "string2" : "./string2.html", "string3" : "./string3.html" } $("#submit-form").click(function(){ var input = $("input").val().trim(); if (urlMapping.hasOwnProperty(input)){ console.log('IN REDIRECT'); window.location = urlMapping[input]; } else { //if url not found, redirect to default url window.location = "./default.html"; } });
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <form class="form-inline"> <div class="form-group" /> <input type="text" /> <button id="submit-form" type="button">Go!</button> </form>
solution3
0 2020-02-02 10:07:40
I tried your snippets on Codepen, the only thing I changed is toLowerCase() and remove the <div> without the closing </div> tag. And it runs as expected. So maybe there's some other code that affecting this code?
Check the console to see the input value when you click the 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.