Unwanted Empty Modal on Page Load

Question

Am working in PHP using a jquery dialogue as a modal to display my form errors. Everything works fine and displays corrrectly except on page load... an empty modal is displayed. If you close it then proceed to fill-in the form the modal works as it is intended, displaying errors (if any) when the submit button it clicked. For the sake of brevity I've included only the relavent code.

Am seeking help on how to prevent the empty modal from displaying on page load. I've reviewed dozens of related submissions and attempted to try implementing them, with dismal results. In most cases they either have no effect, or end-up disabling the modal all together.

Thanks in advance for any suggestions.

<?php

/// php error checking and form processing here ///

?>

<!DOCTYPE HTML>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" media="screen" />
</head>
<body>

<form action="<?=$_SERVER['PHP_SELF']?>" name="inquiry" method="post">

/// form fields here ///

<ul class="actions">
<li><input type="submit" class="button small" name="submit" id="submit" value="Send Inquiry" /></li>
</ul>

</form>

<div id="error" title="Form Errors:">
<?php
if (!empty($errors))
{
echo "<div style=\"padding:15px 15px 0 15px\">";
echo "<ul style=\"margin-bottom:20px\">";
foreach ($errors as $error)
echo "<li style=\"font-size:15px; padding:5px\">$error</li>";
echo "</ul></div>";
}
?>
</div>

<!-- JS at the end -->

<script src="/assets/js/jquery.min.js"></script><!-- ver: 1.11.3 -->

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>  

<script>
$('#error').dialog({
height: 380,
width: 260,
modal: true,
resizable: false,
dialogClass: 'no-close error-dialog'
});
</script>

</body>
</html>

https://stackoverflow.com/questions/2513051/when-creating-a-dialog-with-jquery-how-do-i-hide-the-dialog-div — Mohamed-Yousef, Dec 09 '17 at 12:43

score 0 · Accepted Answer · edited Mar 01 '18 at 22:17

0

You could prevent this by calling the dialog init just when the form is submitted using $_POST["submit"] like :

<script>
     <?php if( isset( $_POST["submit"] ) ){ ?> 
         $('#error').dialog({
             height: 380,
             width: 260,
             modal: true,
             resizable: false,
             dialogClass: 'no-close error-dialog'
         });
     <?php } ?>
</script>

edited Mar 01 '18 at 22:17

halfer

19,824
17
99
186

answered Dec 09 '17 at 12:42

Zakaria Acharki

66,747
15
75
101

Unwanted Empty Modal on Page Load

1 Answers1