Why same HTML BUTTON works outside FORM but not inside FORM-CodePudding

I have an HTML file with CSS and JS combined. I have a Button then, when clicked, shows a modal. And this works fine. But, as I copied the same Button (exactly the same) inside a FORM, this Button does nothing (do not show the Modal). Whats wrong? I have read a lot and made a lot of different attempts to solve it, but nothing.

I marked the button I'm referring to with [*], in both cases (outside and inside the form).

What's wrong?

The modal should open too when I click the button inside the form as well.

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Open Modal</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 15px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgb(80, 80, 80);
      background-color: rgba(0, 80, 80, 0.4);
    }
    
    .modal-content {
      background-color: #f9f980;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 40%;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function() {
      // Get value on button click and show alert
      $("#showModalBtn").click(function() {
        var modal = document.getElementById("myModal");
        modal.style.display = "contents";
      });
      $("#closeModalBtn").click(function() {
        var str = $("#textValor").val();
        var modal = document.getElementById("myModal");
        modal.style.display = "none";
      });
    });
  </script>
</head>

<body>
  <div id="myModal" >
    <div >
      <p>Text inside modal!!!</p>
      <p>This is a text inside the modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal,
        modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal.</p>
      <button type="button" id="closeModalBtn">Close Modal</button>
    </div>
  </div>
  <button type="button" id="showModalBtn">Open Modal [*] (Outside FORM)</button>
  <p>&nbsp;</p>
  <table width="600" border="1" cellpadding="0" cellspacing="0">
    <form action="#" method="post" enctype="multipart/form-data">
      <tr>
        <td colspan="3" align="center" valign="middle" style="font-family:'Courier New'"><strong><font color="#0000A0">Buttons inside FORM</font></strong></td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
        <td align="center" valign="middle">
          <input type="submit" value="Process FORM (Input type submit)">
          <input type="submit" name="showModalBtn" value="Open Modal (Input type Submit)">
          <input type="button" name="showModalBtn" value="Open Modal (Input type Button)">
          <button type="button" id="showModalBtn">         Open Modal [*] (Button type Button)</button>
          <button type="submit" id="showModalBtn">         Open Modal (Button type Submit)</button>
        </td>
        <td valign="top">&nbsp;</td>
      </tr>
    </form>
  </table>
</body>

</html>

CodePudding user response：

IDs need to be unique. Use a class and navigate to the sibling elements if needed (not needed here)

Also you should use show and hide instead of setting style

As you can see, my code actually shows the modal in modal mode

You will need more code if you want to keep the modal on the page when you click a submit button (event.preventDefault())

$(document).ready(function() {
  // Get value on button click and show alert
  $(".showModalBtn").on("click", function() {
    $("#myModal").show()
  });
  $("#closeModalBtn").on("click", function() {
    $("#myModal").hide()
  });
});

body {
  font-family: Arial, Helvetica, sans-serif;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 15px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(80, 80, 80);
  background-color: rgba(0, 80, 80, 0.4);
}

.modal-content {
  background-color: #f9f980;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 40%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="myModal" >
  <div >
    <p>Text inside modal!!!</p>
    <p>This is a text inside the modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal,
      modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal.</p>
    <button type="button" id="closeModalBtn">Close Modal</button>
  </div>
</div>
<button type="button" >Open Modal [*] (Outside FORM)</button>
<p>&nbsp;</p>
<table width="600" border="1" cellpadding="0" cellspacing="0">
  <form action="#" method="post" enctype="multipart/form-data">
    <tr>
      <td colspan="3" align="center" valign="middle" style="font-family:'Courier New'"><strong><font color="#0000A0">Buttons inside FORM</font></strong></td>
    </tr>
    <tr>
      <td valign="top">&nbsp;</td>
      <td align="center" valign="middle">
        <input type="submit" value="Process FORM (Input type submit)">
        <input type="submit" name="showModalBtn" value="Open Modal (Input type Submit)">
        <input type="button" name="showModalBtn" value="Open Modal (Input type Button)">
        <button type="button" >         Open Modal [*] (Button type Button)</button>
        <button type="submit" >         Open Modal (Button type Submit)</button>
      </td>
      <td valign="top">&nbsp;</td>
    </tr>
  </form>
</table>

CodePudding user response：

the problem is that you use the id property as jquery selector. When you use the id property as selector, jquery attach the listener to the first element found with the given id.

Actaully you should never have two elements with the same id in your html code.

You can easily resolve the problem using a class instead of id:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open Modal</title>
    <style>
        body {font-family: Arial, Helvetica, sans-serif;}
        .modal {
          display: none; 
          position: fixed; 
          z-index: 1; 
          padding-top: 15px; 
          left: 0;
          top: 0;
          width: 100%; 
          height: 100%; 
          overflow: auto; 
          background-color: rgb(80,80,80); 
          background-color: rgba(0,80,80,0.4); 
        }
        .modal-content {
          background-color: #f9f980; 
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 40%; 
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            // Get value on button click and show alert
            $(".showModalBtn").click(function(){
            var modal = document.getElementById("myModal");
            modal.style.display = "contents";
            });
            $("#closeModalBtn").click(function(){
            var str = $("#textValor").val();
            var modal = document.getElementById("myModal");
            modal.style.display = "none";
            });
        });
    </script>
</head>
<body>
    <div id="myModal" >
        <div >
            <p>Text inside modal!!!</p>
            <p>This is a text inside the modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal, modal.</p>
            <button type="button" id="closeModalBtn">Close Modal</button>
        </div>
    </div>
    <button type="button" >Open Modal [*] (Outside FORM)</button>
    <p>&nbsp;</p>
    <table width="600" border="1" cellpadding="0" cellspacing="0">
        <form action="#" method="post" enctype="multipart/form-data">
            <tr> 
                <td colspan="3" align="center" valign="middle" style="font-family:'Courier New'"><strong><font color="#0000A0">Buttons inside FORM</font></strong></td>
            </tr>
            <tr>
                <td valign="top">&nbsp;</td>
                <td align="center" valign="middle">
                    <input  type="submit"                     value="Process FORM (Input type submit)">
                    <input  type="submit" name="showModalBtn" value="Open Modal (Input type Submit)" >
                    <input  type="button" name="showModalBtn" value="Open Modal (Input type Button)" >
                    <button type="button" >         Open Modal [*] (Button type Button)</button>
                    <button type="submit" id="showModalBtn">         Open Modal (Button type Submit)</button>
                </td>
                    <td valign="top">&nbsp;</td>
            </tr>
        </form>
    </table>
</body>
</html>