Bootstrap - How to clear some forms fields on collapse

I have a form that includes a collapsing well with optional fields. I’m trying to figure out how to clear those optional fields if they choose to toggle the well shut or hit the cancel button which also toggles the well shut.

    <form id="meeting">
      <div class="form-group">
        <label class="white" for="">Set Meeting Date &amp; Time</label>
        <input class="form-control" type="text" value="07/26/2017 09:05 pm" id="MeetingTime" name="MeetingTime" />
      </div>

      <button class="btn btn-primary" type="button" data-target="#offSiteMeeting" data-toggle="collapse" aria-pressed="false" autocomplete="off" aria-controls="offSiteMeeting">Offsite Meeting</button>


      <div class="collapse" id="offSiteMeeting">
        <div class="well">

            <a class="btn btn-default pull-right" href="" data-    toggle="collapse" data-target="#offSiteMeeting" aria-controls="offSiteMeeting">Cancel Offsite</a>

             <div class="form-group">
              <label class="" for="">Meeting Type</label>
              <select id="meetingType" name="meetingType" class="form-control">
                <option value="1">Meeting Type 1 </option>
                <option value="2">Meeting Type 2 </option>
                <option value="3">Meeting Type 3 </option>
              </select>
            </div><!-- close form-group -->


            <div class="form-group">
              <label class="" for="">Location Name</label>
              <input class="form-control" type="text" value="" id="name" name="name" placeholder="ex. Jones Family Home" />
            </div>

            <div class="form-group">
              <label class="" for="">Address</label>
              <input class="form-control" type="text" value="" id="address" name="address" placeholder="1234 Some Street City, State Zip"/>
            </div>

        </div><!-- close well -->
      </div><!-- close collapse -->

      <div class="form-group">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>          
    </form>

So the inputs I’d like to clear (in Form id=“meeting”) are

id=meetingType, id=name, id=address

when the well with id=“offSiteMeeting” is collapsed

Here are the two buttons that collapse the well

    <button class="btn btn-primary" type="button" data-target="#offSiteMeeting" data-toggle="collapse" aria-pressed="false" autocomplete="off" aria-controls="offSiteMeeting">Offsite Meeting</button>

     <a class="btn btn-default pull-right" href="" data-toggle="collapse"    data-target="#offSiteMeeting" aria-controls="offSiteMeeting">Cancel Offsite</a>

Hey,

Just hook into the click event on those elements and reset the value of the respective fields.

Not tested and using jQuery:

$('[data-toggle="collapse"]').on("click", function(e){
  e.preventDefault();
  $("#meeting, #name, #address").val("");
});

If that doesn’t work for you, pls make a JSFiddle or other runnable online demo and I’ll take a look.

That did it! Thanks Pullo!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.