0

ユーザーが自分の会社からコースを受講する希望する数の候補者を入力する必要があるコース登録フォームを作成しています。

例: ユーザーが「No of Candidates」という名前のフィールドに 3 を入力すると、スクリプトは、各候補者の情報について、「名前」、「電子メール」、「電話」、「性別」、「役職」などのフィールドを含む 3 つの行を生成する必要があります。

pls は、HTML の下にある「候補者番号」フィールドと、ユーザーが各候補者の情報を入力するために生成されるフィールドを見つけます。

Pls 注: 生成されるフィールドは、ユーザーの入力に基づいています。つまり、3、5、10 などになります。

<p>
<label><strong>No of Candidates</strong></label>
<label><input name="cand_no" type="text" placeholder="Type Your Number of Candidates" onchange='this.form.submit()' /></label>
  <div class="clear"></div>
</p>



    <div class="cand_fields">
    <table width="630" border="0">
      <tr>
        <td>Name</td>
        <td width="20">Sex</td>
        <td>Email</td>
        <td>Phone</td>
        <td width="40">Position</td>
      </tr>
      <tr>
        <td><input name="cand_name" type="text" placeholder="Name" required="required" /></td>
        <td>
        <select name="cand_sex" required="required">
        <option value=" "> </option>
        <option value="Male">Male</option>    
        <option value="Female">Female</option>
        </select>
        </td>
        <td><input name="cand_email" type="text" placeholder="Email" required="required" /></td>
        <td><input name="cand_phone" type="text" placeholder="Phone" required="required" /></td>
        <td><input name="cand_pos" type="text" placeholder="Position" required="required" /></td>
      </tr>
    </table></div>

私はphpでこれを試しましたが、サーバー側からこれを行うのは快適ではありません. したがって、JavaScriptを使用してクライアント側から行う必要があります。

これがjavascriptで実現できれば、とてもありがたいです...

どうもありがとう！

4

2 に答える 2

1

これを試してください...change()イベントを使用して..

テンプレート行を保持するテンプレート クラスを作成しました。次に.clone()、行をテーブルに挿入するために使用します。

$('[name="cand_no"]').on('change', function() {
    // Not checking for Invalid input
    if (this.value != '') {
        var val = parseInt(this.value, 10);

        for (var i = 0; i < val; i++) {
            // Clone the Template
            var $cloned = $('.template tbody').clone();
            // For each Candidate append the template row
            $('#studentTable tbody').append($cloned.html());
        }
    }
});​

働くフィドル

編集

1.)学生情報を保持するテーブルに ID を付けて、簡単にターゲットにできるようにしました。

2.)問題の要素のコピー、つまり template を作成するだけです。そのため、 input に入力されたエントリの数について、 for ループを記述し、テンプレート行を student テーブルに追加します。

3.)テンプレート行を display: none を使用して別の div に格納しているだけなので、画面に表示されません。これは、そこから HTML をコピーして新しいテーブルに追加するだけです。

<div class="template" style="display: none">
    <table>
    <tr >
         <td><input name="cand_name" type="text" placeholder="Name" required="required" /></td>
         <td>
            <select name="cand_sex" required="required">
               <option value=" "> </option>
               <option value="Male">Male</option>
               <option value="Female">Female</option>
            </select>
         </td>
         <td><input name="cand_email" type="text" placeholder="Email" required="required" /></td>
         <td><input name="cand_phone" type="text" placeholder="Phone" required="required" /></td>
         <td><input name="cand_pos" type="text" placeholder="Position" required="required" /></td>
      </tr>
  </table>
</div>
于 2012-10-30T19:16:29.083 に答える
0

ドロップダウンに変更することから始めることをお勧めしますcand_no。そうしないと、入力がテキストではなく数値であることを検証する必要があります。

次に、1 ～ 50 のプログレッシブ ID を使用して、たとえば 50 バージョンのテーブル (ack、div を使用しますか?) を追加します。display:hiddenデフォルトでそれらすべてに適用してから1、cand_no表示をブロックに変更するJavaScriptループを作成します。

于 2012-10-30T18:43:05.873 に答える