用jquery-ajax在表單內提交帶有兩個不同提交按鈕的表單

Question

我在這里尋找了很多答案，但無法解決。 我試圖用兩個不同的提交按鈕在表單中提交表單，但是結果就像是為表單請求方法和操作一樣。 雖然我已經使用e.preventDefault（）來防止默認表單提交。 謝謝

這是我的表格

<form class='detail-button'>
    <input type='hidden' id='sell_id' value='$pro_id' />
    <input type='hidden' id='sell_name' value='$pro_name' />
    <input type='hidden' id='sell_vd' value='$vendor' />
    <input type='submit' id='sell_add' class='btn' value='ADD TO CART'/>
    <input type='submit' id='sell_buy' value='BUY NOW'/>
</form>

這是使用的腳本

$(document).ready(function() {
    $('#sell_add').on('click', function(event) {
        event.preventDefault();
        var id = $("#sell_id").val();
        var name = $("#sell_name").val();
        var vendor = $("#sell_vd").val();
        $.ajax({
            type: "POST",
            url: "add_to_cart.php",
            data: 'id=' + id + '&name=' + name + '&vendor=' + vendor + '&click=cart',
            beforeSend: function() {
                $("#add_status").hide();
            },
            success: function(data) {
                var result = jQuery.parseJSON(data);
                $("#add_status").show();
                $("#add_status").html(result.stat);
                $(".cartqty").html(result.qty);
            }
        });
    });
});

$(document).ready(function() {
    $('#sell_buy').on('click', function(event) {
        event.preventDefault();
        var id = $("#sell_id").val();
        var name = $("#sell_name").val();
        var vendor = $("#sell_vd").val();
        $.ajax({
            type: "POST",
            url: "add_to_cart.php",
            data: 'id=' + id + '&name=' + name + '&vendor=' + vendor + '&click=buy',
            success: function(data) {
                window.location.href = data;
            }
        });
    });
});

Answer 1

更改您的提交按鈕類型。 這將起作用，因為您已使用其ID在按鈕點擊上設置了事件。

<input type='button' id='sell_add' class='btn' value='ADD TO CART'/>
<input type='button' id='sell_buy' value='BUY NOW'/>

並通過JS提交

$(".detail-button").submit();

Answer 2

請使用： detail-button是您的表格類

$('.detail-button').on('submit',function(event){ // Write Your AJAX Code Here }

Answer 3

您可以使用以下腳本：

$('#sell_add, #sell_buy').on('click', function(event) {
    event.preventDefault();
    var id = $("#sell_id").val();
    var name = $("#sell_name").val();
    var vendor = $("#sell_vd").val();
    var click = this.id == "sell_add" ? "cart" : "buy"; // <---check if clicked button is "sell_add"
    $.ajax({
        type: "POST",
        url: "add_to_cart.php",
        context:this,  // <----------add context to get the clicked button
        data: 'id=' + id + '&name=' + name + '&vendor=' + vendor + '&click='+click ,
        beforeSend: function() {
            $("#add_status").hide();
        },
        success: function(data) {
            if(this.id == "sell_id"){ // <--------------execute for sell_add
                var result = jQuery.parseJSON(data);
                $("#add_status").show();
                $("#add_status").html(result.stat);
                $(".cartqty").html(result.qty);
            } else {  // <----------execute for buy.
                window.location.href = data;
            }
        }
    });
});

或更好的方法是使用data-*屬性存儲特定信息：

<input type='submit' data-click='cart' id='sell_add' class='btn' value='ADD TO CART'/>
<input type='submit' data-click='buy' id='sell_buy' value='BUY NOW'/>

在下面使用此腳本：

$('#sell_add, #sell_buy').on('click', function(event) {
    event.preventDefault();
    var id = $("#sell_id").val();
    var name = $("#sell_name").val();
    var vendor = $("#sell_vd").val();
    var click = $(this).data('click'); //<------get the data-click here
    $.ajax({
        type: "POST",
        url: "add_to_cart.php",
        data: 'id=' + id + '&name=' + name + '&vendor=' + vendor + '&click='+click,
        beforeSend: function() {
            $("#add_status").hide();
        },
        success: function(data) {
            if(click  == "cart"){ // <--------------execute for data-click="cart"
                var result = jQuery.parseJSON(data);
                $("#add_status").show();
                $("#add_status").html(result.stat);
                $(".cartqty").html(result.qty);
            } else {  // <----------execute for data-click="buy".
                window.location.href = data;
            }
        }
    });
});

Answer 4

我建議使用Submit事件提交表單，並使用click事件添加到購物車。 此外，將“添加到購物車”的提交類型更改為按鈕

Answer 5

請參閱我在此處添加的更新代碼。 通常e.preventDefault（）可以工作，但是如果您在事件結束時添加了false，那么它將大有幫助。

查看代碼段可能會幫助您

 $(document).ready(function() { $(document).on("click","#sell_add",function(event) { event.preventDefault(); var id = $("#sell_id").val(); var name = $("#sell_name").val(); var vendor = $("#sell_vd").val(); $.ajax({ type: "POST", url: "add_to_cart.php", data: 'id=' + id + '&name=' + name + '&vendor=' + vendor + '&click=cart', beforeSend: function() { $("#add_status").hide(); }, success: function(data) { var result = jQuery.parseJSON(data); $("#add_status").show(); $("#add_status").html(result.stat); $(".cartqty").html(result.qty); } }); return false; }); $(document).on("click","#sell_buy",function(event) { event.preventDefault(); var id = $("#sell_id").val(); var name = $("#sell_name").val(); var vendor = $("#sell_vd").val(); $.ajax({ type: "POST", url: "add_to_cart.php", data: 'id=' + id + '&name=' + name + '&vendor=' + vendor + '&click=buy', success: function(data) { window.location.href = data; } }); return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class='detail-button'> <input type='hidden' id='sell_id' value='$pro_id' /> <input type='hidden' id='sell_name' value='$pro_name' /> <input type='hidden' id='sell_vd' value='$vendor' /> <input type='submit' id='sell_add' class='btn' value='ADD TO CART' /> <input type='submit' id='sell_buy' value='BUY NOW' /> </form>