javascript - 提交和取消按钮不起作用，并且弹出窗口会导致可折叠面板关闭。我们如何解决这个问题？

问题描述

尝试在提交和取消按钮上测试功能，但似乎没有调用这些功能。当我按下“提交”或“取消”按钮时，它们会导致表单关闭，同时模式面板也会关闭。我试图让这些按钮只关闭表单，同时保持模式面板打开。

$(document).ready(function() {
  var item = ''
  $('.show').click(function() {
    item = $(this).attr('href').replace('#', '') //get the value
    var target = item + 'zxc'

    if (document.getElementById(item).className == 'panel-collapse collapse') {
      document.getElementById(target).style.display = 'grid';
    } else if (document.getElementById(item).className == 'panel-collapse collapse in') {
      document.getElementById(target).style.display = 'none';
    }
  });

  $('.ricedish').click(function() {
    target = $(this).attr('id') + 'zxc' //get target id
    //alert(target);	
    document.getElementById(target).style.display = "flex";
  });

  $('#btncancel').click(function() {
    canceltarget = $(this).parentNode().attr('id') //get parent node
    alert(canceltarget)
  });
});

/* for the forms */

{
  box-sizing: border-box;
}


/* Button used to open the contact form - fixed at the bottom of the page */

.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}


/* The popup form - hidden by default */

.form-popup {
  display: none;
  position: relative;
  bottom: 0;
  top: -100%;
  z-index: 9;
}


/* Add styles to the form container */

.form-container {
  height: auto;
  width: 100%;
  padding: 10px;
  background-color: white;
  border: 3px solid red;
}


/* Set a style for the submit/login button */

.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
}


/* Add a red background color to the cancel button */

.form-container .cancel {
  background-color: red;
}


/* Add some hover effects to buttons */

.form-container .btn:hover,
.open-button:hover {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='menu'>
  <h1 id='menutitle'><a style='color:red' href='index.html'>Back </a> <br>Menu items </h1>
  <div class="panel-group">
    <div class="panel panel-primary">
      <a data-toggle="collapse" href="#ricedishes" class='show'>
        <div class="panel-heading">
          <h4 class="panel-title">
            Rice Dishes (Additional toppings can be chosen)
          </h4>
        </div>
      </a>

      <div id="ricedishes" class="panel-collapse collapse">
        <div class="panel-body" id='ricedisheszxc'>

          <div class='ricedish' id='chickenrice'>

            <div class='pic'></div>
            <h4 align='center'>Chicken Rice<br> $3.00</h4>

            <div class="form-popup" id="chickenricezxc">
              <!-- form -->
              <form class="form-container">
                <h1 style='margin:0;'>Chicken Rice $3.00</h1>
                <h3>Choose the type of chicken:</h3>
                <hr>
                <input type="radio" name="gender" value="male"> Roasted<br>
                <input type="radio" name="gender" value="female"> Steamed<br>
                <input type="radio" name="gender" value="other"> Chicken Cutlet
                <hr>
                <h3> Extra toppings ($0.50 each)</h3><br>

                <input type="checkbox" value="egg">Egg<br>
                <input type="checkbox" value="chicken">More Chicken<br><br>
                <hr> Remarks:
                <br> <textarea class="form-control" rows="5" id="remarks"></textarea><br><br><br>

                <button class="btn submit" id='btnsubmit' onClick='submit()'>Submit</button>
                <button class="btn cancel" id='btncancel'>Cancel</button>
              </form>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

标签： javascriptjqueryhtml

javascript - 提交和取消按钮不起作用，并且弹出窗口会导致可折叠面板关闭。我们如何解决这个问题？

问题描述

解决方案

推荐阅读