CODEWITHSUNDEEP
javascripthtmlforms
Sydney
Sydney

Reputation: 11

How do I take user input and link to corresponding HTML page using JavaScript?

So, I have a form on my HTML page, and a separate button that links to the form. My question is: when the user enters a certain input (in this case a string) and clicks on the button, how do I connect the user to a different HTML page based on the corresponding user input from the form? I know I have to use javascript, but any specific code will be extremely helpful. Thanks!

ADDDED MY CODE:

<!doctype html>
<html>
<head>
    <title>Home</title>
    </head>

    <body>
            <form id = "user-info" onSubmit="myFunction()">
                <div class = "favorite-fruit">
                    <p>Enter your favorite fruit<br></p>
                        <input type="text" name="fav-fruit" id = "fruit"><br>
                </div>
                <div class="favorite-vegetable">
                    <p>Enter your favorite vegetable<br></p>
                        <input type="text" name="fav-vegetable" id="vegetable">
                </div>
            </form>
            <a class = "confirm" onSubmit="myFunction()">
                <button form= "user-info" type="button" name= "confirm-input">Confirm</button>
            </a>
        </div>


        <script type="text/javascript">
            function myFunction(){
                var firstFruit = document.getElementById("fruit").innerHTML;
                var secondVegetable = document.getElementById("vegetable").innerHTML;
                var f = firstFruit;
                var s = secondVegetable;

                if(f.value == "Apple" && s.value == "Broccoli"){
                    //GO TO "appleBroccoli.html"
                }
                else if(f.value == "Grapes" && s.value == "Carrots"){
                    //GO TO "grapesCarrots.html"
                }
                else if(f.value == "Strawberry" && s.value == "Kale"){
                    //GO TO "strawberryKale.html"
                }



            }



        </script>
      </body>
</html>

Upvotes: 0

Views: 919

Answers (2)

Rhea
Rhea

Reputation: 644

Your form, user-info doesnt have a submit button

add <input type = 'submit' name='conform'>Confirm</input> inside the form

Set action and method to the form to the corrosponding target HTML page.

<form action='..target html' method ='get'>
</form>

If the input is brocolli, you can change the form action as

document.getElementById('user-info').action = <new target>

Upvotes: 1

naman bhardwaj
naman bhardwaj

Reputation: 51

It can be done by taking up the value of input tag like :-

var value = $(element).val();

Then resetting the action attribute of the form tag with the new value like :-

$(formElem).attr("action",value+".html")

I guess this would help u..

Upvotes: 1

Related Questions