如果输入为空，则禁用提交按钮

user3631428 发表于 Dev

用户名

我在这里使用的是一个ajax，用于检查数据库中信息的可用性。但是我的问题是，如果其他输入/文本框为空，我想禁用提交按钮。我在我的ajax中添加了禁用功能，但是当文本框之一具有值时，禁用功能不起作用。任何帮助将不胜感激。

Index.php

<script type="text/javascript">
$(document).ready(function()
{
$('input[type="text"]').change(function() 
{
var pr = $("#pr").val();
var msgbox = $("#status");
var txtbxs = $('.inputs').val();

$.ajax({
    type: "POST",
    url: "check_ajax.php",
    data: "pr="+pr,
    success: function(msg){
    console.log(msg)
   $("#status").ajaxComplete(function(event, request){
    if(msg == 'OK' && txtbxs !== '')
    {
        msgbox.html('<img src="css/available.png" align="absmiddle">');
        $("#save").prop("disabled",false);
    }
    else
    {
    $("#save").prop("disabled",true);
    msgbox.html(msg);
    }
   }); 
   }  
  });
return false;
});
});
</script>

<tr>
    <td>PR #</td>
    <td><input type="text" name="pr" id="pr" autocomplete="off"></td>
</tr>
<tr>
    <td></td>
    <td><span id="status"></span></td>
</tr>
<tr>
    <td>Date1</td>
    <td><input type="text" class="datepicker inputs" autocomplete="off" readonly></td>
</tr>
<tr>
    <td>Date2</td>
    <td><input type="text" class="datepicker inputs" autocomplete="off" readonly></td>
</tr>
<input type="button" value="Save" id="save">

Check_ajax.php

<?php
if(isset($_POST['pr']))
{
$pr = $_POST['pr'];
$sql = $mysqli->query("select id, pr from pr_list where pr='$pr'");
if(($sql->num_rows)>= 1)
{
echo '<STRONG>'.$pr.'</STRONG> is already in use.';
}
elseif($pr == '') {
echo 'Fund is Empty';
}
else
{
echo 'OK';
}
}
?>

兴奋剂

ajaxcomplete在这里使用并不是真正正确的方法，ajaxcomplete它为您进行的每个ajax调用添加了一个事件侦听器，但仅在此ajax调用成功后才需要检查消息。

尽管它对于msg在ajaxcomplete函数中没有作用域的变量仍然有效。这是我会做的一种方法。

<script type="text/javascript">
$(document).ready(function()
{
    // I've moved these variables here to give them global-ish scope
    // I've also added a variable to assign your save button to
    var msgbox = $("#status"),
        saveButton = $("#save");


    $('input[type="text"]').change(function() 
    {
        var pr = $("#pr").val(),
            txtbxs = $('.inputs'),
            empty = true;


        $.ajax({
            type: "POST",
            url: "check_ajax.php",
            data: "pr="+pr,
            success: function(msg){

                 console.log(msg)

                 // loop through the txtbxs and check for emptiness :)
                 $.each(txtbxs, function(key, box) {
                    if (box.val() != "") {
                       empty = false;
                    } else {
                       empty = true;
                    }
                 });

                 if(msg == 'OK' && !empty) {
                    msgbox.html('<img src="css/available.png" align="absmiddle">');
                    saveButton.prop("disabled",false);
                 } else {
                    saveButton.prop("disabled",true);
                    msgbox.html(msg);
                 }
            } // END OF SUCCESS FUNCTION
        });// END OF AJAX CALL
    }); 
});// END OF DOCUMENT READY