CODEWITHSUNDEEP
javascriptjqueryhtml
user3733831
user3733831

Reputation: 2926

Jquery toggle and reset form elements

I need to show and hide some form elements according to a checkbox selection.

This is my HTML: 

<div class="form-group">
    <label>
        <input name="address_check" value="1" type="checkbox">
        <span class="lbl"> Yes, My postal address is different</span>
    </label>
</div>

<div id="address2"> 
    <div class="form-group">
        <label class="control-label" for="street_no">Street No:</label>
        <div class="col-xs-12 col-sm-9">
                <input type="text" name="street_no" class="col-xs-12 col-sm-4" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="street_name">Street Name:</label>
        <div class="col-xs-12 col-sm-9">
             <input type="text" name="street_name" class="col-xs-12 col-sm-4" />
        </div>
    </div>
</div>

Here I want to display #address2 DIV if address_check check box checked and other wise it should be hide.

This how I tried it. 

$('input[name="address_check"]').bind('change',function(){
  $('#address2').fadeToggle(!$(this).is(':checked'));
});

My problem is I want to reset the form elements inside address2 div when this is toggling down. Reset mean I want to make empty these elements.

Can anybody tell me how to do it? Thank you.

Upvotes: 0

Views: 218

Answers (4)

Suchit kumar
Suchit kumar

Reputation: 11859

The easiest way to do this is using:

    $("#address2 :input").val("");
    $("#address2 :select").prop('selected',false);


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>

$(function(){
	$('input[name="address_check"]').bind('change',function(){
		  $('#address2').fadeToggle(!$(this).is(':checked'));
		  $("#address2 :input").val("");
		  $("#address2 :select").prop('selected',false);
		});
});

</script>

<div class="form-group">
    <label>
        <input name="address_check" value="1" type="checkbox">
        <span class="lbl"> Yes, My postal address is different</span>
    </label>
</div>

<div id="address2"> 
    <div class="form-group">
        <label class="control-label" for="street_no">Street No:</label>
        <div class="col-xs-12 col-sm-9">
                <input type="text" name="street_no" class="col-xs-12 col-sm-4" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="street_name">Street Name:</label>
        <div class="col-xs-12 col-sm-9">
             <input type="text" name="street_name" class="col-xs-12 col-sm-4" />
        </div>
    </div>
    
    <div class="form-group">
        <label class="control-label" for="street_name">select Name:</label>
        <div class="col-xs-12 col-sm-9">
             <select name="name" class="col-xs-12 col-sm-4" >
             <option value="1">1</option>
             <option value="2">2</option>
              </select>
        </div>
    </div>
</div>

Upvotes: 1

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

Try this:

var address2 = $('#address2');
$('input[name="address_check"]').bind('change',function(){
    var isChecked = $(this).is(':checked');

    isChecked ? address2.fadeIn() : address2.fadeOut();

    if(!isChecked)
    {
        address2.find('input, textarea').val('');
        address2.find('select').prop('selectedIndex',0);
    }
});

Upvotes: 1

void
void

Reputation: 36703

Try doing:

$('#address2').find("input").val("");

$("#address2").find('select option:first').prop('selected',true);

Working fiddle

Upvotes: 1

Ditto P S
Ditto P S

Reputation: 157

Try this

$('input[name="address_check"]').bind('change',function(){
  $('#address2').fadeToggle(!$(this).is(':checked'));

      $('#address2').find("input").val("");

});

Upvotes: 0

Related Questions