0

高校生は、修了した学年ごとに学年 GPA を追加できます。
ただし、複数の学年を追加する場合は、フォームを再提出する必要があります。
jQuery スクリプトを使用して、同じフォーム内に新しいフィールドを追加できるようにしたいと考えています。
オンラインでいくつか見つけましたが、それらは私のニーズに対応していません。ユーザーがボックスを追加するたびに、フィールド名の末尾に , , などの数字を追加する必要classYEAR1がclassYEAR2あります。また、エントリの総数をフィールドに追加する必要があります。そうしないと、バックエンドのコードが機能しません... 正しく説明できたのだろうか、今朝から機能させようとしています....gpa1gpa2totalGRADES

あなたの助けを楽しみにしています。

                <form action="?Process=UpdateGrades" method="post" class="frm grades-form">
                    <fieldset>   
                        <p>
                            <label>class year</label>
                            <select name="classYEAR">
                                <option value="12">12th grade</option>
                                <option value="11">11th grade</option>
                                <option value="10">10th grade</option>
                                <option value="9">9th grade</option>
                            </select>                                    
                        </p>                                                                        
                        <p>
                            <label>GPA</label>
                            <input type="text" name="gpa" size="55" value="" />
                        </p>  
                        <p>
                            <input type="hidden" name="totalGRADES" value="1">   
                            <input type="hidden" name="x" value="p">   
                            <input type="submit" name="submıt" value="gönder" class="btn submit">
                        </p>
                    </fieldset>
                </form>
4

2 に答える 2

1

次のコードは、ID を持つある種の追加ボタンがあることを前提としています。「addButton」の名前を、フィールドの追加に使用しているボタンの ID に変更するだけです。

$('#addButton').click(function() {
  var count = parseInt($('[name="totalGrades"]').val());
  count = count + 1;
  $('fieldset').append('<p><label>class year</label><select name="classYEAR'+count+'">{{options}}</select></p>{{GPA Fields}}');
  $('[name="totalGrades"]').val(count);
});

最初の行は、アクション リスナーを追加ボタンに追加し、クリックするとその内部の関数をトリガーします。次の 2 行は、現在のエントリ数をフェッチし、それを 1 つ増やします。その次の行は、html コードを fieldset 要素に追加し、name 属性の設定に関連するインクリメントされたカウンターを置き換えます。最後から 2 番目の行は、ページの非表示の totalGrades フィールドを新しいカウントで更新します。

.clone() などを使用して javascript で HTML をハードコーディングする必要のない、より洗練されたソリューションがおそらくありますが、これは迅速で汚いソリューションです。

于 2013-05-30T04:09:30.960 に答える
1

新しいボックスの追加:

最初にコンテナを作成してクローンする場所を設定し、class="clone"新しいボックスが表示される場所を提供しますid="container"

<div id="container"> <!--# Unique id //-->
  <div class="clone"> <!--# Class, after cloning it is duplicated, so id should not be used //-->
    <p>
      <label>class year</label>
      <select name="classYEAR">
        <option value="12">12th grade</option>
        <option value="11">11th grade</option>
        <option value="10">10th grade</option>
        <option value="9">9th grade</option>
      </select>                                    
    </p>
    <p>
      <label>GPA</label>
      <input type="text" name="gpa" size="55" value="" />
    </p>  
  </div>
</div>

次に、以下のコードは、クローン機能を使用して追加ボタンにバインドします。

$('#addButton').click(function() {

  count = $('div.clone').length;
  # Counts the total number of boxes. Modify with +1 or something as you need

  $('div.clone:first')
    .clone() # Clone the code
    .find('select')  
      .attr('name', 'classYEAR' + count)   # Modify the select name with a number subfix
      .end()  # Back to parent 
    .find('input')
      .attr('name', 'gpa' + count)    # Modify the input name with a number subfix
      .end()  # Back to parent      
    .appendTo('#container');  # Put in container
});

totalGRADES を更新するにはid、まず検索を容易にするために を追加します

<input id="totalGRADES" type="hidden" name="totalGRADES" value="1">

次に、これを onsubmit にバインドします

var count = $('div.clone').length;   # This counts the total number of boxes
$('#totalGRADES').val(count);  # This updates the value of the hidden input
于 2013-05-30T04:11:47.830 に答える