javascript - 如何在javascript中以模态隐藏表单

Question

我有一个包含两种形式的模式，我想在选中其中一个单选按钮时在它们之间切换，所以我需要在模式加载中隐藏其中一个，我做了以下代码，但它没有隐藏, 任何人都可以帮助我吗？ 需要在模态加载时隐藏的表单调用 LocateOnMap 以隐藏其所有内容。

<div class="modal fade" id="modal-Frm">
<div class="modal-dialog modal-sm" style="width:480px;">
    <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="modal-title">Add New Farmer</h3>
        </div>
        <div class="modal-body">
            <form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-sm-4">
                        <label class="Modallabel">Address:</label>
                    </div>
                    <div class="col-sm-8">
                        <label class="radio-inline"><input type="radio" name="optradio">Enter Address</label>
                        <label class="radio-inline"><input type="radio" name="optradio">Locate on Map</label>
                    </div>
                </div>
                <form id="LocateOnMap">
                    <div class="row">
                        <div class="col-sm-4">
                            <label class="Modallabel"></label>
                        </div>
                        <div class="col-sm-8">
                            <div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
                                <div class="col-sm-4">
                                    <label class="Modallabel">Latitude:</label>
                                </div>
                                <div class="col-sm-8">
                                    <div class="input-group input-group-sm" style="margin-top: -5px;">
                                        <input id="Latitude" type="text" class="form-control ModalInput" name="Latitude" placeholder="Latitude" style="border-radius: 5px;" readonly >
                                    </div><br>
                                </div>
                                <div class="col-sm-4">
                                    <label class="Modallabel">Longitude:</label>
                                </div>
                                <div class="col-sm-8">
                                    <div class="input-group input-group-sm" style="margin-top: -5px;">
                                        <input id="Longitude" type="text" class="form-control ModalInput" name="Longitude" placeholder="Longitude" style="border-radius: 5px;" readonly >
                                    </div>
                                </div> 
                            </div><br>
                        </div>
                    </div>
                    <div class="row" style="padding: 10px;">
                        <div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">
                            <script>
                                initModalfrmmap();
                            </script>
                        </div>
                    </div>
                </form>
                <form id="EnterAddress">
                    <label style="color:red;">Hiii</label>
                </form>
                <script type="text/javascript">
                    $('#LocateOnMap').hide();
                </script>
            </form>
        </div>
        <div class="modal-footer">
            <button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add</button>
            <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()" style="font-weight: bold;">Cancel</button>
        </div>
    </div>
</div>

Answer 1

你不能有 <form></form>在 <form></form> 下, 所以删除了而不是使用 div .默认分配 hidden类别为 LocateOnMap .然后在change radio的事件你可以使用 jquery toggleClass()切换 LocateOnMap 可见性的方法& EnterAddress .

$("#modal-Frm").modal("show");


$('input[name=optradio]').change(function() {
  $("#EnterAddress,#LocateOnMap").toggleClass("hidden");
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="modal fade" id="modal-Frm">
  <div class="modal-dialog modal-sm" style="width:480px;">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h3 class="modal-title">Add New Farmer</h3>
      </div>
      <div class="modal-body">
        <form action="AddNewCustomer.php" method="post" enctype="multipart/form-data">
          <div class="row">
            <div class="col-sm-4">
              <label class="Modallabel">Address:</label>
            </div>
            <div class="col-sm-8">
              <label class="radio-inline"><input value="address" type="radio" name="optradio" checked>Enter Address</label>
              <label class="radio-inline"><input value="location" type="radio" name="optradio">Locate on Map</label>
            </div>
          </div>
          <div>
            <div class="hidden" id="LocateOnMap">
              <div class="row">
                <div class="col-sm-4">
                  <label class="Modallabel"></label>
                </div>
                <div class="col-sm-8">
                  <div class="input-group input-group-sm" style="margin-top: -5px;margin-left: -15px;">
                    <div class="col-sm-4">
                      <label class="Modallabel">Latitude:</label>
                    </div>
                    <div class="col-sm-8">
                      <div class="input-group input-group-sm" style="margin-top: -5px;">
                        <input id="Latitude" type="text" class="form-control ModalInput" name="Latitude" placeholder="Latitude" style="border-radius: 5px;" readonly>
                      </div><br>
                    </div>
                    <div class="col-sm-4">
                      <label class="Modallabel">Longitude:</label>
                    </div>
                    <div class="col-sm-8">
                      <div class="input-group input-group-sm" style="margin-top: -5px;">
                        <input id="Longitude" type="text" class="form-control ModalInput" name="Longitude" placeholder="Longitude" style="border-radius: 5px;" readonly>
                      </div>
                    </div>
                  </div><br>
                </div>
              </div>
              <div class="row" style="padding: 10px;">
                <div style="width:100%; height:220px;border:2px solid rgb(16,29,73);" id="Modalfrmmap">

                </div>
              </div>
            </div>
          </div>
          <div id="EnterAddress">

            <label style="color:red;">Hiii</label>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button id="submit" name="submit" class="btn btn-success btn-md" style="margin:0;width: 75px;">Add</button>
        <button type="button" class="btn btn-secondary btn-md" data-dismiss="modal" onclick="CancelModal()" style="font-weight: bold;">Cancel</button>
      </div>
    </div>
  </div>