禁用提交按钮

Question

I have a form which contains several elements and one of them being the select value element.However what i have done is that i have attached the quantity that has to be shown on the select menu, whose values comes from the database.

Example:

Suppose i have set 10 in my database for quantity then , the select element will show me options from 1-10.

Code:

               <?php
                    if(@$dbqty>=10)
                    {
                        $selectbox='<p> Quantity:  <select name="product_qty">';
                        for($i=1;$i<=10;$i++)
                        {
                            $selectbox.='<option value="'.$i.'">'.$i.'</option>';
                        }
                        $selectbox.='</select></p>';
                        echo $selectbox;
                    }
                    else if(@$dbqty<10 && @$dbqty>0)
                    {
                        $selectbox='<p> Quantity:  <select name="product_qty">';
                        for($i=1;$i<=@$dbqty;$i++)
                        {
                            $selectbox.='<option value="'.$i.'">'.$i.'</option>';
                        }
                        $selectbox.='</select></p>';
                        echo $selectbox;

                    }
                    if(@$dbqty==null || @$dbqty==0)
                    {
                        echo '<input type="button" name="product_qty" value="Sold Out" disabled="disabled"/>';
                    }
                    ?>

In the javascript part i have set a function which submit the form to a php file and loads its response text.

Code:

$(document).ready(function(){
$(document).on('submit','#submitform',function(event){
    event.preventDefault();
    var button_content = $(this).find('button[type=submit]');
    button_content.html('Adding...');
    var data=$(this).serialize();
    $.ajax({
        type:'POST',
        url:'../cart/index.php',
        data:data,
        success : function(content)
        {
            if ($('#ajaxview').find('#popupcart')) {
                $('#popupcart').hide();

                $('#ajaxview').append(content);
                button_content.html('Add');
            }
            else
            {
                $('#ajaxview').append(content);
                button_content.html('Add');
            }

        }
    })
})
})    

What i was trying to do is that when the quantity for the item comes out to be sold out the submit button gets disabled.Is it possible? If yes,How to do this one then?

Thanks!

Answer 1

我认为，更好的方法是使用javascript从数据库中获取数据，然后根据检索到的值，使用jQuery启用/禁用按钮。

Answer 2

use this jquery to remove the submit events on the buttons which has value sold out

 $('input[value="Sold Out"]').on('click',function(e){
   e.preventDefault(); //stop the event
});

Or if the elements are appended dynamically, then you got to use delegated event handlers to attach the event. like below

$(document).on('click','input[value="Sold Out"]',function(e){
   e.preventDefault(); //stop the event
});

Answer 3

 $(document).on('submit','#submitform',function(event){
        event.preventDefault();
        var input=$("#submitform :input[name='product_qty']").val();
        if(input==null)
            $(this).find('button[type=submit]').prop('disabled', true);
   }

This is what i did.It worked.However not a correct way to do this but it does the work.Stops the submit button to send any request.