Get Value of closest input Jquery

Question

when i click on id save_newsection i need value of class school_name means school name

<div class="school_form_submit">
  <div class="form-group">
    <label class="control-label col-md-3">School Name<span class="required"> * </span>
    </label>
    <div class="col-md-9">
      <input type="text" class="form-control school_name" placeholder="Please Enter School Name" value="dfghdf" name="school_name_submit">
    </div>
  </div>
</div>
<div class="modal-footer">
  <button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
  <button type="button" id="save_newsection" class="btn green">Save changes</button>
</div>
</div>

Answer 1

If there is only one input with the class .school_name , use this

$("#save_newsection").click(function() {
    var value = $("input.school_name").val();
    // use value
});

If there could be more of them throughout the document use this:

$("#save_newsection").click(function() {
    var value = $(".school_form_submit .school_name").val();
    // use value
});

 $("#save_newsection").click(function() { var value = $(".school_form_submit .school_name").val(); alert(value); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="school_form_submit"> <div class="form-group"> <label class="control-label col-md-3">School Name <span class="required"> * </span> </label> <div class="col-md-9"> <input type="text" class="form-control school_name" placeholder="Please Enter School Name" value="dfghdf" name="school_name_submit"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button> <button type="button" id="save_newsection" class="btn green">Save changes</button> </div>