Adding and removing elements dynamically based on checkbox values

Question

I'm trying to dynamically add textareas to a div within a form depending on which checkboxes are checked. The textareas are added as <li> elements within an <ol> parent element so its just a list of textareas. My JQuery adds the textareas whenever the "CaseGrounds" checkboxes are checked, but I'm not sure how to remove the appropriate textareas if the relevant checkbox is unchecked.

I thought I would be clever and empty the <ol> before adding textareas, but this causes the problem of it only ever adding 1 textarea because its emptying the element on every change of the checkbox group. Another issue is that if I uncheck and then recheck a checkbox, it keeps adding the textarea over and over again.

Here's the JSFiddle: http://jsfiddle.net/D5YP7/

Here is my HTML:

<div id="form-Step2">
   <h2>Step 2</h2>
   <ul>
      <li><input type="checkbox" name="CaseGrounds" id="Ground1" value="1">Ground 1</li>
      <li><input type="checkbox" name="CaseGrounds" id="Ground2" value="2">Ground 2</li>
      <li><input type="checkbox" name="CaseGrounds" id="Ground2" value="3">Ground 3</li>
   </ul>
</div>
<div id="form-Step3">
   <h2>Step 3</h2>
   <fieldset>
      <legend>Details of Enquiry</legend>
      <ol>
     // Dynamically put textareas in here //
      </ol>
   </fieldset>
</div>

Heres my Jquery:

$('input[name="CaseGrounds"]').change(function () {

    $("#form-Step3 ol").empty();  //empty the ol within the div (#form-step3) within the form

    if ($(this).prop('checked')) {  //which checkbox was checked

        if ($(this).val() == '1') { // if it was '1' then add the li below
            $("#form-Step3 ol").append('<li><label for="TxtArea1">TxtArea1: </label><textarea name="TxtArea1" id="TxtArea1"></textarea></li>');
        }
        if ($(this).val() == '2') { // if it was '2' then add the li below
            $("#form-Step3 ol").append('<li><label for="TxtArea2">TxtArea2: </label><textarea name="TxtArea2" id="TxtArea2"></textarea></li>');
        }
        if ($(this).val() == '3') { // if it was '3' then add the li below
            $("#form-Step3 ol").append('<li><label for="TxtArea1">TxtArea3: </label><textarea name="TxtArea3" id="TxtArea3"></textarea></li>');
        }
    }

});

I'm not able to logically figure out how to program what I'm trying to achieve. Can anyone help me please?

EDIT: I should have originally mentioned that my textareas are not going to end up being named so neatly as "textarea1, textarea2, textarea3" and so on. They will end up being named whatever is suitable e.g. "complaint, comment, report". My apologies for simplifying the code too much.

show the markup for the form - you can probably better generalize your code to add or remove the textareas on the change event, but understanding the markup structure is necessary first — kinakuta
– kinakuta, Commented Dec 27, 2013 at 23:58

charlietfl · Accepted Answer · 2013-12-28 00:09:34Z

3

Should be able to simplify it down to something like this:

$('input[name="CaseGrounds"]').change(function () {
    var val = $(this).val();

    if ($(this).prop('checked')) { //which checkbox was checked
        var txtArea = 'TxtArea' + val;
        $("#form-Step3 ol").append('<li><label for="' + txtArea + '">' + txtArea + ': </label><textarea name="' + txtArea + '" id="' + txtArea + '"></textarea></li>');

    } else {
        $('#TxtArea' + val).parent().remove()
    }

});

DEMO

answered Dec 28, 2013 at 0:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

3 Comments

volume one Over a year ago

I did myself no favours by simplifying my code. Unfortunately my textareas are not going to end up being labelled as neatly as "textarea1, textarea2" and so on. They may be entirely different names such as "complaint, comment, report" etc. Its still based on the value of the checkbox but not named using it. Apologies for this.

charlietfl Over a year ago

then just create a selector identifier on the <li> based on the checkbox value, can still target the <li> to remove based on that

volume one Over a year ago

thanks charlietfl, voted Khawer Zeshan answer as the solution because thats what it does by adding an id to the li. Thank you once again your kind help :)

Khawer Zeshan · Accepted Answer · 2013-12-28 00:11:31Z

You can give an id to the li based on the value of the checkbox and can remove it if it is not checked

$('input[name="CaseGrounds"]').change(function () {

    //$("#form-Step3 ol").empty();  //empty the ol within the div (#form-step3) within the form

    if ($(this).prop('checked')) {  //which checkbox was checked

        if ($(this).val() == '1') { // if it was '1' then add the li below
            $("#form-Step3 ol").append('<li id="li_1"><label for="TxtArea1">TxtArea1: </label><textarea name="TxtArea1" id="TxtArea1"></textarea></li>');
        }
        if ($(this).val() == '2') { // if it was '2' then add the li below
            $("#form-Step3 ol").append('<li id="li_2"><label for="TxtArea2">TxtArea2: </label><textarea name="TxtArea2" id="TxtArea2"></textarea></li>');
        }
        if ($(this).val() == '3') { // if it was '3' then add the li below
            $("#form-Step3 ol").append('<li id="li_3"><label for="TxtArea1">TxtArea3: </label><textarea name="TxtArea3" id="TxtArea3"></textarea></li>');
        }
    } else {
        $('#li_'+$(this).val()).remove();
    }

});

FIDDLE

Marcel Gwerder · Accepted Answer · 2013-12-28 00:32:20Z

1

Why add and remove all the DOM elements on the fly. I would rather just hide and show them and insert them to the DOM by default (DEMO).

Insert all your textareas in the html:

<ol>
    <li><label for="TxtArea1">TxtArea1: </label><textarea name="TxtArea1" id="TxtArea1"></textarea></li>
    <li><label for="TxtArea2">TxtArea2: </label><textarea name="TxtArea2" id="TxtArea2"></textarea></li>
    <li><label for="TxtArea1">TxtArea3: </label><textarea name="TxtArea3" id="TxtArea3"></textarea></li>
</ol>

Hide them by default:

#form-Step3 ol li {
    display: none;
}

And then show and hide them according to the checkboxes:

var textareas$ = $('#form-Step3 ol li');

$('input[name="CaseGrounds"]').change(function () {

    var elem$ = $(this);
    var correspelem$ = textareas$.eq(elem$.val() - 1);

    if(elem$.is(':checked')) correspelem$.show();
    else correspelem$.hide();

});

I've used the numbers of the checkboxes to get the right textbox by its position in the DOM. If they don't always match you would have to use ids or something else.

answered Dec 28, 2013 at 0:32

Marcel Gwerder

8,5406 gold badges40 silver badges63 bronze badges

2 Comments

volume one Over a year ago

Its a good idea but if some clever git turns off javascript and fills in the wrong textareas it will cause problems later on. Im trying to make the website work only if JS is on.

Marcel Gwerder Over a year ago

If "some clever git" turns javascript off he will not see a single textarea. Remember they are hidden by default (css) and shown by javascript.

Collectives™ on Stack Overflow

Adding and removing elements dynamically based on checkbox values

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related