Form keeps on submitting and doesn't wait for save button from jquery dialog

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
<div id="pManualTitle" style="display: block">
	<table class="noPrint">
<div id="checklist_dialog" title="New Title" style="display: none;">
 <p>Checklist 1 goes here</p>
<p>Checklist 2 goes here </p>  


<table class="noPrint">
	<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;">
<script type="text/javascript">
function validateDialogForm(){
			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
				    	  		  modal: true,
			                      maxHeight: 500,
			                      width: 600,
			                      height: 500,
				    	  		  overlay: { opacity: 0.7,background: "black"},
				    	  		  buttons: {
				    	  		    "SAVE": function() {
				    	  		      alert("Inside SAVE button which is clicked");
				    	  		      //isConfirmed = true;
				    	  		      return true;
				    	  		    "CANCEL": function() {
				    	  		      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;



Without having read too deeply into the code, my immediate impulse is “dont make the buttons submit buttons. Have them just be buttons that invokes the Dialog. Have the Dialog submit the form directly if it passes validation.”

Thanks. Since I need to submit the form based on the answer user provides from jQuery Dialog, how can I avoid the button submit button scenario?

I didn’t quite get this line Have the Dialog submit the form directly if it passes validation - could you elaborate?

I got it working by explicitly submitting the form using form.submit() instead of default form submission.

1 Like

Sorry, i probably should have been more descriptive. S’what i get for posting right before going to bed :laughing:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.