0

値を選択すると、同じフォームにさらに多くのテキストフィールドが作成されるドロップダウンボックスを作成するにはどうすればよいですか。

「必要なカテゴリはいくつですか？1-6」という選択オプションフィールドがあります。ユーザーが3つを選択すると、同じフォームに3つの新しいテキストフィールドが作成され、各カテゴリの名前を入力するように求められます。6つのカテゴリの場合、6つのテキストフィールドが生成されます。

送信ボタンがクリックされると、データは挿入ページに移動し、データベースが更新されます。私の問題は、選択オプションの値に基づいて新しいテキストフィールドを生成することです。

<select name="num_cat" onchange="document.textbox.value=this.value">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>

<input type="text" name="textbox" id="textbox">

<?php
If $_POST[num_cat] == 1{
echo ;
}else 
?>

そしてそれは私が迷子になるところです。データベースには、Category1、Category2などのフィールドがあり、これらのフィールドには、生成されたテキストフィールドの値が入力されます。

誰かが何か提案や例を持っているなら、私はとても素晴らしいでしょう。ありがとうございました。

〜G〜

4

4 に答える 4

2

必要なフィールド数を出力するには、ループを使用するだけでよいようです。

例えば：

ユーザーに必要なフィールドの量を尋ねるフォームがあります

フォーム.php

<form action="category_form.php" method="get">
    Number of fields required:  
    <select id="num_cat" name="num_cat">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
    <input type="submit" name="submit" value="Submit"/>
</form>

カテゴリーフォーム.php

if(isset($_GET['submit']) && isset($_GET['num_cat'])){

    $num_of_fields = $_GET['num_cat']; //WARNING: Requires validation/sanitisation

    echo '<form method="post" action="action.php">';
    for($i=1; $i<=$num_of_fields; $i++){
        echo '<input type="text" name="category-'.$i.'" />';
    }
    echo '<input type="submit" name="submit" value="Submit"/>';
    echo '</form>';
}

ただし、JQuery を使用してフィールドの量を動的に更新すると、ページを更新する必要がなくなるため、はるかに簡単になります。以下のコードを使用してこれを行うことができます。

index.html

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
    <script type="text/javascript">
        //when the webpage has loaded do this
        $(document).ready(function() {  
            //if the value within the dropdown box has changed then run this code            
            $('#num_cat').change(function(){
                //get the number of fields required from the dropdown box
                var num = $('#num_cat').val();                  

                var i = 0; //integer variable for 'for' loop
                var html = ''; //string variable for html code for fields 
                //loop through to add the number of fields specified
                for (i=1;i<=num;i++) {
                    //concatinate number of fields to a variable
                    html += 'Category ' + i + ': <input type="text" name="category-' + i + '"/><br/>'; 
                }

                //insert this html code into the div with id catList
                $('#catList').html(html);
            });
        }); 
    </script>
</head>
<body>
    <form method="post" action="action.php">
        Number of fields required:      
        <select id="num_cat" name="num_cat">
            <option value="0">- SELECT -</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>

        <div id="catList"></div>
        <input type="submit" name="submit" value="Submit"/>
    </form>
</body>
</html>

これにより、フィールドを生成するたびに PHP ページをリロードする代わりに、オンザフライで更新されます。

明らかに、CSS コードを追加する必要がありますが、私はそれを行っていません ;)。

PS .keyup を使用する代わりに、代わりに .change を使用することもできます...

于 2011-11-01T17:27:55.900 に答える
1

jQuery を使用して、ループで生成されたコードをフォームに挿入することを検討してください。

于 2011-11-01T16:38:30.403 に答える
1

次のようなことを試してください：

<?php
if(isset($_POST[num_cat])) {
    $cats = intval($_POST[num_cat]);

    for(i=1;i>=$cats;i++) {
        echo '<input type="text" name="cat-'.i.'" />';
    }
?>

これにより、選択ボックスの値が取得され、x 個のカテゴリのテキスト ボックスが表示されます。これをフォームにラップすると、それを送信してデータベースにデータを書き込むことができます。

于 2011-11-01T16:50:59.627 に答える
0

目的に合わせてスケーラブルであることを確認するために、スキーマについて考える必要があるようです。

それを行う1つの方法はこの方法です（あなたが今それを持っている方法のようなものです）：

表：メッセージIDメッセージテキストcategory1 category2 category3 category 4

これは、複数の結合を行う必要がないため、膨大なデータセットがある場合に便利です。問題は、5番目のカテゴリが必要な場合にどうなるかということです。

別のオプションは次のようになります。

表：メッセージIDメッセージテキスト

表：categories id categoryname

テーブル：messages_categories id messageID categoryID

このようにして、必要な数のカテゴリを設定でき、メッセージごとにカテゴリを指定する必要はありません。

したがって、既存のオプションを使い続けたい場合は、javascript関数を呼び出してフィールドを追加してみてください。

<select name="num_cat" onchange="addField(this.value)">...

function addField(num) {
  for (i=0; i<num; i++) {
    var newinput = document.createElement('text');
    /* If you use bracket notation like this (only on the name parameter), it will treat it like an array*/
    newinput.name = 'Cat[]';
  }
}

<?php

//This will now be an array you can loop over
$_POST['Cat']; 

?>
于 2011-11-01T17:00:23.163 に答える