CODEWITHSUNDEEP
phpjqueryformsdialog
Amran
Amran

Reputation: 69

form submission using jquery.confirm

There are many example how to submit form after clicking ok button on confirm dialog but I can't make it work.

<form class="myform" method="post" 
                     action="<?php echo Configure::read('Settings.MYURL'); ?>">
  <input type="hidden" name="type" value="bdt" />
  <input type="hidden" name="data" value="<?php echo $session['Session']['id']; ?>" />
  <input type="hidden" name="id" value="<?php echo $subscriber_id; ?>" />
  <input type="hidden" name="p_id" value="<?php echo $available_packages['Package']['id']; ?>"/> 
  <input type="hidden" name="ext_id" value="<?php echo $available_exten_pack['id']; ?>"/> 
  <input type="hidden" name="redirected_from" value ="<?php echo $this->request->here; ?>" />
  <input id = "loginurl"  type="hidden" name="loginurl" value="<?php echo Router::fullBaseUrl() . Router::url(array('controller' => 'Home', 'action' => 'login')); ?>" /> 
  <input class="btn btn-sm btn-primary pull-right extendpackage"  type="submit"  name="submit" value="Subscribe">
</form>

I am using jquery-confirm.js for dialog, alert, etc. If user click the submit button or submit the form

$.confirm({
    columnClass: 'col-md-4 col-md-offset-4',
    theme: 'white',
    title: 'Add',
    content: 'do stuff',
    confirmButton: 'Ok',
    cancelButton: 'Cancel',
    confirmButtonClass: 'btn-success',
    cancelButtonClass: 'btn-danger',
    confirm: function() {
        // i want user submit my form
        //which posts my data to an action 
        //
    },
    cancel: function() {

    }
});

I have tried $('.myform').submit() but it is not working

Upvotes: 2

Views: 7936

Answers (1)

Ganesh Kumar
Ganesh Kumar

Reputation: 3240

The jquery.confirm.js does not invoke the confirm dialog without associating with the button or form. So, you need to associate confirm action with the submit button. You can also show the confirm dialog on form submit.

To associate confirm action with the button, you can do:

$('input[type=submit]').confirm({
    columnClass: 'col-md-4 col-md-offset-4',
    theme: 'white',
    title: 'Add',
    content: 'do stuff',
    confirmButton: 'Ok',
    cancelButton: 'Cancel',
    confirmButtonClass: 'btn-success',
    cancelButtonClass: 'btn-danger',
    confirm: function() {
      //Submit the form
      $('.myform').submit();
    },
    cancel: function() {
      //Do nothing
    }
  });

This code will show the confirmation dialog on click of submit button.

Here is the demo

Update: How to include confirm dialog code in form.submit() function?

If you include the confirm dialog show up code in form.submit function like this, you will find that the confirmation dialog is not appearing:

$('form').submit(function(event) {

   $.confirm({
        //confirm dialog options...
        confirm: function() {
        //Submit the form
        },
        cancel: function() {
        //Cancel submission
        event.preventDefault();
        }
    });
});

The reason for this is that when you invoke $.confirm() function, it shows up the confirmation dialog, and after that it will submit the form. The submission hides the dialog. Essentially, the dialog does not stop the execution of UI thread when it is visible in contrast to alert dialog -alert('Alert').

To resolve this, the form submission should be cancelled before showing up the confirmation dialog. Now, on confirmation you can submit the form. There is nothing to do on cancelling the form.

Here is how you can do this:

$('form').submit(function(event) {
    event.preventDefault();
    var form = $(this)[0];

    $.confirm({
      columnClass: 'col-md-4 col-md-offset-4',
      theme: 'white',
      title: 'Add',
      content: 'do stuff',
      confirmButton: 'Ok',
      cancelButton: 'Cancel',
      confirmButtonClass: 'btn-success',
      cancelButtonClass: 'btn-danger',
      confirm: function() {
        //Submit the form
        form.submit();
      },
      cancel: function() {
        //Do nothing
      }
    });
  });

Upvotes: 5

Related Questions