javascript - 显示和隐藏表单

Question

这个想法是我有 2 个按钮和 2 个包含内容的表单；我制作了每个隐藏/显示表单的按钮，例如 button1 将在单击时显示和隐藏 form1，因此 button2 和 form2，它可以工作，但问题是当我单击 button1 和 button2 时，表单都会显示，并且我想要类似form2已经显示的东西，然后当我点击button1显示form1时，form2会自动隐藏，如果我点击buton2之后我希望form2显示并且form1隐藏。

代码

<hr id="hr1" hidden><!-- HR -->
<input type="submit" id="mngashow1" value="Show 'Add chapter'" onclick="chapterform()">
<div id="formm1" style="display: none;">
  <form id="form2" name="form2" method="post" action="a.php"" enctype="multipart/form-data">
  <table id="tble" width="80%" border="0" cellpadding="3" cellspacing="3">
            <tr>
              <td>ID</td>
                <td><input type="text" name="id" placeholder="type id" id="id"></td>
            </tr>
            <tr>
            <td>First row</td>
            <td><input type="text" name="manganame" placeholder="add a name for the manga" id="manganame"></td>
          </tr>
            <tr>
            <td>Third row</td>
            <td><input type="text" name="chapternumber" placeholder="Add the chapter number" id="chapternumber"></td>
          </tr>
          <tr>
              <td>Second row</td>
              <td><input type="text" name="chaptername" placeholder="Add a name for the chapter" id="chaptername"></td>
            </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="Submit2" placeholder="" id="Submit2" value="Save Table">
            </td>
          </tr>
</table>
</form>
</div>
<hr id="hr2" hidden><!-- HR -->
<input type="submit" id="mngashow2" value="Show 'Add chapter'" onclick="chapterform1()">
<div id="formm2" style="display: none;">
  <form id="form3" name="form2" method="post" action="a.php"" enctype="multipart/form-data">
  <table id="tble" width="80%" border="0" cellpadding="3" cellspacing="3">
            <tr>
              <td>ID</td>
                <td><input type="text" name="id" placeholder="type id" id="id"></td>
            </tr>
            <tr>
            <td>First row</td>
            <td><input type="text" name="manganame" placeholder="add a name for the manga" id="manganame"></td>
          </tr>
            <tr>
            <td>Third row</td>
            <td><input type="text" name="chapternumber" placeholder="Add the chapter number" id="chapternumber"></td>
          </tr>
          <tr>
              <td>Second row</td>
              <td><input type="text" name="chaptername" placeholder="Add a name for the chapter" id="chaptername"></td>
            </tr>
          <tr>
            <td>&nbsp;</td>
            <td><input type="submit" name="Submit23" placeholder="" id="Submit3" value="Save Table">
            </td>
          </tr>
</table>
</form>
</div>

JAVASCRIPT代码

function chapterform() {
  var x = document.getElementById("formm1");
  var z = document.getElementById("mngashow1");
  var y = document.getElementById("hr1");


  if (x.style.display === "none") {
    x.style.display = "block";
    z.value = "Hide 'Add Chapter'";
    y.hidden = 0;
  } else {
    x.style.display = "none";
    z.value = "Show 'Add Chapter'";
    y.hidden = 1;
  }
}
function chapterform1() {
  var x = document.getElementById("formm2");
  var z = document.getElementById("mngashow2");
  var y = document.getElementById("hr2");


  if (x.style.display === "none") {
    x.style.display = "block";
    z.value = "Hide 'Add Chapter'";
    y.hidden = 0;
  } else {
    x.style.display = "none";
    z.value = "Show 'Add Chapter'";
    y.hidden = 1;
  }
}

标签： javascripthtml

Answer 1

    <button data-frm="2" class="btnChap">Add Chapter</button>
        <form id="form2" class="frms" name="form2" method="post" action="a.php" enctype="multipart/form-data">
    
    </form>
    <button data-frm="1" class="btnChap">Add Chapter</button>
<form id="form1" class="frms" name="form1" method="post" action="b.php" enctype="multipart/form-data">
    
    </form>
    <script type="text/javascript">
        $(".btnChap").click(function(){
        /*hids all the forms*/
        $(".frms").hide();
        var frm = $(this).attr('data-frm');
        /*show your current form*/
        $("#form"+frm).show();
        })
    </script>
    
     1. Add Class 'frms' to each form
     2. use button instead fs submit input
     3. each button has its own id
     4. each button has its own property to which form this button is associated
     5. use jquery
     6. hide all forms by class selector
     7. show your desired form by button property
    
    Hope this Helps and welcome to the community :)