Bootstrap modal form won't close on submit

Question

I'm having trouble with closing the modal when clicking the sign in button. Currently the Modal form will open up as soon as the page loads in. If I use data-dismiss="modal" in the submit button, my form doesn't record the input values into the csv file. Without the data-dismiss, the modal will continue to open unless I click the x in the top corner or click outside the modal.

<!DOCTYPE html>
<?php
$error = '';
$name = '';

function clean_text($string)
{
 $string = trim($string);
 $string = stripslashes($string);
 $string = htmlspecialchars($string);
 return $string;
}

if(isset($_POST["submit"]))
{
 if(empty($_POST["name"]))
 {
  $error .= '<p><label class="text-danger">Please Enter your Name</label></p>';
 }
 else
 {
  $name = clean_text($_POST["name"]);
  if(!preg_match("/^[a-zA-Z ]*$/",$name))
  {
   $error .= '<p><label class="text-danger">Only letters and white space allowed</label></p>';
  }
 }
 if($error == '')
 {
  $file_open = fopen("results.csv", "a");
  $no_rows = count(file("results.csv"));
  if($no_rows > 1)
  {
   $no_rows = ($no_rows - 1) + 1;
  }
  $form_data = array(
   'sr_no'  => $no_rows,
   'name'  => $name
  );
  fputcsv($file_open, $form_data);
  $error = '<label class="text-success">Thank you for contacting us</label>';
  $name = '';
 }
}
?>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>
<script>
    $('#submit').submit(function(e) {
    e.preventDefault();
    // Coding
    $('#myModal').modal('hide'); //or  $('#IDModal').modal('hide');
    return false;
});
</script>
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Check In to Receive Credit</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <p>Sign In</p>
                <form method="post">
                    <div class="form-group">
                        <input type="text" name="name" class="form-control" placeholder="Name">
                    </div>
                    <button type="submit" name="submit" class="btn btn-primary" value="Submit">Sign In</button>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Bootstrap modal form won't close on submit

0 Answers0