隐藏/显示表单，取决于发送的输入

Question

I have 2 forms on a page. I need to separate this via input password. If the user types "1" then submit the page display 1 set of form, if "2" is the input then submit the 2nd set of the form.

Not quite sure if this is doable on Javascript or in jQuery. I'm using WordPress as a CMS. If you know a plugin that can solve the issue that would be good.

HTML:

<p>ENTER YOUR INVITATION CODE</p>
<div id="incorrect">Sorry, Try again!</div>
<input type='text' id="code"/>
<input type='button' id="buttontest" value="VERIFY"/>

<div id="JPC1">CONTENT 1</div>
<div id="JPC2">CONTENT 2</div>

SCRIPT:

$(document).ready(function(){
    $("#buttontest").click(function(){
        if ($('#code').val() == "1") {   
            $("#JPC1").show("fast"); //Slide Down Effect
            $("#JPC2").hide("fast"); //Slide Down Effect
            $("#incorrect").hide("fast");    //Slide Up Effect
        } 
        if ($('#code').val() == "2") {   
            $("#JPC1").hide("fast"); //Slide Down Effect
            $("#JPC2").show("fast"); //Slide Down Effect
            $("#incorrect").hide("fast");    //Slide Up Effect
        } 
        else {
            $("#incorrect").show("fast");    //Slide Up Effect
        }
    });
});

STYLE:

#incorrect {display:none;} #code {color:#000;}
#JPC1, #JPC2 {display:none;}

SAMPLE FIDDLE: FIDDLE

Answer 1

you need to add else if for second check take a look fiddle i have update for you

enter code here fiddle

Answer 2

Try this :

$(document).ready(function(){
    $("#buttontest").click(function(){
        if ($('#code').val() == "1") {   
            $("#JPC1").show("fast"); //Slide Down Effect
            $("#JPC2").hide(); //Slide Down Effect
            $("#incorrect").hide("fast");    //Slide Up Effect
        }else if ($('#code').val() == "2") {   
            $("#JPC1").hide("fast"); //Slide Down Effect
            $("#JPC2").show("fast"); //Slide Down Effect
            $("#incorrect").hide();    //Slide Up Effect
        } 
        else {
            $("#incorrect").show();    //Slide Up Effect
        }
    });
});

Answer 3

This is, in my opinion a cleaner and stackble way to do something like that.

HTML

<p>ENTER YOUR INVITATION CODE</p>
<div id="incorrect" class="ini-hide">Sorry, Try again!</div>
<input type='text' id="code"/>
<input type='button' id="buttontest" value="VERIFY"/>

<div id="JPC1" class="ini-hide">CONTENT 1</div>
<div id="JPC2" class="ini-hide">CONTENT 2</div>

Notice, I create a class for everything that I want to being right from the begin.

CSS:

#incorrect {display:none;} #code {color:#000;}
#JPC1, #JPC2, div.ini-hide {display:none;}

And now the JS.

$(document).ready(function(){
    $("#buttontest").click(function(){
    $("div.ini-hide").hide("fast"); //Hide everything in every buttom click.
    switch($('#code').val()){ //Get value from the input
      case "1": //the value is 1?
            $("#JPC1").show("fast"); //Slide Down Effect and show JPC1
        break;
      case "2": //the value is 2?
            $("#JPC2").show("fast"); //Slide Down Effect and show JPC2
      break;
      default: //No value find to compare?
            $("#incorrect").show("fast");    //Slide Up Effect and show incorrect
      break;
    }
    });
});

Here is the fiddle http://jsfiddle.net/x2tjpzq5/1/