1

Jquery UI dialog when used with form elements, its getting disappeared instantly. When I remove whole form tag contents, I see getting it closed only when user clicks on close button. Is Issue is with creating of div inside dialog which form elements are making it disappear? Tried using css custom styles and Jquery .attr() and .html() to achive the same by overriding native alert. 

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="httpsz:/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>

function displayalert()
{
    $("<div>This is sample</div>").dialog();
}
</script>
</head>
<body>
 
 <form>
<p>Select Items</p><br>
<input type="radio" name="checking">Item 1<br>
<input type="radio" name="checking">Item 2<br>
<input type="radio" name="checking">Item 3<br>
<input type="radio" name="checking">Item 4<br>
<input type="submit" onclick="displayalert()">
</form>
</body>
</html>

I have included alert to be displayed on button click. As stated when it is used alone, I see it closed only when user clicks on close. But when used with form, it disappears instantly.

I need the alert to get closed only when user clicks on close button.Have not included form contents since it is huge. It's having groups of radio buttons and checkboxes along with submit button.

Sriram S
  • 169
  • 14

1 Answers1

4

The problem is when you click the button form gets submitted.Because you are using a input of type submit for your button which is wrapped insie <form> element.

The HTML thinks you want to send the form data to a server for processing so it refreshes. By telling form not be submitted then your jquery works and return the message. Just add onsubmit="return false;" for the form tag.

What does `onsubmit="return false;"` do?

This basically done to handle the form submission via JavaScript.Just do nothing and return the control flow

Find more about this via www.codexpedia.com

This would be also helpful prevent refresh of page when button inside form clicked

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="httpsz:/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>

function displayalert()
{
    $("<div>This is sample</div>").dialog();
}
</script>
</head>
<body>
 
 <form onsubmit="return false;">
<p>Select Items</p><br>
<input type="radio" name="checking">Item 1<br>
<input type="radio" name="checking">Item 2<br>
<input type="radio" name="checking">Item 3<br>
<input type="radio" name="checking">Item 4<br>
<input type="submit" onclick="displayalert()">
</form>
</body>
</html>
Nipun Tharuksha
  • 2,496
  • 4
  • 17
  • 40
  • This works fine. I have to add ajax call to a service when form is submitted with all values selected. In that case , wont it allow the form to be submitted? Or we can change value of it through JS? – Sriram S Aug 18 '19 at 04:01
  • 1
    What you can do is just validate user inuputs and then . If validation fails you can stop the submit with this method and if validation pass then let it to be submitted – Nipun Tharuksha Aug 18 '19 at 04:03