Is there a way to submit a form that's loaded from a separate page via ajax within the same window?

Question

I have this form:

<form method="post" action="/cart" id="ajax">
  {...}
  <div>
  {{ product.option | hidden_option_input }}
  </div>
  <button name="submit" type="submit" title="add to cart">Add to Cart</button>
</form>

The form is being loaded to the page via ajax, and its action page also preloaded via ajax in a different link in the navbar. I'd like to submit the form but prevent it from opening a new page when submitted. How can I go about this? I've tried:

<a href="/cart" class="new_popup mfp-ajax" onclick="this.parentNode.submit();return false;">Add to Cart</a>

to replace the button, but even though I've attempted to negate the default behavior with "return false;" it still reloads a new page on click. I can see the linked popup window just before the new page load, but it does not submit until the new page appears. I believe it's because the form is being loaded via ajax when a user clicks the link to it, therefore I cannot attach a script to it specifically because until it's on screen, it does not technically exist.

It's a little unclear on what you're expecting. You have a submit button, but then you also have this anchor that's also submitting. You can attach event handlers to as-yet-non-existent elements via delegation; see [Event binding on dynamically created elements?](https://stackoverflow.com/q/203198/215552). — Heretic Monkey, Sep 21 '20 at 20:37
I'm actually attempting that now via something similar to [this post](https://stackoverflow.com/questions/9234166/submit-a-form-from-a-loaded-page). I'm using a plugin which needs me to utilize the tags to delegate where the new page to load is in the file, that may be why it's a bit confusing. Plugin is [Magnific Popup](https://dimsemenov.com/plugins/magnific-popup/) — William Greer, Sep 21 '20 at 20:47
It was just the form opening a new page on submit. I found a way to utilize [jQuery Form](https://jquery-form.github.io/form/) to submit it by delegating a click event to the submit link like so: `$(document).on('click', '.new_popup', function (){$('form').ajaxSubmit();return false;});` — William Greer, Sep 21 '20 at 21:18

Booboo · Accepted Answer · 2020-09-21T21:07:27.073

If I understand your question, you would like to just update a portion of the current page. If so, you will have to use AJAX for this:

Keep the "submit" button but make it a standard button and give it an id such as "submit":

<button id="submit" name="submit" title="add to cart">Add to Cart</button>

Then your JavaScript would handle the click event on the button as follows:

$(function() {
    let submit = $('#submit');
    submit.click( function() { //
        submit.prop('disabled', true); // prevent a re-submission
        var form = $('#ajax');
        var request = $.ajax({
            url: form.attr('action'), // get the action from the form
            type: form.attr('method'), // get the method from the from
            dataType: 'html', // the assumption is that we are dealing HTML here
            data: form.serialize()
        });

        request.done(function(ajaxResult) {
            // update the DOM with the results
            $('#some_div').html(ajaxResult); // replace contents of <div id="some_div"></div> with new html
            submit.prop('disabled', false); // re-enable the submit
        });

    });
});

You have to arrange for the results sent back to be just the HTML that is required to be updated.

Update

Since responding, you have added a comment with a link that suggests I may have misunderstood your intent. The phrase you used, "submit the form but prevent it from opening a new page when submitted" definitely can lead one to my original interpretation.

It's definitely my fault for phrasing it poorly, this still helped a lot though. I have a function working as intended now but I'll need to still process a request when the popup is closed and (I assume) I'll need your methods in order to do this — William Greer, Sep 21 '20 at 21:13

Is there a way to submit a form that's loaded from a separate page via ajax within the same window?

1 Answers1