jquery - How to hide form in modal in javascript -
i have modal containing 2 forms, want switch between them when 1 of radio buttons checked, need hide 1 of them in modal load, did following code, doesn't hide, can me in that? form need hidden on modal load called locateonmap hide content.
<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">×</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>
you can't have <form></form> under <form></form>, removed instead used div. default assign hidden class locateonmap. on change event of radio can use jquery toggleclass() method toggle visibility of 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">×</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>
Comments
Post a Comment