CODEWITHSUNDEEP
jquery
Efe
Efe

Reputation: 954

adding new fields and updating hidden fields

High school students can add grade GPAs for each grade that they completed.
But students need to re-submit the form, if they want to add multiple grade years.
I want to allow them to add new fields inside the same form with a jQuery script.
I found some online but they dont address to my needs; I must add numbers to the end of field names, for example classYEAR1, classYEAR2, gpa1, gpa2 everytime a user adds a box. And total # of entries should added into the totalGRADES field. Otherwise my back end codes dont work...
I wonder if I managed to explain it correctly, I have been trying to make it work since this morning....

Look forward for your help.

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

Upvotes: 0

Views: 96

Answers (2)

kevinamadeus
kevinamadeus

Reputation: 404

Adding new boxes:

First make a container to set the place to be cloned class="clone", and offer a place for new boxes to appear 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>

Then, the code below binds to a add button with a cloning function:

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

To update the totalGRADES, first add an id for easier searching

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

Then bind this to onsubmit

var count = $('div.clone').length;   # This counts the total number of boxes
$('#totalGRADES').val(count);  # This updates the value of the hidden input

Upvotes: 1

Bad Wolf
Bad Wolf

Reputation: 8349

The following code assumes that you have some kind of add button with an id, just change the "addButton" name to whatever the ID of the button you are using to add fields is.

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

The first line adds an action listener to the add button which triggers the function inside it when clicked. The next two lines fetches the current number of entries and increment it by one. The next line after that appends the html code to the fieldset element and substitutes in that incremented counter where relevant to set the name attributes. The second to last line updates the hidden totalGrades field on the page with the new count.

There is probably a more elegant solution that doesn't require you to hard code the HTML in the javascript using .clone() or the like, but this is a quick and dirty solution.

Upvotes: 1

Related Questions