使用Ajax提交表单而不离开当前页面

时间:2018-06-21 18:23:29

标签: jquery ajax forms

我正在尝试提交Ajax表单,以防止该页面转到另一个页面。我正在使用的脚本仍会转到其他页面,即手推车1.php。目标是将数据发送到手推车1.php,在该处进行处理,但客户留在产品页面上。该脚本运行得很好,但是转到了travel1.php页面

 <script>
 $(document).ready(function(){
 $('form').submit(function(event){
 event.preventDefault();

 var formData = {
        var id = $('input[name=id]').val(),
        var name = $('input[name=name]').val(),
        var price = $('input[name=price]').val(),
        var quantity = $('input[name=quantity]').val()
    };

 $.ajax({
        type        : 'POST', 
        url         : 'trolley1.php', 
        data        : formData, 
        dataType    : 'json', 
        encode      : true
      });
  });
});

</script>

<?php
echo "
  <div class='col-sm-3 mt-5'>
    <form class='ajax' method='post' action='trolley1.php?action=add&id=$id'>
      <div class='products'>
          <a>$img</a>
          <input type='hidden' name='id' value='$id'/>
          <input type='hidden' name='name' value='$product'/>
          <input type='hidden' name='price' value='$price'/>
          <input type='text' name='quantity' class='form-control' value='1'/>
          <input type='submit' name='submit' style='margin-top:5px;' class='btn btn-info'
                 value='Add to Cart'/>      
      </div>
    </form>
  </div>

1 个答案:

答案 0 :(得分:0)

查看关于OP的评论:

var formData = {
    id: $('input[name=id]').val(),
    name: $('input[name=name]').val(),
    price: $('input[name=price]').val(),
    quantity: $('input[name=quantity]').val()
};