4

I have spent 5 hours on this and cannot get this to work. I just want to submit a form and have it ask to confirm delete with a jquery ui popup and when it is confirmed it proceeds to the form submit and goes to delete.php.

I have stripped this down for simplicity:

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#formDelete').submit(function(e){
        e.preventDefault();
        $('#dialog').dialog('open');
    });
    $('#dialog').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
            "Confirm": function() {
                $('#formDelete').submit();  
            },
            "Cancel": function() {
                $(this).dialog("close");
            }
    }
});    
});
</script>
</head>
<body>
<div id="dialog">
<p>Are you sure you want to delete?</p> 
</div>
<form id="formDelete" name="formDelete" action="delete.php" method="POST" >
    <input name="id" type="hidden" value="1">
    <input name="submit" type="submit">
</form>
</body>
</html>

I click the Yes button and nothing happens. I have tried changing submit id to the same as the form but read that just loops everything.

0

1 Answer 1

8

I cannot eloquently state the reason, but I find it vague though, that if you use it like this:

<input name="submit" type="submit">
             ^^ input name submit

$('#formDelete').submit();
                  ^^

I don't know the reason why but it conflicts, so never name a button "submit", instead just append a number on the name to avoid conflict.

Here try this:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<div id="dialog">
<p>Are you sure you want to delete?</p>
</div>
<form id="formDelete" action="delete.php" method="POST">
    <input name="id" type="hidden" value="1" />
    <input name="submit1" type="submit" />
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('input[name="submit1"]').on('click', function(e){
        e.preventDefault();
        $('#dialog').dialog('open');
    });

    $('#dialog').dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Confirm": function(e) {
                $(this).dialog('close');
                $('#formDelete').submit();


            },
            "Cancel": function() {
                $(this).dialog('close');
            }
        }
    });
});
</script>

Sidenote: Actually I kinda stumbled on this kind of question before, but I cannot find it again (actually the correct answer with explanation was there but I can't find it here on SO).

EDIT: Ahh, here it is:

Additional Notes:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.

http://api.jquery.com/submit/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.