I have the following form code and the javascript code as shown below. Problem is when the execution reaches validateDialogForm(), a jquery diaog is shown if some conditions are satisfied. And I do see the diaog for few seconds but it won’t stay there and form just keeps on submitting. I want to form to halt for sometime and submit only when user hits save button. I have tried putting return false; just before the end of validateDialogForm() function so that stops the form from submitting but then when I hit the save button of the dialog, it won’t move forward with submitting the form and just stays as it is. What am I doing wrong here? Current state of below code is that the form will continue to submit regardless of jquery dialog. (Lot of irrelevant code has been removed for clarity)
<form id="orderForm" action="/mywebsite/order.htm" method="POST" onsubmit="return (validateOrderForm(this) && validateDialogForm())">
<input id="choiceBstatus" name="choiceBstatus" type="hidden" value="true">
<div id="ownerDisplayFields" style="visibility: visible;">
<table class="noPrint">
//some divs
</tbody></table>
</div>
<div id="pManualTitle" style="display: block">
<table class="noPrint">
<tbody>
</tbody></table>
</div>
<div id="checklist_dialog" title="New Title" style="display: none;">
<p>Checklist 1 goes here</p>
<p>Checklist 2 goes here </p>
</div>
<table class="noPrint">
<tbody><tr>
<td align="center"><br>
<input class="button" type="submit" name="save" value="Save"> - <input class="button" type="submit" name="cancel" value="Cancel" onclick="bCancel = true;">
</td>
</tr>
</tbody></table>
<script type="text/javascript">
$('#checklist_dialog').hide();
function validateDialogForm(){
$('#checklist_dialog').show();
var isConfirmed = false;
//STEP:1 Check if option B is selected.
var selectedVal = "";
var selected = $("input[type='radio'][name='sampleChoice']:checked");
if (selected.length > 0) {
selectedVal = selected.val();
console.log("Selected Option is "+selectedVal);
}
if(selectedVal === "choiceB"){
if($("#choiceBstatus").val() === "true"){
//show the dialog box
$('#checklist_dialog').dialog({
modal: true,
maxWidth:600,
maxHeight: 500,
width: 600,
height: 500,
overlay: { opacity: 0.7,background: "black"},
buttons: {
"SAVE": function() {
$(this).dialog('close');
alert("Inside SAVE button which is clicked");
$("#choiceBstatus").val("false");
//isConfirmed = true;
return true;
},
"CANCEL": function() {
$(this).dialog('close');
alert("You must complete / save the checklist before saving your form!");
// return false;
}
}
});
/* e.preventDefault();
return false; */
}//end of if($("#choiceBstatus").val() == true ){
if($("#choiceBstatus").val() === "false"){
// return true;
}
}//end of if(selectedVal === "choiceB"){
//return false;
/* if(isConfirmed){
return true;
}
else {
return false;
}
*/
}
</script>
<div></div></form>
