admin管理员组

文章数量:1352795

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=".10.3/themes/black-tie/jquery-ui.min.css" rel="stylesheet">
<script src=".1.1.js" type="text/javascript"></script>
<script src=".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.

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./ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css" rel="stylesheet">
<script src="http://code.jquery./jquery-2.1.1.js" type="text/javascript"></script>
<script src="http://code.jquery./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.

  • javascript
  • php
  • jquery
  • html
  • forms
Share Improve this question asked Sep 18, 2014 at 0:53 Chad PriddleChad Priddle 6723 gold badges16 silver badges33 bronze badges 0
Add a ment  | 

1 Answer 1

Reset to default 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./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./jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//code.jquery./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./submit/

本文标签： javascriptSubmit form after confirming jquery modal popupStack Overflow

版权声明：本文标题：javascript - Submit form after confirming jquery modal popup - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1743920220a2561949.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。