добавление новых полей и обновление скрытых полей

Question

Учащиеся средней школы могут добавлять классные классы ГП для каждого класса, который они завершили.
Но студенты должны повторно отправить форму, если они хотят добавить несколько лет обучения.
Я хочу разрешить им добавлять новые поля внутри одной и той же формы с помощью сценария jQuery.
Я нашел несколько онлайн, но они не обращаются к моим потребностям; Я должен добавить числа к именам полей, например classYEAR1, classYEAR2, gpa1, gpa2 каждый раз, когда пользователь добавляет коробку. И общее количество записей должно быть добавлено в поле totalGRADES. В противном случае мои задние коды не работают ...
Интересно, сумел ли я правильно объяснить это, я пытался сделать это с сегодняшнего утра ....

С нетерпением жду вашей помощи.

   <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>  

Answer 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 

Answer 2

Следующий код предполагает, что у вас есть какие-то добавить кнопку с идентификатором, просто изменить название «AddButton» на то, что идентификатор кнопки вы используете для добавления полей.

$('#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); 
}); 

Первая строка добавляет прослушиватель действий к кнопке добавления, которая запускает функцию внутри нее при нажатии. Следующие две строки выбирают текущее количество записей и увеличивают их на единицу. Следующая строка после этого добавляет html-код к элементу fieldset и заменяет этот увеличивающийся счетчик, когда это необходимо для установки атрибутов имени. Вторая в последнюю строку обновляет скрытое поле totalGrades на странице с новым счетчиком.

Возможно, существует более элегантное решение, которое не требует жесткого кодирования HTML-кода в javascript с использованием .clone() или тому подобного, но это быстрое и грязное решение.