Why is my submit button not working on bootstrap models?-CodePudding

The modal for my submit button does not pop-up (It does, but only for a split second) whenever I click on it. The purpose of the modal that is connected to the submit button is to make sure the user does not redirect to the next page whenever there are unfilled fields in the form (by using validation rules). I am using bootstrap, codeigniter4, and php. Can someone help me?

Here is the code for the modal:

<?php if (isset($validation)) :?>
                  
                   
<div  id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h5  id="exampleModalLabel">The following fields are required </h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
      <div >
        <?= $validation->listErrors()?>
      </div>
      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
 

<?php endif;?>

Here is the code for the button:

<button type="submit" id="submit" data-bs-toggle="modal" data-bs-target="#exampleModal">Submit</button>

Any help would be much appreciated, Thank you!

CodePudding user response：

As I understand you want to pop up the model if the user doesn't fill up all the details. The easiest way to achieve this is to first check if there are any validation errors. Something like:

<?php if($validation_errors){ ?>
<button type="button" id="submit" data-bs-toggle="modal" data-bs-target="#exampleModal">Submit</button>
<?php }else{ ?>
<button type="submit" id="submit">Submit</button>
<?php } ?>

more convenient would be using bootstrap alerts.

CodePudding user response：

have you tried using the button inside <form></form> tags?