必须按特定顺序按下按钮才能发送表单 - jquery答案

【问题标题】：Buttons must be pressed in a specific order to send the form - jquery必须按特定顺序按下按钮才能发送表单 - jquery
【发布时间】：2016-09-23 16:41:58
【问题描述】：

我正在尝试制作一个益智游戏，其中用户必须按特定顺序按下按钮，例如，如果用户按下按钮，他们将使用密码（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');
});

【问题讨论】：

您应该尝试重新表述您的问题，因为目前这不是一个真正的问题。如果您不希望人们只是为您编写解决方案，人们会更愿意提供帮助。

标签： javascript jquery html

【解决方案1】：

您可以执行以下操作：foreach 单击答案按钮禁用当前按钮更新输入值..一旦用户单击所有答案按钮，检查组合是否正确，如果是则重定向您的页面。

$(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>

【讨论】：

非常感谢，这正是我想要的！太棒了:)

【解决方案2】：

删除最后一段代码就可以了

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

【讨论】：

【解决方案3】：

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

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

【讨论】：