CODEWITHSUNDEEP
javascriptjqueryhtmlajax
SnakeDoc
SnakeDoc

Reputation: 14451

Submit a form from ajax returned html

I'm attempting to submit a form that's embedded in the HTML response of an AJAX request, but can't seem to get the form to actually submit.

I have something like:

    // get the cart page
    jQuery.ajax({
        type: "GET",
        url: "cart.asp"

    }).success(function(cartHTML) {

        // build dom tree, and make it parsable
        var parser = new DOMParser();
        var doc = parser.parseFromString(cartHTML, "text/html");

        // set sku qty to zero and resubmit form which recalculates totals
        doc.getElementById('someProduct').value = 0;

        // this does not work, yet returns no error
        // the form does indeed exist in `doc`
        doc.forms['recalculate'].submit();

        // now get the checkout page again
        jQuery.ajax({
            type: "GET",
            url: "checkout.asp"

        }).success(function(checkoutHTML) {

            // fetches and replaces totals with updated values, etc.
            updateCheckoutPageTotals(checkoutHTML); // this works, used in other places
        });
    });

The above script runs without error, but the returned values from the second ajax request do not change from before. The expected result is to remove a particular product from the cart, and therefore return updated totals, without this product.

I've verified the returned cartHTML variable does indeed contain the cart's HTML page, and doc.getElementById('someProduct').value = 0; does set the form value to zero for that input element.

I've also replicated the above script in Chrome Dev Tools, assigning the ajax response data to a global variable and parsing it into a document tree, and attempted to submit the form this way without success either. Simply executing doc.forms['recalculate']; on the console does return the correct form, with the value of someProduct set correctly to zero.

Performing the above action without ajax directly on the cart.asp page and then submitting the form via javascript does indeed work - and I thought I could emulate that via ajax from the checkout page to make things easier for the customer, but submitting the form as I've done above, has no effect it seems.

Am I doing something wrong?

Upvotes: 2

Views: 1549

Answers (1)

adeneo
adeneo

Reputation: 318372

Using the DOMParser you get a whole new document that only exists in memory, and you can't really trigger events or do much else with it.

A form that is to be submitted, must be added to the DOM, i.e. the current document, so the browser can redirect and send the data on submit

Seems like you don't won't to reload the page, but use ajax for the form instead

// get the cart page
jQuery.ajax({
  type: "GET",
  url: "cart.asp"
}).done(function(cartHTML) {
  var html = $(cartHTML);

  // set sku qty to zero and resubmit form which recalculates totals
  html.find('#someProduct').val("0");

  var form = html.find('name="recalculate"]');

  jQuery.ajax({
    type : "GET",
    url  : form.attr('action'),
    type : form.attr('method'),
    data : form.serialize()
  }).done(function() {
        // form submitted  
    jQuery.ajax({
            type: "GET",
      url: "checkout.asp"
    }).done(function(checkoutHTML) {
        updateCheckoutPageTotals(checkoutHTML);
    });
  })
});

Upvotes: 1

Related Questions