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

时间:2014-05-22 01:30:00

标签: javascript jquery ajax

我这里有一个ajax检查数据库中信息的可用性。但我的问题是,如果其他输入/文本框为空,我想要禁用提交按钮。我在我的ajax中添加了disable功能,但是当其中一个文本框有一个值时,禁用的功能就不起作用了。任何帮助都会受到欢迎。

的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';
}
}
?>

1 个答案:

答案 0 :(得分:1)

ajaxcomplete在这里使用不是正确的,ajaxcomplete为你做的每个ajax调用添加一个事件监听器,但是你只需要在这个ajax调用成功时检查消息。 / p>

虽然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

我不确定的另一件事是,当你执行if语句并且txtbxs != ''时,你试图检查方框是否为空或变量是否为空。

你设置的方式是你要检查变量是否为空,如果你想检查txtbxs是否有值,那么你想要一些不同的代码