Question

您好我正在popup plugin中创建一个WordPress，其中我要禁用我的按钮，该按钮位于窗体禁用之外，直到我的表单字段为空。我没有使用提交按钮，因为点击提交按钮后它重新加载我不想做的页面我只想让它关闭所以我使用的是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 =“submit”的提交按钮的ID不是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');
}
});

禁用按钮，直到表单字段为空但该按钮位于表单

1 个答案: