I have a html form on my webpage that contains an image that will trigger a dialog page when clicked. However, the form submission triggers and force a submit to occur. How can i prevent that from happening?
<script>
//trigger dialog
$('#submitIter').click(function(){
$("#dialog-submit").dialog("open");
return false
});
$("#dialog-submit").dialog({
autoOpen: false,
resizable: false,
height: 200,
width: 200,
modal: true,
buttons: {
"Proceed": function(){
//submit after user clicks proceed cannot seem to work
document.forms[0].submit();
$(this).dialog("close");
}
}
});
</script>
<form action="{{ request.path }}" method="post" enctype="multipart/form-data">
<input type="image" src="images/submit.png" id="submitIter">
</form>
asked Apr 7, 2011 at 14:30
pivotal developer
5033 gold badges17 silver badges31 bronze badges
-
Is the form being submitted when you're setting up your button? I.e., document.forms[0].submit() is actually executing when it gets to that line of code?Beez– Beez2011年04月07日 14:36:03 +00:00Commented Apr 7, 2011 at 14:36
-
@Beez the condition for it to be submitted is when the user click proceed in the dialogpivotal developer– pivotal developer2011年04月07日 14:53:11 +00:00Commented Apr 7, 2011 at 14:53
-
That became apparent when I read @EMMERICH's answer. And now it makes sense. Don't forget to select an answer! :)Beez– Beez2011年04月07日 14:55:42 +00:00Commented Apr 7, 2011 at 14:55
4 Answers 4
<form onsubmit="return false">
This should do the trick.
answered Apr 7, 2011 at 14:32
Brad
164k57 gold badges381 silver badges559 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
$('form').submit(function(){
$("#dialog-submit").dialog("open");
return false;
});
instead of your click handler, and change the input tag to a submit tag.
answered Apr 7, 2011 at 14:36
EMMERICH
3,4842 gold badges21 silver badges15 bronze badges
2 Comments
pivotal developer
i cannot seem to trigger my document.forms[0].submit(); after adding a return false
Beez
See my answer. The .submit()'s return false will never allow your form to submit, so it has to be conditional.
$('#submitIter').click(function(e){
e.preventDefault(); // prevents default button action
$("#dialog-submit").dialog("open");
});
answered Apr 7, 2011 at 14:50
Corneliu
2,9521 gold badge21 silver badges23 bronze badges
Comments
<script>
//trigger dialog
$('form').submit(function(){
return $('form').data('confirmed') === true;
});
$('#submitIter').click(function(){
$("#dialog-submit").dialog("open");
return false;
});
$("#dialog-submit").dialog({
autoOpen: false,
resizable: false,
height: 200,
width: 200,
modal: true,
buttons: {
"Proceed": function(){
//submit after user clicks proceed cannot seem to work
$('form').data('confirmed', true);
$('form').submit();
$(this).dialog("close");
}
}
});
</script>
Basically, set a variable on the form's data object that it's ready to be actually submitted to the server in your proceed button. If the variable doesn't exist, yet, the submit function will return false which will allow your dialog to show up. If it has been confirmed by means of your proceed button, the form will submit.
I haven't tested that code, but if it doesn't work, hopefully you can understand the concept.
answered Apr 8, 2011 at 15:31
Beez
2,1111 gold badge21 silver badges23 bronze badges
Comments
lang-js