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

您好，我正在

WordPress

中创建一个

弹出式插件

，在该插件中，我想禁用表单禁用之外的按钮，直到我的表单字段为空。我没有使用submit按钮，因为在单击submit按钮后，它会重新加载我不想做的页面，我只想将其关闭，因此我使用的是

按钮

，而不是

type=“submit”

×
模态头
提交
$（“#sf popup.sfname”）.keyup（函数（）{
警报（“hmmm”）；
/*if（$（this.val（）=''&$（“#sf popup.sfphone”）.val（）=''）{
$（'sfpsubmit'）.attr（'disabled'，'disabled'）；
}否则{
$（'sfpsubmit'）.removeAttr（'disabled'）；
} */
});
$（“#sf popup.sfphone”）.keyup（函数（）{
if（$（this.val（）=''&$（“#sf popup.sfname”）.val（）=''）{
$（'sfpsubmit'）.attr（'disabled'，'disabled'）；
}否则{
$（'sfpsubmit'）.removeAttr（'disabled'）；
}
});

我尝试了很多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');
                });
            }
            });


    });

jQuery（文档）.ready（函数（$）{
setTimeout（函数（）{
$（'myModal'）.modal（'show'）；
}, 3000);
$（“#sf popup.sfname”）.keyup（函数（）{
if（$（this.val（）=''）（''sf popup.sfphone'）.val（）=''）{
$（'sfpsubmit'）.attr（'disabled'，'disabled'）；
}否则{
$（'sfpsubmit'）.removeAttr（'disabled'）；
$（“.sfp_btn”）。单击（函数（）{
$（'#myModal'）.modal（'hide'）；
});
}
});
$（“#sf popup.sfphone”）.keyup（函数（）{
var sfp_phone=$（this.val（）；
如果（sfp_电话长度>10）{
$（this.val（sfp_phone.substr（0,10））；
$（'sfpsubmit'）.removeAttr（'disabled'）；
}
如果（sfp|u phone=''||$（“| sf popup.sfname”）.val（）=''| |$.isNumeric（sfp|u phone）==false | sfp|u phone.length<10）{
$（'sfpsubmit'）.attr（'disabled'，'disabled'）；
}否则{
$（'sfpsubmit'）.removeAttr（'disabled'）；
$（“.sfp_btn”）。单击（函数（）{
$（'#myModal'）.modal（'hide'）；
});
}
});
});

尝试jquery的keyup事件，该事件将在用户每次在输入框中键入时进行检查

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

电话输入也是如此

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

---

看一看。回答中有很多方法，我已经检查过了，但在此情况下，submit按钮位于表单内部，by按钮位于表单外部，我在问题中已经提到了这一点。单击表单中的submit按钮时，您可以使用

preventDefault（）禁用页面刷新

在删除TTRNO prob之前，我认为点应该是一个点，但按钮不可禁用。请尝试将此jquery代码与脚本标记一起粘贴到弹出窗体下方。。这是在第1个和第2个jquery块中，我也在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">

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