根據輸入的內容發送/隱藏表格

我在頁面上有兩種形式。我需要通過輸入密碼將其分開。如果用戶輸入「1」，則提交頁面顯示一組表單，如果輸入「2」，則提交表單的第二組。根據輸入的內容發送/隱藏表格

不太確定這是可行的Javascript或jQuery。我使用WordPress作爲CMS。如果你知道一個可以解決問題的插件，那將是一件好事。

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

風格：

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

樣品FIDDLE：FIDDLE

來源

2016-04-04 MIke

試圖尋找這個 - http://stackoverflow.com/questions/19139402/show-div-depending-on-input-value 雖然我需要噸有2個密碼。 1和2只有該錯誤。不確定如何使用jjquery或javascript。與flexbox的東西。 – MIke

請發佈您的jQuery代碼。 – progrAmmar

你會得到什麼錯誤？ –

您需要添加其他如果第二次檢查採取看撥弄我有更新你

enter code herefiddle

來源

2016-04-04 06:32:28

試試這個：

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

來源

2016-04-04 07:12:28

這一點，在我看來，一個更清潔，stackble辦法做這樣的事情。

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>

通知，我創造，我想從一開始是一切的類。

CSS：

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

而現在的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; 
    } 
    }); 
});

這裏是小提琴http://jsfiddle.net/x2tjpzq5/1/

來源

2016-04-04 07:43:35

根據輸入的內容發送/隱藏表格

回答

相關問題