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

问题描述

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

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

我有一个表格，在几个月的时间内，该表格最终将增长到接近150个复选框选项.从长远来看，我正在尝试获取最佳方法的意见，并节省我的时间.

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.

例如，我有这个:

<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中显示一个带有简单标题的文本区域，该标题等于其上方的复选框值.然后，用户将在此处粘贴在相应文本区域中的文件名中.基本上，每个文本区域都与一个复选框选项相关.

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.

我使用PHP处理表单，因此在提交表单时，我将需要将每个具有值的文本区域的值存储到单独的变量中.有没有办法动态地做到这一点?

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?

我愿意使用jquery，javascript，php或其他任何东西.

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

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

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.

推荐答案

您可以尝试

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的值，如下所示:

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

这篇关于根据复选框输入动态生成带有唯一ID的文本区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！