我正在为我的公司制作一个程序来处理不同的产品类型并创建文件。
我有一个表格,在几个月的时间内最终将增加到接近150个复选框选项。我正在努力获得最佳方式的输入并从长远来看节省时间。
例如我有这个:
<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 />
我需要的是,对于每个被点击的复选框,我需要在一个名为<div id="inputArea">
的div中显示一个带有简单标题的文本区域,该文本区域等于上面的复选框值。用户将在此处然后在相应的文本区域中粘贴文件名。基本上每个文本区域都与一个复选框选项相关联。
我使用PHP来处理表单,所以在提交时,我需要将每个具有值的文本区域的值存储到单独的变量中。有没有办法动态地做到这一点?
我对jquery,javascript,php或其他任何东西开放。
我只是好奇最好这样做。否则,我的知识只能手动创建150个复选框,然后创建150个文本区域,然后创建150个jQuery隐藏/显示方法,然后创建150个php检查以确定哪些文本区域具有值并将它们分配给变量。
答案 0 :(得分:1)
你可以试试这个
<强> 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();
}
});
每个textarea
都有名称和ID,前缀为txtArea_
,其值为相应的复选框,因此,如果提交了一个复选框且值为NOT
,则可以检索该对应的值php
中的textarea
$txtArea_NOT=$_POST['txtArea_NOT']; // When form's method is post
答案 1 :(得分:0)
如果你正在使用jQuery,你应该能够使用/修改以下作为基础。
$('input[type=checkbox]').click(function() {
var value = $(this).val();
$(this).append(value +'<br /><textarea name="'+ value +'"></textarea>');
});
答案 2 :(得分:0)
您可以尝试使用Wrap和unwrap方法来完成任务。
请记住 ID 在页面中应该是唯一的。所以我没有为id分配一个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();
}
});
所以基本上你将你的复选框包装在一个div中并分配它。当你取消选中它时,包装器被移除......这与其他复选框无关。所以它应该适用于任意数量的复选框。
答案 3 :(得分:0)
对于复选框,您应该有唯一的ID,这是一种很好的做法。这也将显示/隐藏textareas,以保留已经输入的任何文本 - 根据您的要求,这可能是好事还是坏事。
<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>
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 );
}
<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>
...
<?
// 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
}
}
?>