The form submission is not affected by the jQuery dialog buttons and will proceed to submit as

Question

The form submission is not affected by the jQuery dialog buttons and will proceed to submit as

I'm struggling with a form and JavaScript code interaction. In my code, when the validateDialogForm() function is called, a jQuery dialog appears under certain conditions. The issue is that the dialog only shows for a few seconds before the form continues to submit. I want the form to pause after the dialog appears and only submit when the user clicks the save button. I've tried using return false; at the end of the validateDialogForm() function to prevent the form from submitting immediately, but then the form does not submit even when the save button on the dialog is clicked. What am I missing in my code? As it stands now, the form submits regardless of the presence of the jQuery dialog.

$('#checklist_dialog').hide();

function validateDialogForm() {
  
  // JavaScript code here...
}

javascript html jquery css

Answer 1

Answer №1

To ensure the form does not submit while the dialog is visible, you must intervene to prevent continuous submission. Only after interacting with the dialog should you proceed to submit the form legitimately.

A potential challenge arises when submitting the form triggers the onsubmit functions once more! One way to handle this is by using a flag. Refer to the following pseudocode as a guide:

<form id="orderForm"
      action="/mywebsite/order.htm"
      method="POST"
      onsubmit="return (validateOrderForm(this) && validateDialogForm(this))">
...

let real_form_submit = false;

function validateDialogForm(theForm){
  if(!real_form_submit) {
    $('#checklist_dialog').dialog({
      ...
      buttons: {
        "SAVE": function() {
          $(this).dialog('close');
          real_form_submit = true;
          theForm.submit()
        },
        "CANCEL": function() {
          $(this).dialog('close');
        }
      }
    });
  }

  return real_form_submit;
}

Answer 2

To ensure the form does not submit while the dialog is visible, you must intervene to prevent continuous submission. Only after interacting with the dialog should you proceed to submit the form legitimately.

A potential challenge arises when submitting the form triggers the onsubmit functions once more! One way to handle this is by using a flag. Refer to the following pseudocode as a guide:

<form id="orderForm"
      action="/mywebsite/order.htm"
      method="POST"
      onsubmit="return (validateOrderForm(this) && validateDialogForm(this))">
...

let real_form_submit = false;

function validateDialogForm(theForm){
  if(!real_form_submit) {
    $('#checklist_dialog').dialog({
      ...
      buttons: {
        "SAVE": function() {
          $(this).dialog('close');
          real_form_submit = true;
          theForm.submit()
        },
        "CANCEL": function() {
          $(this).dialog('close');
        }
      }
    });
  }

  return real_form_submit;
}

The form submission is not affected by the jQuery dialog buttons and will proceed to submit as

Answer №1

Similar questions

Converting canvas illustrations into HTML files

Is there a way to incorporate content onto a webpage solely through the use of CSS and JavaScript?

unique navbar color transition effect specifically for the homepage

What is the best way to set up a webpage so that the left side remains fixed while allowing the right side to scroll?

Guide on using jQuery to incrementally cycle through an array using a button

Converting UTF-16 to UTF-8 in JavaScript: A step-by-step guide

The response from Axios in NodeJs is displaying incorrect encoding

Outcome of Request.Form when the input requested is empty

JavaScript error: forEach is not a function

The autocomplete feature is working, but it seems to be unable to locate any words

The variable $scope.variable_name has not been defined

The timer countdown is encountering an issue where it cannot update the 'textContent' property of a null element

Trouble getting vertical alignment to work using display:table-cell within display:table

Attempting to utilize ng-click on an element that has been added using element.append() in the postlink phase?

What is the best way to include an image in a PHP form along with additional attributes?

Click on the anchor tag to reveal additional content beyond the default display

Searching for MongoDB key names for querying and filtering purposes instead of focusing on values

Conceal certain profile details on the Profile Page using the Lamba Theme

Execute JavaScript function after completion of CSS animation using jQuery

The md-select component in AngularJS is not retrieving data from the controller as expected