Javascript form submit issue

Question

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>

• Beez: 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?
• pivotal developer: @Beez the condition for it to be submitted is when the user click proceed in the dialog
• Beez: That became apparent when I read @EMMERICH's answer. And now it makes sense. Don't forget to select an answer! :)

Answer 1

<form onsubmit="return false">

This should do the trick.

Answer 2

$('form').submit(function(){
 $("#dialog-submit").dialog("open");
 return false;
});

instead of your click handler, and change the input tag to a submit tag.

• 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.

Answer 3

$('#submitIter').click(function(e){
 e.preventDefault(); // prevents default button action
 $("#dialog-submit").dialog("open");
});

Answer 4

<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.