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事件提交表单和点击事件以添加到购物车。此外，将“添加到购物车”的提交类型更改为按钮

Answer 5

请参阅我在此处添加的更新代码。通常e.preventDefault（）工作，但如果你在事件结束时添加了返回false，那么它会有很大帮助。

请参阅代码段可能会对您有所帮助

＆＃13;

$(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;
  });
});

＆＃13;

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

＆＃13;

通过jquery-ajax在表单中提交带有两个不同提交按钮的表单

5 个答案: