Redirect page depending on form submission in Jquery/Javascript?

Question

I'm working on a page that should redirect depending on what the user enters in the form, and I can't seem to figure it out. New to Javascript, and eager to learn!

Here is the html:

<body>
<div id="header">
    <div id="navcontainer">
        <ul>
            <li> <a href="#item1">Home</a> </li>
            <li> <a href="#item2">Scents</a> </li>
            <li> <a href="#item3">About</a> </li>
            <li> <a href="#item4">Contact</a> </li>
        </ul>
    </div>  
</div>
<div id="content">
        <p>Hi, how are you feeling today?</p>
        <form> <input id="feels" type="text" name="feeling" size="35" onchange="checkfeels(#feels.value);"> 
        <input type="submit" value="submit" >
        </form>
</div>

And the Javascript I have so far:

function checkfeels(myFeels) {
        switch (myFeels) 
        {
        case "good":
            document.location.href = 'scents.html';
            break
        case "bad":
            alert(2);
            document.location.href = 'scents2.html';
        default: 
            alert("whatever");
        }
    }

Any help is really appreciated, thanks!

What is supposed to happen? What actually happens? What browser(s) did you try? Have you enabled debugging in your browser? If yes, did it report any errors? — rhashimoto
– rhashimoto, Commented Mar 31, 2013 at 21:24
I just want the user to answer the question, "How are you feeling?", and when they enter their answer, they should be directed to a new page depending on their answer. I've tried in Firefox and Chrome, and I didn't think to enable debugging..I'll look into that. — Gantrof
– Gantrof, Commented Mar 31, 2013 at 21:27

Ilia Sidorenko · Accepted Answer · 2013-03-31 22:20:15Z

2

Put the

return checkfeels(this.elements.feeling.value)

in the form onsubmit attribute.

"feeling" in current case is the name of input field. <input type="text" name="feeling" > in your code.

And add

return false;

to the end of the checkfeels function to prevent default action (submiting form to server).

Also, you can pass to function whole form, for example:

return checkfeels(this)

And work already with whole form in checkfeels function.

function checkfeels(form) {
   var feeling = form.elements.feeling.value;
   var otherField = form.elements.otherField.value;

   // code with your logic here

   return false; // prevent default action
}

edited Mar 31, 2013 at 22:20

answered Mar 31, 2013 at 22:00

Ilia Sidorenko

2,8154 gold badges29 silver badges37 bronze badges

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

Comments

AnAmuser · Accepted Answer · 2013-04-01 08:25:06Z

1

Put the following code:

checkfeels($('#feels').val());
return false;

in the form onsubmit attribute.

edited Apr 1, 2013 at 8:25

answered Mar 31, 2013 at 21:08

AnAmuser

1,8955 gold badges27 silver badges42 bronze badges

1 Comment

Gantrof Over a year ago

When I do that, I'll just be taken to index.html?feeling=good rather than a new page. Am I doing something wrong..or do I just not understand how forms work?

Mickael · Accepted Answer · 2013-03-31 21:13:59Z

0

You cannot get what the user types with #feels.value (it seems that you make a mistake between jQuery syntax and javascript).

You can do that in pure javascript :

function checkfeels() {
    var myFeels = document.getElementById('feels').value;
    switch (myFeels) {
        case "good":
            document.location.href = 'scents.html';
            break
        case "bad":
            alert(2);
            document.location.href = 'scents2.html';
        default: 
            alert("whatever");
    }
}

You get what the user type with :

document.getElementById('feels').value

and you don't need to give any parameters to the function.

If you use jQuery, you can get the value with :

$('#feels').val();

answered Mar 31, 2013 at 21:13

Mickael

5,7362 gold badges28 silver badges23 bronze badges

Collectives™ on Stack Overflow

Redirect page depending on form submission in Jquery/Javascript?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related