0

私は会社がさまざまな製品タイプを処理してファイルを作成するためのプログラムに取り組んでいます。

数か月の間に、最終的に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内のその上のチェックボックス値と等しい単純なタイトルのテキスト領域を表示する必要があることです<div id="inputArea">。ここから、ユーザーは対応するファイル名を貼り付けます。テキスト領域。基本的に、各テキスト領域はチェックボックスオプションに関連付けられています。

私はPHPを使用してフォームを処理しているため、フォームが送信された時点で、値を持つ各テキスト領域の値を個別の変数に格納する必要があります。それを動的に行う方法もありますか？

私はjquery、javascript、phpなど何でも開いています。

私はこれを行うための最良の方法として興味があります。それ以外の場合、私の知識は、手動で150個のチェックボックスを作成し、次に150個のテキスト領域を作成し、次に150個のjQuery非表示/表示メソッドを作成し、次に150個のphpチェックを作成して、値を持つテキスト領域を決定し、それらを変数に割り当てるのに十分です。

4

4 に答える 4

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持つプレフィックスtxtArea_付きの名前と id があるため、チェックボックスが送信され、その値が次のようNOTに対応するテキストエリアの値を取得できます。php

$txtArea_NOT=$_POST['txtArea_NOT']; // When form's method is post
于 2012-09-27T20:39:50.740 に答える
0

jQueryを使用している場合は、以下をベースとして使用/変更できるはずです。

$('input[type=checkbox]').click(function() {
  var value = $(this).val();
  $(this).append(value +'<br /><textarea name="'+ value +'"></textarea>');
});
于 2012-09-27T20:02:54.283 に答える
0

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
        }
    }
?>
于 2012-09-27T20:26:40.313 に答える
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 内にラップして割り当てています。チェックを外すと、ラッパーが削除されます...これは、他のチェックボックスとは無関係です。したがって、任意の数のチェックボックスで機能するはずです。

于 2012-09-27T20:11:40.657 に答える