多个文本框和选择框为空时禁用按钮

时间:2014-03-04 07:34:58

标签: jquery ajax

我在这里添加和删除记录。我添加了一些函数来检查数据库中是否已存在输入。如果项目字段为空,我将保存按钮设置为禁用。我想要做的是添加其他字段,当某些字段为空时,保存按钮保持禁用状态。

有任何帮助吗?谢谢高级!!!

<SCRIPT type="text/javascript">
$(document).ready(function()
{
$("#item").change(function() 
{ 
var item = $("#item").val();
var msgbox = $("#status");
        if($(this).val().length !=0){
            $('#save').attr('disabled', false);

//$("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

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

   });
   } 

  }); 
} else
        {
            $('#save').attr('disabled', true);        
        }
return false;
});
});
</SCRIPT>

</head>
 <body>
 <br>
   <div style="margin-left: 20%;margin-top: 5%;">
      <input type="button" value="Add New Item" id="add_new"><p>
      <table width="70%" border="0" cellpadding="0" cellspacing="0" class="table-list">
        <tr>
            <th width="40%">Item</th>
            <th width="20%">Category Code</th>
            <th width="20%">Item Code</th>
            <th width="20%">Delete</th>
        </tr>
        <?php

            $res = $mysqli->query("select * from code order by item_code ASC");
            while($r = $res->fetch_assoc()){
                echo '<tr>
                        <td>'.$r['item'].'</td>
                        <td>'.$r['cat_code'].'</td>
                        <td>'.$r['item_code'].'</td>
                        <td><a href="#" id="'.$r['id'].'" class="del">Delete</a></td>
                      </tr>';
            }
        ?>
      </table>
    </div>

    <div class="entry-form">
        <form name="userinfo" id="userinfo">
        <table width="100%" border="0" cellpadding="4" cellspacing="0">

            <tr>
                <td colspan="2" align="right"><a href="#" id="close">Close</a></td>
            </tr>
            <tr>
            <td>Add New Item</td>
            </tr>
            <tr>
                <td>Category</td>
                <td><select name="cat_code" id="cat_code" onchange="GetChangedValue(this.value);" class="inputs" readonly="readonly">
                    <option value=""></option>
                    <?php
                    $result = $mysqli->query("SELECT * FROM category ORDER BY id");
                    while($row = $result->fetch_assoc())
                        {
                    echo "<option value='".$row['cat_code'].".".$row['letter']."'>".$row['category']."</option>";
                        }
                    ?>
                    </select>
                    <script>
                    $('[name="cat_code"]').change(function() {
                    $('[name="maincopy"]').val($(this).val().split(".")[0]);
                    if ($(this).val() == '') {
                    $("#item_code").val('');
                    } else {
                    //here you can specify what to do if the value is NOT 
                    }
                    });
                    </script>
                    <input type="hidden" name="maincopy" id="maincopy" value="" readonly="readonly">
                </td>
            </tr>
            <tr>
                <td>item Code</td>
                <td> <input type="text" name="item_code" id="item_code" value="" class="inputs" readonly="readonly"></td>
            </tr>
            <tr>
                <td>Item</td>
                <td><input type="text" name="item" id="item" value="" class="inputs" autocomplete="off"></td>
            </tr>
            <tr>
                <td></td>
                <td><span id="status" class="inputs"></span></td>
            </tr>
            <tr>
                <td align="right"></td>
                <td><input type="button" value="Save" id="save"><input type="button" value="Cancel" id="cancel"></td>
            </tr>
        </table>
        </form>
<script>
$("#cancel, #close, #add_new, #status").click(function() {
        $(".inputs").val("");
        $('input[id="save"]').attr('disabled','disabled');
        $("#status").val("");

});
</script>

0 个答案:

没有答案