按钮必须按一个特定的顺序发送表单- jquery

Buttons must be pressed in a specific order to send the form - jquery

本文关键字：顺序 jquery 表单 一个 按钮      更新时间：2023-09-26

我正在尝试制作一款益智游戏，其中用户必须按特定顺序按下按钮，其中他们填写一个文本框(将被隐藏)密码(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');
});

你可以这样做:每次点击答案按钮禁用当前按钮更新输入值，一旦用户点击所有答案按钮检查组合是否正确，如果是这种情况重定向你的页面

$(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="answerswer"  data-info="1"/>
<input type="button" value="Click Me" id="2" class="answerswer"  data-info="2"/>
<input type="button" value="Click Me" id="3" class="answerswer"  data-info="3"/>
</form>
<div id="answerswer_info">
</div>

删除最后一段代码

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

我不能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());
});

你可以试试这个，看看这是否有效?

相关文章：