Issue with AJAX form submit

Asked by At

Required the form to be submitted via an ajax call and you will intercept the result and update your page. You never leave the index page.

I'm having trouble having the ajax call working

        <form action="/cart" method="post" id="addProduct">
            Quantity: <input type="number" name="quantity">
            <button type="submit">Add to Cart</button>
            <input type="hidden" name="productid" value="{{id}}">
            <input type="hidden" name="update" value="0">
        </form>





         var form = $('#addProduct');
            form.submit(function(e){
               e.preventDefault();
                 $.ajax({
                     type: "POST",
                     url: "/cart",
                     data: form,
                     dataType: "json",
                 success: function(e) {
                     window.location.href = "/";
               }
            });
         })

4 Answers

1
Community On

you can use

JavaScript

new FormData(document.querySelector('form'))

form-serialize (https://code.google.com/archive/p/form-serialize/)

serialize(document.forms[0]);

jQuery

$("form").serializeArray()
0
Rohit2409 On

You are changing the whole meaning of the ajax call. Ajax call is used for updating something without page refresh. In your case on success, you are changing the URL which is not right. Remove window.location.href = "/"; from your code and try to append messages or alert something like alert('Product is added to cart');

0
hacker On

To update your document after success you can use append(e) to update your DOM

<form  method="post" id="addProduct">
            Quantity: <input type="number" name="quantity">
            <button type="submit">Add to Cart</button>
            <input type="hidden" name="productid" value="2">
            <input type="hidden" name="update" value="0">
        </form>

    <div id="display">

    </div>



    $(function(){

            $("#addProduct").submit(function(e){
                e.preventDefault();
           var quantity = $(this).children("input[name=quantity]").val();
           var productid = $(this).children("input[name=productid]").val();
           var update = $(this).children("input[name=update]").val();
               $.ajax({
                  type:"post",
                  url:"/cart.php",
                  data:{update:update,quantity:quantity,productid:productid},
                  success: function(feedback){
                      $("#display").html(feedback);
                  },
                  error: function(err){
                    alert("error");
                  }
               });

            });
    });

I update my answer and i use the div with id display to show my data return from ajax success

1
Alok Mali On

Your ajax call is not sending data to the server. Use formdata object or serialize() to get form input values then send it to the server.

Use

var form = new FormData($('#addProduct')[0]); 

OR

var form =  $("'#addProduct").serialize(); 

Instead of

var form = $('#addProduct');

And on success, send response from server and update your DOM in success function. Don't use window.location.href = "/";