按鈕必須按特定的順序發送表單 - jquery

Question

我想要做一個益智遊戲，其中用戶必須按特定的順序，他們用一個文本框（將被隱藏）按下按鈕密碼（3位）如果用戶按下按鈕，例如（3,2,1）表格將自動提交併重定向到另一頁。

我試過了，但我做不到

這裏是我的代碼：

<form method="POST"> 
<input type="text" value="" id="text1" name="text1" style="width: 150px;" /> 
<br /> 
<input type="button" value="Click Me" id="1" /> 
<input type="button" value="Click Me" id="2" /> 
<input type="button" value="Click Me" id="3" /> 

</form> 

的jQuery

$(function() { 
    $('#1').click(function(e) { 
     var text = $('#text1'); 
     text.val(text.val() + '1'); 
     $('#1').attr("disabled", true);  

    }); 
     $('#2').click(function(e) { 
     var text = $('#text1'); 
     text.val(text.val() + '2');  
     $('#2').attr("disabled", true);  
    }); 
      $('#3').click(function(e) { 
     var text = $('#text1'); 
     text.val(text.val() + '3');  
     $('#3').attr("disabled", true);  
    }); 

}); 
$('#text1').trigger('change') { 
    alert('Changed'); 
}); 

Answer 1

你可以做這樣的事情：在接聽按鈕的foreach點擊disabele當前按鈕更新輸入value..and一旦用戶點擊所有的答案按鈕，檢查如果組合是正確的，如果是這樣的話重定向您的頁面。

$(function() { 
 
    var correct_order="321"; 
 
    var clicks=0; 
 
    var max_clicks=$('.answer').length; 
 
    $('.answer').click(function(e) { 
 
     clicks++; 
 
     $('#text1').val($('#text1').val()+$(this).data('info')); 
 
     $(this).attr("disabled", true); 
 
     if(clicks==max_clicks){ 
 
      if($('#text1').val()==correct_order) { 
 
       $('#answer_info').html("<p>Correct answer</p>"); 
 
       window.location.href = "https://yourpage"; 
 
      } 
 
      else { 
 
       $('#answer_info').html("<p>Wrong answer</p>"); 
 
      } 
 
     } 
 

 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<form method="POST"> 
 
<input type="text" value="" id="text1" name="text1" style="width: 150px;" /> 
 
<br /> 
 
<input type="button" value="Click Me" id="1" class="answer" data-info="1"/> 
 
<input type="button" value="Click Me" id="2" class="answer" data-info="2"/> 
 
<input type="button" value="Click Me" id="3" class="answer" data-info="3"/> 
 

 
</form> 
 
<div id="answer_info"> 
 

 
</div>

Answer 2

我不是100％肯定這正常工作，或者如果它會導致一個錯誤：

$(text1).val($(text1)+$(this).id); // might cause an error 

代碼：

$(document).on('click','#1',function()){ 
    $(text1).val($(text1)+$(this).id); 
} 
$(document).on('click','#2',function()){ 
    $(text1).val($(text1)+$(this).id); 
} 
$(document).on('click','#3',function()){ 
    $(text1).val($(text1)+$(this).id); 
} 
$(document).on('change','#text1'){ 
    alert('Changed to: '+$(this).val()); 
}); 

你可以試試這個，看看這個作品？

Answer 3

，如果你刪除的最後一塊代碼工作

$('#text1').trigger('change') { 
    alert('Changed'); 
}); 

我認爲最好的方法是使用一個字符串變量而不是文字輸入，並檢查其值單擊各個按鈕後，如

var string = ""; 
$('#1').click(function(e) { 
    var = var + "1"; 
    $('#1').attr("disabled", true);  
    checkCode(); 
}); 
$('#2').click(function(e) { 
    var = var + "2"; 
    $('#2').attr("disabled", true);  
    checkCode(); 
}); 
$('#3').click(function(e) { 
    var = var + "3"; 
    $('#3').attr("disabled", true);  
    checkCode(); 
});