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

Question

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>

You really should show us some effort in what you've done. You can read more about creating a Minimal, Complete, and Verifiable example. — Millhorn
– Millhorn, Commented Dec 11, 2018 at 5:05

naman bhardwaj · Accepted Answer · 2018-12-11 05:04:23Z

1

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..

answered Dec 11, 2018 at 5:04

naman bhardwaj

513 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Francesco G. Over a year ago

He/she seems to be using plain vanilla JS so it'd be better to mention that your suggestion is based on jQuery ;-) Also, this: value+".html" would end up in Apple.html or Broccoli.html which doesn't seem to be the desired outcome because he wants a fixed/common page for multiple choices. You'd also need some checks in place to avoid things like fudfud.html or 0123.html from happening

naman bhardwaj Over a year ago

ya sure @FrancescoG. the time I answered the question , the code wasn't mentioned. There after , I explained assuming he/she should get a basic gist of my solution . :) But anyways , thanks for correcting me . Will definitely keep such things in mind for future commenting .. :)

Rhea · Accepted Answer · 2018-12-11 14:20:54Z

1

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>

answered Dec 11, 2018 at 14:20

Rhea

6441 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related