Reputation: 1606

Two AJAX form submissions, one not working

I am using ajax from to allow me to submit two forms.

I have an add to cart, and an update cart form, both on the same page.

I am using the following code to trigger the add to cart or update cart submission.

$('#cart-container').on('submit','form',function() {
    $(this).ajaxSubmit({
        success: cart
    }); 
    return false; 
});

function cart() {
    var path = '/enter/embed-cart';
    $('#cart-container').fadeTo('fast', 0.5).load(path, function() {
        $('#cart-container').fadeTo('fast', 1);
    }); 
}

I have tested both forms with my ajax disabled, and they work perfectly, so I know the forms are working correctly.

With the script, the add to cart form is working correctly, but the update form doesnt submit. The strange thing is that the function cart() is running, but when the load() is complete the form has not been updated. I am wondering if have two forms inside the div #cart-container is meaning its only targeting the first (add to cart form), but why would it still run the submission for the update form?

Can anyone see why this would happen?

Here is the stripped down HTML. The forms wont make much sense as they are from a CMS.

<div id="cart-container" class="divide clearfix">
    <div id="purchase-submissions" class="grid col-12 bp2-col-6">

        <form method="post" action="/enter"  >
            <input type="submit" value="Add" class="cart-btn add-item">
        </form>

    </div> <!-- End of .grid -->

    <div id="cart" class="grid col-12 bp2-col-6">

        <form method="post" action="/enter"  >

            Update form details

        </form> 

    </div> <!-- End of .grid -->

</div> <!-- End of #cart-container-->

Thank you

Upvotes: 0

Answers (3)

Judson Terrell

Reputation: 4306

The reason why the form is getting updated on a normal submit is because you are refreshing the content on the page(the form) you need to put the form in a div and post it from within that div then refresh that div to see the same result. While ajaxForm submits the content behind the scenes, it does not "update" the form for you. For this to happen, I would put the form and the script in a page, call it into the container div and let the submission happen within that div and refresh the div after. Look into ajaxForm "target" method.

From Malsup site:

// prepare the form when the DOM is ready $(document).ready(function() { var options = { target: '#output2', // target element(s) to be updated with server response beforeSubmit: showRequest, // pre-submit callback success: showResponse // post-submit callback

    // other available options: 
    //url:       url         // override for form's 'action' attribute 
    //type:      type        // 'get' or 'post', override for form's 'method' attribute 
    //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
    //clearForm: true        // clear all form fields after successful submit 
    //resetForm: true        // reset the form after successful submit 

    // $.ajax options can be used here too, for example: 
    //timeout:   3000 
}; 

// bind to the form's submit event 
$('#myForm2').submit(function() { 
    // inside event callbacks 'this' is the DOM element so we first 
    // wrap it in a jQuery object and then invoke ajaxSubmit 
    $(this).ajaxSubmit(options); 

    // !!! Important !!! 
    // always return false to prevent standard browser submit and page navigation 
    return false; 
});

});

If you need me to create an actual example let me know.

Upvotes: 1

Judson Terrell

Reputation: 4306

you need to have ids on the forms and I would have a separate jquery call for each one basic on their respective I'd. You are trying to submit a div.

You could also try calling '#cart-container form' since the submit needs to be bound to the form.

Upvotes: 0