php - 根据复选框输入动态生成带有唯一 ID 的文本区域

Question

我正在为我的公司开发一个程序来处理不同的产品类型并创建文件。

我有一个表单，最终会在几个月内增长到接近 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">From here 的 div 中，然后用户将在相应的文件名中粘贴文本区域。基本上每个文本区域都与一个复选框选项相关联。

我使用 PHP 来处理表单，所以当它被提交时，我需要将每个具有值的文本区域的值存储到单独的变量中。有没有办法动态地做到这一点？

我对 jquery、javascript、php 或任何东西持开放态度。

我只是好奇最好这样做。否则我的知识只能手动创建 150 个复选框，然后创建 150 个文本区域，然后创建 150 个 jQuery 隐藏/显示方法，然后创建 150 个 php 检查以确定哪些文本区域具有值并将它们分配给变量。

Answer 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作为

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

Answer 2

如果您使用的是 jQuery，您应该能够使用/修改以下内容作为基础。

$('input[type=checkbox]').click(function() {
  var value = $(this).val();
  $(this).append(value +'<br /><textarea name="'+ value +'"></textarea>');
});

Answer 3

您可以尝试使用 Wrap 和 unwrap 方法来完成您的工作。

记住ID在页面中应该是唯一的。因此，我为 textarea div 分配了一个类，而不是 id。

$('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 中并分配它。当你取消选中它时，包装器被删除......这与其他复选框无关。所以它应该适用于任意数量的复选框。

Answer 4

HTML

您应该为复选框设置唯一的 ID，这也是一种很好的做法。这也将显示/隐藏文本区域，以保留已输入的任何文本——这可能是好事也可能是坏事，这取决于您的要求。

<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 );
}

输出

<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
        }
    }
?>