Question posted in
You can find the official documentation here.

submit a form using ajax and jquery-confirm.js – Jquery ajax

The Ajax call is working without using the alert confirmation. but when I added the alert confirmation the ajax call didn’t respond and I don’t know where is the problem.

<link rel="stylesheet" href="jquery-confirm.min.css">
<script src="jquery-confirm.min.js"></script>
<form id="add-offer">
  <input type="number" name="offer" class="form-control price_offered" value="" step="any">
  <button class="btn btn-primary" type="submit"> Add offer   </button>
</form>

$("#add-offer").on('submit', function(e) {
  e.preventDefault();

  $.alert({
    title: 'Confirmation ',
    content: ' Are you sure.... bla bla bla? ',
    rtl: true,
    closeIcon: true,
    buttons: {
      confirm: {
        text: 'Confirm ',
        btnClass: 'btn-blue',
        action: function() {
          $.ajax({
            type: 'POST',
            url: 'ajax/add-offer.php',
            data: new FormData(this),
            dataType: 'json',
            contentType: false,
            cache: false,
            processData: false,
            beforeSend: function() {},
            success: function(response) {
              console.log(response);
              if (response.success == 1) {
                alert(response.message);
              } else {
                alert(response.message);
              }
            }
          });
        }
      },
      cancel: {
        text: 'Cancel ',
        action: function() {}
      }
    }
  });
});
Tags:

2

Answers


  1. 0

    Replace $.alert({ with alert({

    See jsfiddle.net/msteel9999/eyk0q37d/3

    Login or Signup to reply.
  2. 0

    This might be an issue with the function block context. You can set the data variable to get the e.target as the Form Data parameter and try. Check the code below:

    $("#add-offer").on('submit', function(e) {
  e.preventDefault();
  
  $.alert({
    title: 'Confirmation ',
    content: ' Are you sure.... bla bla bla? ',
    rtl: true,
    closeIcon: true,
    buttons: {
      confirm: {
        text: 'Confirm ',
        btnClass: 'btn-blue',
        action: function() {
          $.ajax({
            type: 'POST',
            url: 'ajax/add-offer.php',
            data: new FormData(e.target),
            dataType: 'json',
            contentType: false,
            cache: false,
            processData: false,
            beforeSend: function() {},
            success: function(response) {
              console.log(response);
              if (response.success == 1) {
                alert(response.message);
              } else {
                alert(response.message);
              }
            }
          });
        }
      },
      cancel: {
        text: 'Cancel ',
        action: function() {}
      }
    }
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>

<link rel="stylesheet" href="jquery-confirm.min.css">
<script src="jquery-confirm.min.js"></script>
<form id="add-offer">
  <input type="number" name="offer" class="form-control price_offered" value="" step="any">
  <button class="btn btn-primary" type="submit"> Add offer   </button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search