hide/show forms depending on what the input is send

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

Tried looking to this - http://stackoverflow.com/questions/19139402/show-div-depending-on-input-value Though I need t have 2 passwords. 1 and 2 only other than that error. not sure on how to use jjquery or javascript. with the flexbox thing. — MIke, Apr 04 '16 at 03:57
i guess you are missing an "else" on your second if condition — Rafique Mohammed, Apr 04 '16 at 07:11

score 0 · Answer 1 · answered Apr 04 '16 at 06:32

0

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

enter code herefiddle

answered Apr 04 '16 at 06:32

usman khan

119
5

score 0 · Answer 2 · answered Apr 04 '16 at 07:12

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
        }
    });
});

score 0 · Answer 3 · answered Apr 04 '16 at 07:43

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/

hide/show forms depending on what the input is send

3 Answers3