1

I have a modal containing two forms, I want to switch between them when one of the radio buttons is checked, so i need to hide one of them in modal load, i did the following code, but it doesn't hide, can anyone help me in that? The Form need to be hidden on modal load is called LocateOnMap to hide all its 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">&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>

Improve this question

3 Answers 3

Reset to default
2

You can't have <form></form> under <form></form>, so removed that instead used div. By default assign hidden class to LocateOnMap. Then on change event of radio you can use jquery toggleClass() method to 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">&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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

On show.bs.modal you can hide the form and set the radio button:

$('#modal-Frm').on('show.bs.modal', function (e) {
     $('[data-form-id="#EnterAddress"]').prop('checked', true).trigger('change');
})

I'd suggest to add a data attribute to each name="optradio" like:

data-form-id="#EnterAddress"

and for the second one:

data-form-id="#LocateOnMap"

In this way, on radio change you can switch between the two forms:

$('[name="optradio"]').on('change', function(e) {
     $('#modal-Frm').find('form[id]').hide();
     $(this.dataset.formId).show();
})


$('#modal-Frm').on('show.bs.modal', function (e) {
    $('[data-form-id="#EnterAddress"]').prop('checked', true).trigger('change');
})
$('[name="optradio"]').on('change', function (e) {
    $('#modal-Frm').find('form[id]').hide();
    $(this.dataset.formId).show();
})


function CancelModal() {
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-Frm">
    Launch modal
</button>
<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"
                                                               data-form-id="#EnterAddress">Enter Address</label>
                            <label class="radio-inline"><input type="radio" name="optradio" data-form-id="#LocateOnMap">Locate
                                on Map</label>
                        </div>
                    </div>
                </form>
                <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">
                        </div>
                    </div>
                </form>
                <form id="EnterAddress">
                    <label style="color:red;">Hiii</label>
                </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>
</div>

Improve this answer

Comments

0 
<form id="LocateOnMap" hidden>

this will make the form hidden on load

document.getElementById("LocateOnMap").style.display="block";

this is to display it

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.