禁用按钮，直到表单字段为空但按钮在表单之外

Question

嗨，我正在WordPress 中创建一个popup plugin，我想在其中禁用我的按钮，该按钮在表单禁用之前，直到我的表单字段为空。我没有使用提交按钮，因为单击提交按钮后它会重新加载我不想这样做的页面，我只是希望它关闭所以我使用button 而不是type="submit"

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
                <h3>Modal header</h3>
            </div>
            <div class="modal-body">
                <form method="post" action="" name="sf-popup" id="sf-popup">

                    <input type="text" name="sfname" placeholder="Name" class="col-xs-12 col-md-6 sfname">
                    <input type="tel" name="sfphone" placeholder="Phone Number" class="col-xs-12 col-md-offset-1 col-md-5 sfphone">
                    <textarea name="message" placeholder="Enter Your Query" class="col-md-12"></textarea>
                </form>

            </div>
            <div class="modal-footer">
                <button id="sfpsubmit" class="btn btn-primary sfp_btn" name="submit">Submit</button>

            </div>
        </div>
    </div>

    <script>
        $("#sf-popup .sfname").keyup(function() {
            alert("hmmm");
            /* if($(this).val() == '' && $( "#sf-popup .sfphone").val() == ''){
            $('#sfpsubmit').attr('disabled','disabled');
        } else{
            $('#sfpsubmit').removeAttr('disabled');
        } */
        });
        $("#sf-popup .sfphone").keyup(function() {
            if ($(this).val() == '' && $("#sf-popup .sfname").val() == '') {
                $('#sfpsubmit').attr('disabled', 'disabled');
            } else {
                $('#sfpsubmit').removeAttr('disabled');
            }
        });
    </script>

</div>

我尝试了很多 javascript 方法，但都不适合我

工作代码 这段代码现在对我有用，谢谢你的帮助 Prakash Rao

jQuery(document).ready(function($) {
    setTimeout(function(){
            $('#myModal').modal('show');
        }, 3000);


        $( "#sf-popup .sfname" ).keyup(function() {
          if($(this).val() == '' || $( "#sf-popup .sfphone").val() == ''){
                $('#sfpsubmit').attr('disabled','disabled');

            } else{
                $('#sfpsubmit').removeAttr('disabled');
                $( ".sfp_btn" ).click(function() {
                    $('#myModal').modal('hide');
                });
            }
        });

        $( "#sf-popup .sfphone" ).keyup(function() {
            var sfp_phone = $(this).val();
            if(sfp_phone.length > 10){

                $(this).val(sfp_phone.substr(0,10));
                $('#sfpsubmit').removeAttr('disabled');
            }
                if(sfp_phone == '' || $( "#sf-popup .sfname").val() == '' || $.isNumeric(sfp_phone) == false ||sfp_phone.length < 10){
                $('#sfpsubmit').attr('disabled','disabled');

            } else{
                $('#sfpsubmit').removeAttr('disabled');
                $( ".sfp_btn" ).click(function() {
                    $('#myModal').modal('hide');
                });
            }
            });


    });

Answer 1

尝试jquery的keyup事件，每次用户在输入框中输入时都会检查

为输入框“sfphone”和“sfname”提供类

<input type="text" name="sfname" placeholder="Name" class="col-xs-12 col-md-6  sfname">
<input type="tel" name="sfphone" placeholder="Phone Number" class="col-xs-12 col-md-offset-1 col-md-5 sfphone">

确保提交按钮的 id 为 id="submit" 不是 2 次 在这个页面中，所有的 ID 也应该是一次

例如：用于姓名输入

$( "#sf-popup .sfname" ).keyup(function() {
  if($(this).val() == '' && $( "#sf-popup .sfphone").val() == ''){
    $('#submit').attr('disabled','disabled');
} else{
    $('#submit').removeAttr('disabled');
}
});

电话输入也是如此

$( "#sf-popup .sfphone" ).keyup(function() {
  if($(this).val() == '' && $( "#sf-popup .sfname").val() == ''){
    $('#submit').attr('disabled','disabled');
} else{
    $('#submit').removeAttr('disabled');
}
});