按钮必须按特定的顺序发送表单 - 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(); 
});