Showing a text input when checkbox is clicked - Jquery

Question

I'm having an issue with this code and I can't figure out whey it's not working. Essentially, when a checkbox is clicked, the text field in the same li should show up.

I don't want a "hide / show", since this will populate the array with additional fields, so i'm looking at making it fill the div with a new input if the checkbox is selected.

Any ideas where I'm running into an issue?

Here's my html:

<ul>
    <li class="practice"><label><input type="checkbox" value="Practice 1" class="input_control" name="practice_areas[id][name]" /> Practice 1</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 2" class="input_control" name="practice_areas[id][name]"  /> Practice 2</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 3" class="input_control" name="practice_areas[id][name]"  /> Practice 3</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 4" class="input_control" name="practice_areas[id][name]"  /> Practice 4</label> <div class="showOrder"></div></li>
    <li class="practice"><label><input type="checkbox" value="Practice 5" class="input_control" name="practice_areas[id][name]"  /> Practice 5</label> <div class="showOrder"></div></li>                 
</ul>

Here's my Javascript:

<script>
jQuery('li.practice').each(function() {
    jQuery(".input_control", this).click(function() {
        jQuery('.showOrder', this).html('<label>Order: <input type="text" size="2" name="practice_area[id][order]" value="" /></label>');
    });
});

</script>

"populate the array with additional fields" what do you mean by this? What array? — Rick Viscomi
– Rick Viscomi, Commented Mar 28, 2013 at 20:35
Hi Rick, if you notice I have the text fields setup as an array. If the item is blank, it will still add items to the array. Hope that makes sense. — Troy
– Troy, Commented Mar 29, 2013 at 15:42

Ram · Accepted Answer · 2013-03-28 20:42:34Z

2

You are misusing $(selector, context), the .showOrder element is not within the context of clicked element.

$('li.practice .input_control').change(function(){
    var $target = $(this).closest('li').find('.showOrder');
    if (this.checked) {
        $target.html('<label>Order: <input type="text" size="2" name="practice_area[id][order]" value="" /></label>');
    } else {
        $target.empty();
    }
});

http://jsfiddle.net/Qh6Fq/1/

edited Mar 28, 2013 at 20:42

answered Mar 28, 2013 at 20:36

Ram

145k16 gold badges174 silver badges201 bronze badges

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

1 Comment

Troy Over a year ago

Thanks undefined :) this works because it removes it as well the checkbox is taken off.

Nelson Benítez León · Accepted Answer · 2013-03-28 20:36:07Z

2

You were incorrectly using your .input_control as context for locating your .showOrder, I changed your code to use your li.practice as context, so do as follows:

jQuery('li.practice').each(function() {
    var li = this;
    jQuery(".input_control", this).click(function() {
        jQuery('.showOrder', li).html('<label>Order: <input type="text" size="2" name="practice_area[id][order]" value="" /></label>');
    });
});

answered Mar 28, 2013 at 20:36

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

1 Comment

Troy Over a year ago

Thanks Nelson, this did work but I Undefined had it being removed as well.

Collectives™ on Stack Overflow

Showing a text input when checkbox is clicked - Jquery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related