dynamically generate text areas w/ unique id's based on checkbox inputs - php

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

Answer 2

If you're using jQuery, you should be able to use/modify the following as a base.
$('input[type=checkbox]').click(function() {
var value = $(this).val();
$(this).append(value +'<br /><textarea name="'+ value +'"></textarea>');
});

Answer 3

You can try to use the Wrap and unwrap methods to get your things done.
Remember ID's should be unique in a page. So instead of id I have assigned it a class for the textarea div..
$('input[type=checkbox]').on('click', function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
$(this).wrap('<div class="inputArea"></div>');
$(this).closest('div').prepend('<textarea class="text-area" cols="10" rows="2"></textarea>');
}
else{
$(this).closest('div').find('.text-area').remove();
$(this).unwrap();
}
});​
DEMO HERE
So basically your are wrapping your checkbox inside a div and assigning it.. When you uncheck it , the wrapper is removed... This is independent of other checkboxe's. So it should work for any number of checkboxes.

Answer 4

HTML
You should have unique ids for the checkboxes, just as good practice. This also will show/hide textareas, to preserve any text that has already been entered -- this could be a good or a bad thing, depending on your requirements.
<form name="frmSize" method="POST" action="somePage.php">
<div><input id="cbNot" class="cbFileList" type="checkbox" value="NOT" name="not">NOT</div>
<div><input id="cbTha" class="cbFileList" type="checkbox" value="THA" name="tha">THA</div>
<div><input id="cbTab22" class="cbFileList" type="checkbox" value="TAB22" name="tab22">TAB22</div>
</form>
JavaScript
var cbList = document.getElementsByClassName( 'cbFileList' );
var i;
for ( i = 0; i < cbList.length; i++ ) {
createTextArea( cbList[i] );
cbList[i].addEventListener( 'click', function() {
var cb = this;
if ( cb.checked ) {
showTextArea( cb );
} else {
hideTextArea( cb );
}
});
}
function showTextArea( cb ) {
document.getElementById( 'div-' + cb.id).style.display = '';
}
function hideTextArea( cb ) {
document.getElementById( 'div-' + cb.id).style.display = 'none';
}
function createTextArea( cb ) {
var newDiv = document.createElement( 'div' );
var newTextArea = document.createElement( 'textarea' );
newDiv.setAttribute( 'id', 'div-' + cb.id );
newDiv.innerHTML = '<b>' + cb.value + '</b><br/>'; // Create bold text using checkbox's value
newTextArea.setAttribute( 'id', 'ta-' + cb.id );
newTextArea.setAttribute( 'name', 'ta-' + cb.id );
newTextArea.innerHTML = cb.value;
newDiv.appendChild( newTextArea );
cb.parentNode.appendChild( newDiv );
}
The Output
<div>
<input id="cbNot" class="cbFileList" type="checkbox" value="NOT" name="not">NOT
<div id="div-cbNot">
<b>NOT</b><br/>
<textarea id="ta-cbNot"></textarea>
</div>
</div>
<div>
<input id="cbTha" class="cbFileList" type="checkbox" value="THA" name="tha">THA
<div id="div-cbTha">
<b>THA</b><br/>
<textarea id="ta-cbTha" name="ta-cbTha"></textarea>
</div>
</div>
...
PHP
<?
// run a for loop through $_POST[] and check for any field prefixed with 'ta-'
foreach( $_POST as $key => $value ) {
if ( strpos( $key, 'ta-' ) !== false && strlen( $value ) > 0 ) {
// Found a textarea with content!
// Do something with $_POST[$key], which contains the contents of textarea
}
}
?>