Resubmit form after an ajax request is made to a url different from the form url

Question

Below is a part code from a project I'm working on. I want to save the form data by an ajax call to a url /accounts/edit_profile/ (different from the form action url /orders/place_order/). After a successful call to url /accounts/edit_profile/, form should resubmit to orders/place_order/ but no such resubmission takes place and I have to manually click the button (place_order) for final submission of form.

<form id="form_check" action="/orders/place_order/" method="POST" enctype="multipart/form-data">
  <div class="form-row">
    <div class="col form-group">
      <label for="">Address line 1</label>
      <input type="text" name="address_line_1" class="form-control"  required>
    </div>
    <div class="col form-group">
      <label for="">Address line 2</label>
      <input type="text" name="address_line_2" class="form-control" >
    </div>
  </div>
  <div class="form-row">
    <div class="col form-group">
      <label for="">City</label>
      <input type="text" name="city" class="form-control"  required>
    </div>
    <div class="col form-group">
      <label for="">State</label>
      <input type="text" name="state" class="form-control"  required>
    </div>
  </div>
  <div class="form-row">
    <div class="col form-group">
      <label for="">Pincode</label>
      <input type="text" pattern="[0-9]{6}" name="pincode" class="form-control"  required>
    </div>
    <div class="col form-group">
      <label for="">Country</label>
      <input type="text" name="country" class="form-control"  required>
    </div>
  </div>
  <button id="btnsubmit" type="submit" name="submit" class="btn btn-primary btn-block">Place Order</button>
</form>

The script I'm using is:

var frm = $('#form_check');
frm.submit(function() {
  var r = confirm("Would you like to save this address as default address?");
  if (r == true) {
    $.ajax({
      type: frm.attr('method'),
      url: '/accounts/edit_profile/',
      data: frm.serialize(),
      success: function (data) {
        frm.submit();
      }
    });
  } else {
    // user did not agree, do something else
  }
  return false;
});

Tried Soultions from these links but nothing seems to work:

Use `frm[0].submit()`. By using the jQuery object you're just calling your submit handler again. — Barmar, Apr 19 '23 at 18:48
See the linked question for the recommended solutions (except the ones that suggest `async: false`, which is deprecated). — Barmar, Apr 20 '23 at 16:37
I've reopened, you can post the solution below. Or maybe you should post it in one of the other questions, if those solutions don't work. — Barmar, Apr 21 '23 at 16:15
I have updated the form code above by adding a new `id='btnsubmit'` in submit button of form. Inside ajax success code, I added `frm.off('submit');` and then `$('#btnsubmit').click();` — Niiteesh, Apr 21 '23 at 16:26
Here's the solution. Inside the jquery ajax success function, update this code `success: function (data) { frm.off('submit'); $('#btnsubmit').click(); }` — Niiteesh, Apr 21 '23 at 16:31
`frm.submit();` will go through the whole process by asking the question again and will not submit the form finally. This is the problem I was facing — Niiteesh, Apr 21 '23 at 16:35
You're right. I checked it again and it worked. Thanks for commenting — Niiteesh, Apr 21 '23 at 16:44

Resubmit form after an ajax request is made to a url different from the form url

0 Answers0