modal confirmation - form not submitted if ok is clicked

Question

I have the multiply forms (automatically generated) on the page. I am asking the user to confirm record deletion. If user click on no, modal dialog is closed and nothing happen, however if he click on yes button, nothing happen again. Anyone can help?

Here is the code:

 <input type="submit" value="Click me" class="button" />

 <div id="modal">
<div id="heading">
    Record will be deleted! Please Confirm.
</div>

<div id="content">
    <p>Record will be deleted! This operation can't be undone. <br />Are you sure?</p>

    <input type="button" onclick="return true;" class="button green close" value="Yes"></button>
    <input type="button" onclick="return false;" class="button red close" value="No"></button>

</div>

$('.oneUser').on('submit',function(e){
    $('#modal').reveal({ 
        animation: 'fade',                   
        animationspeed: 600,                       
        closeonbackgroundclick: true,           
        dismissmodalclass: 'close'    
    });
    return false;
});

My guess it has something to do with the submit function returning false. That's usually a good way of preventing a form from submitting. — Nicodemeus, Sep 11 '12 at 22:45
Hi Nick. After removing reutrn false, no matter which button has been pressed, either false or true, form is submitted silentrly, modal dialog is not even fired. — Zoran, Sep 11 '12 at 23:21
Updated my response then saw your comment on the answer below. Could you elaborate on the structure of the page, specifically the taxonomy of the <form/> elements and the children? — Nicodemeus, Sep 11 '12 at 23:41
it would be great if we could meet on chat, since is quite complicated. page is created with codeigniter, and display users table, where the users are displayed. form is created for each user, so it can be edited or deleted. — Zoran, Sep 12 '12 at 00:04

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

Updated, now with a A fiddle!

Updated markup

<form>
    <input type="submit" value="Click me" class="button" id="submitButton" />
</form>

Dialog markup removed.
Included form markup.

Updated script

var confirmDelete = $('<div></div>')
    .html('Record will be deleted! This operation can\'t be undone. <br />Are you sure?')
    .dialog({
        autoOpen: false,
        title: 'Record will be deleted! Please Confirm.',
        buttons: {"Yes": function() { 
                      $(this).dialog("close"); 
                      $('form').submit();
                 }, "No": function() {
                      $(this).dialog("close");
                 }
        }
    });  
$('#submitButton').on('click', function(e){
    e.preventDefault();
    $(confirmDelete).dialog('open');
});

Uses the button's click event rather than the form's submit event.
Implements the dialog like this guy did it.
Yes and No options will close the dialog and clicking 'yes' will also invoke $('form').submit();.

edited May 23 '17 at 11:59

Community

1
1

answered Sep 11 '12 at 22:51

Nicodemeus

4,005
20
23

Nope, commenting return false, form is submitted without modal dialog to be displayed. It just silently delete the record. – Zoran Sep 11 '12 at 22:53
Nick, after adding your code, form is submitted silently, and delete the record without invoking the dialog. I added :submit#submitButton, but without any result. – Zoran Sep 11 '12 at 23:52
console.log show the following error:Uncaught TypeError: Object [object Object] has no method 'dialog' – Zoran Sep 11 '12 at 23:54
#submitButton references a control with the ID of 'submitButton', so you should update that with a selector appropriate for your application. Regarding the console.log error, create a fiddle to reproduce the problem you are experiencing. – Nicodemeus Sep 12 '12 at 00:08
I will try now to create a fiddle, even I have no idea how to do it. After i copied the code agin, I am seeing no error now. Once after I close the console in chrome, clicking on the button, I see the dialog. But after I refresh the page coupole of times , form is submitted silently again. – Zoran Sep 12 '12 at 00:15
The error "Uncaught TypeError: Object [object Object] has no method 'dialog'" is occurring because you need to enable jQuery UI in jsfiddle. In the left-hand side of the screen, check 'jQuery UI 1.8.18", then click "run". – Nicodemeus Sep 12 '12 at 00:33
Crazy things are going on... It works some times some times no. Strange enough, when I click yes, instead of submitting the form, I get redirected here:/index.php?uid=1&page=search_page – Zoran Sep 12 '12 at 00:41
Any idea why I am getting this on fiddle when I click yes button? {"error": "Please use POST request"} – Zoran Sep 12 '12 at 00:43
In the fiddle I posted, I noticed the server was returning the error "Please use POST request" after the script successfully posted. – Nicodemeus Sep 12 '12 at 00:46
I just check that, my form do have method=post in the code. Have no idea why it show that. Also ,I can't explaing why dalog suddenly start to work, and suddenly stops working...I will restart my computer and clear my browser cache to see what is going on...I will be back in 5 min – Zoran Sep 12 '12 at 00:52
I really can't explain this. It works tottaly random. I will see what I can do. Thanks for your help. Cheers. – Zoran Sep 12 '12 at 01:00

modal confirmation - form not submitted if ok is clicked

1 Answers1