Question

I am working on a program for my company to process different product types and create files.

I have a form that will eventually grow to close to 150 checkbox options over the course of a few months. I’m trying to get input on the best way to do this and save me time in the long run.

So for example I have this:

<input type="checkbox" value="NOT" name="size">NOT<br />
<input type="checkbox" value="THA" name="size">THA<br />
<input type="checkbox" value="TAB22" name="size">TAB22<br />

What I need is that for every checkbox that is clicked, i need to reveal a text area w/ a simple title that is equal to the checkbox value above it within a div called <div id="inputArea"> From here the user will then paste in file names in the corresponding text areas. Basically each text area is tied to a checkbox option.

I use PHP to process the form, so when it is submitted, at that point I will need to store the value of each text area that has values into separate variables. Is there a way to do that dynamically as well?

I’m open to jquery, javascript, php or anything.

I’m just curious as the best to do this. Otherwise my knowledge is only good enough to manually create 150 checkboxes, then create 150 text areas, then create 150 jQuery hide/reveal methods, then create 150 php checks to determine what text areas have values and assign them to variables.

Answer 1

You may try this

HTML

<form action="some_action.php" method="post">
    <input type="checkbox" value="NOT" name="size">NOT<br />
    <input type="checkbox" value="THA" name="size">THA<br />
    <input type="checkbox" value="TAB22" name="size">TAB22<br />
    .... 
</form>

JS

$('input:checkbox[name="size"]').on('click', function(){
    if($(this).is(':checked'))
    {
        $('<div class="inputArea"></div>') // inputArea is a class not an ID because ID should be anique
        .append($('<textarea />', {id:'txtArea_'+$(this).val(), name:'txtArea_'+$(this).val()}))
        .insertAfter($(this).next('br'));
    }
    else
    {
        $(this).next('br').next('div.inputArea').remove();
    }
});

DEMO.

Every textarea has name and id with prefix txtArea_ with value of it’s corresponding checkbox so if a checkbox is submitted and it’s value is NOT then you can retrive the value of that corresponding textarea in php as

$txtArea_NOT=$_POST['txtArea_NOT']; // When form's method is post