Кнопки отправки и отмены не работают, так как всплывающее окно приведет к закрытию складной панели. Как мы решаем эту проблему?

Question

Испытанные функции тестирования на кнопках отправки и отмены, но, похоже, функции не вызываются. Когда я нажимаю кнопки «отправить» или «отменить», они вызывают закрытие формы, а также закрытие модальной панели. Я пытаюсь заставить эти кнопки закрыть только форму, оставляя модальную панель открытой.

$(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>

Answer 1

Пожалуйста, используйте jQuery, когда он у вас есть.

Примерно так

$(function() {
  $('.show').on("click",function() {
    var panelID = $(this).attr('href'); //get the target
    var $panel = $(panelID);
    var $target = $(panelID + 'zxc');
    $target.css({"display":$panel.is(".in")?'grid':'none'});
    $panel.toggleClass("in")
  });

  $('.ricedish').on("click",function() {
    $($(this).attr('id') + 'zxc') //get target id
      .css({"display":"flex"});
  });

  $('#btncancel').on("click",function() {
    canceltarget = $(this).closest(".panel-body").hide();
  });
});

/* 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>

Answer 2

Мне не удалось правильно запустить ваш код, но ваша главная проблема в том, что вы перепутали javascript и jquery. В jquery у нас нет функции parentNode (). вместо этого у нас есть parent (). Всегда смотрите на консоль, чтобы понять ваши javascript ошибки.

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