php - ajax - 使用 AJAX 提交多个按钮但仅获得第一个值

Question

我遇到了一个问题，我试图将提交按钮的值与表单一起传递给 ajax，但由于某种原因，无论我按下哪个按钮，唯一传递的值都是第一个按钮。表单还有更多内容，但我只是显示按钮。

<form>
    <input type="submit" name"finalize_invoice" id="finalize_invoice" value="Delete" />
    <input type="submit" name"finalize_invoice" id="finalize_invoice" value="Save" />
    <input type="submit" name"finalize_invoice" id="finalize_invoice" value="Finalize" />
</form> 

      $(document).ready(function(){
            $("form#submit").submit(function() {
            // we want to store the values from the form input box, then send via ajax below
            var invoice_temp_id = $('#invoice_temp_id').attr('value');
            var man_part_number = $('#man_part_number').attr('value');
            var customer = $('#customer').attr('value');
            var date = $('#date').attr('value');
            var shipdate = $('#shipdate').attr('value');
            var shipvia = $('#shipvia').attr('value');
            var ponumber = $('#ponumber').attr('value');
            var rep = $('#rep').attr('value');
            var invoicenotes = $('#invoicenotes').attr('value');
            var serial_number = $('#serial_number').attr('value');
            var skid = $('#skid').attr('value');
            var finalize_invoice = $('#finalize_invoice').attr('value');
            $.ajax({
            type: "POST",
            url: "includes/createfinalinvoice.php?",
            data: "invoice_temp_id="+ invoice_temp_id+
                "&man_part_number="+ man_part_number+
                "&customer="+ customer+
                "&date="+ date+
                "&shipdate="+ shipdate+
                "&shipvia="+ shipvia+
                "&ponumber="+ ponumber+
                "&rep="+ rep+
                "&invoicenotes="+ invoicenotes+
                "&serial_number="+ serial_number+
                "&skid="+ skid+
                "&finalize_invoice="+ finalize_invoice+
                $( this ).serialize(),
                success: function(data){
                    if (data == 1) {
                        var thiserror = 'You may not have any blank fields, please make sure there is a serial number in each field';
                        alert(thiserror);
                    }
                    if (data == 2) {
                        var thiserror = 'Your serial number(s) do not match with the Manufacture Part Numbers, please double check your list';
                        alert(thiserror);
                    }
                    if (data == 3) {
                        var thiserror = 'Some of your serial numbers are not located in the database, please make sure you entered the correct serial number';
                        alert(thiserror);
                    }
                    if (data == 4) {
                        var thiserror = 'This item has already been sold to another customer. Please report this to administration';
                        alert(thiserror);
                    }
                    if (data == 5) {
                        var thiserror = 'Everything went OK, you may continue and view the processed invoice';
                        alert(thiserror);
                    }
                    if (data == 6) {
                        var thiserror = 'There are no default prices setup for this customer matching the Manufacture Part Numbers. Please check and make sure they all exist before processing this list';
                        alert(thiserror);
                    }
                    if (data == 7) {
                        window.location = ('/admin/?mmcustomers=1&viewinvoice=1');
                    }

                }
            });
            return false;
            });
         });

Answer 1

<form>
    <input type="button" name"del_button" id="del_btn" value="Delete" />
    <input type="button" name"save_button" id="save_btn" value="Save" />
    <input type="button" name"finalize_button" id="finalize_btn" value="Finalize" />
</form> 

<script>
    $(document).ready(function(){
        var clicked_btn = '';
        $('form').submit(function(){ return false; });
        $('form input[type=button]').click(function(){ 
             clicked_btn = $(this).attr('id'); 
             yourSubmitFunction(clicked_btn); 
             return false; 
        });
    }
</script>

Answer 2

您有三个具有相同s 的submit按钮。但是 s 必须是唯一的。这就是原因，jquery 只选择第一个按钮，无论单击哪个按钮。如果要使用单击按钮发送请求，请将函数绑定到单击事件idfinalize_invoiceidbutton

$('form#submit input[type="submit"]').click(function() {
    ...
    var finalize_invoice = $(this).attr('value');
    $.ajax(...);
    ...
    return false;
}

正如@thaJeztah 建议的那样，抑制提交事件form

$('form#submit').submit(function() {
    return false;
});