CakePHP Javascript Confirm dialog Form Submission

Question

With my CakePHP's registration form, once clicking Submit button, I simply want to display Javascript Confirm dialog box, which should work like:

• If pressed Ok, should submit the form
• If pressed Cancel, should not go for submit action

But here, when i press Cancel, though it gets submitted. Don't know why?

CakePHP Form Code:

<?php echo $form->create('Noncompetitor', array('type' => 'file', 'url' => '/register', 'onSubmit' => 'confirmfrmSubmit();'));?> 

My JS Code:

function confirmfrmSubmit(){

    var agree=confirm("Are you sure you wish to continue?");

    if (agree)
        return true ;
    else
        return false ;
}

Please let me know, if you fellows have some idea on it.

Thanks !

Answer 1

A simpler method can also be used, Try this:

$this->Form->create('Request',array('onsubmit'=>'return confirm("are you sure?");'))

Answer 2

You were actually 99% of the way there in the beginning .. you just needed to add 'return' before your call to the validation function.

<?php echo $form->create('Noncompetitor', array(
       'type' => 'file', 
       'url' => '/register', 
       'onSubmit' => 'return confirmfrmSubmit();'));
?>

Will do it.

Answer 3

There is the following step:-

- include this jquery file-

echo $this->Html->css('/css/jquery-confirm.min.css', ['block' => 'css']);

Create submit button

<?= $this->Form->button('<i class="fa fa-check"></i><span class="hidden-xs"> ' . __('Save') . '</span>', ['type' => 'submit', 'escape' => false, 'id' => 'submit_form_id', 'class' => 'btn green', 'title' => 'Save']); ?>



$('body').on('click', '#submit_form_id', function (e) {
            e.preventDefault();
                  var submitFormVar=1;
            if (submitFormVar!= 0) {
                $.confirm({
                    title: '',
                    content: 'Do you want to stop submit form' ,
                    buttons: {
                        ok: function () {
                            $(form).submit();
                        },
                        cancel: function (o) {
                            return o;
                        }
                    }
                });
            } else {
                $(form).submit();
            }
        });

Jquery code

• if you want to submit the form then the value is 0
• if you want to not submit the form then the value is 1
• implement as your requirement logic

Answer 4

Update: Credit to bicycle for fixing my broken callback. See below for details. (And a big raspberry to StackO for not allowing the answer author to have the final say on accepting an edit.)

---

Here's a solution using jQuery:

<?php
    $this->Html->scriptBlock("
        jQuery(function($){
            $('form.noncompetitor').submit(function(event){
                if (!confirm('Are you sure?')) { return false; }
            });
        });
    ",array('inline'=>false)); // inline => false will put this snippet in the DOM's head.

    echo $this->Form->create('Noncompetitor',array(
        'type'=>'file','url'=>'/register',
        'default'=>false,'class'=>'noncompetitor'
    ));

    /* The rest of your form */

Answer 5

I found a very simple solution to this query:

<?php echo $form->create('ModelName', array('type' => 'file', 'url' => 'url', 'name' => 'frmRegister', 'onsubmit' => 'validatefrm(); return false;')); ?>

With onsubmit function, I simply defined 'validatefrm(); return false;'

function validatefrm(){ // my condition, when i needs it to submitted document.frmRegister.submit(); return true; }

and found it working smooch :)

Let me know, if it helps you.

Answer 6

I think your function is failing because you are never actually returning the value from confirmfrmSubmit().

Try adding the return part to the onSubmit field, like so:

<?php echo $form->create('Noncompetitor', array('type' => 'file', 'url' => '/register', 'onSubmit' => 'return confirmfrmSubmit();'));?>

Your JS code should work as it is, the problem is just that the confirm value is never being passed to the form when the onSubmit handler is called.

P.S. note that you can do the following in the JS code:

return confirm("Text");

Hope this helps.