How to allow user to add another input row that submits to a php file

Question

I made a simple GPA (grade point average) calculator and I am just playing around with some stuff and would really like to know how to allow the user to add rows as they please. The best example that I could find of someone doing this is at this website: http://gpacalculator.net/high-school-gpa-calculator/

I think I might understand when the user clicks the button, a jquery function could add a row but how do i get it so the name of the input element is different every time someone adds a row. How will the php file know the name of the $_POST['someName'].

So question in short: How do I add a row using jquery, and then submit that form to a php file so it is different than the pre-made rows.

Just in case you need to know, I store the values that are sent to the php file in variables. and then enter them into the formula that calculates the GPA.

EDIT HERE IS CODE FOR TABLE:

<table>
    <form id = "myform" name = "myform" method = "POST" action = "">
        <tr> 
            <th> Grade in test </th> 
            <th> Weight of grade </th> <br />
         </tr>
        <tr> <td><input type = "text" name = "grade1" /> </td> <td> <input type = "text" name = "weight1"  /> </td> </tr>
        <tr> <td><input type = "text" name = "grade2" /> </td> <td> <input type = "text" name = "weight2"  /> </td> </tr>
        <tr> <td><input type = "text" name = "grade3" /> </td> <td> <input type = "text" name = "weight3"  /> </td> </tr>
        <tr> <td><input type = "text" name = "grade4" /> </td> <td> <input type = "text" name = "weight4"  /> </td> </tr>
        <tr> <td><input type = "text" name = "grade5" /> </td> <td> <input type = "text" name = "weight5"  /> </td> </tr>
        <tr> <td><input type = "text" name = "grade6" /> </td> <td> <input type = "text" name = "weight6"  /> </td> </tr>
        <tr> <td><input type = "text" name = "grade7" /> </td> <td> <input type = "text" name = "weight7"  /> </td> </tr>
        <tr> <td><input type = "text" name = "grade8" /> </td> <td> <input type = "text" name = "weight8"  /> </td> </tr>
        <tr> <td><input type = "text" name = "grade9" /> </td> <td> <input type = "text" name = "weight9"  /> </td> </tr>
        <tr> <td><input type = "text" name = "grade10" /> </td> <td> <input type = "text" name = "weight10"  /> </td> </tr>
        <tr> <td><input type = "text" name = "grade11" /> </td> <td> <input type = "text" name = "weight11"  /> </td> </tr>
        <tr> <td><input type = "text" name = "grade12" /> </td> <td> <input type = "text" name = "weight12"  /> </td> </tr>

<tr> 
  <td> <div id = "submitButton">
          <input type = "submit" value = "SUBMIT"  style = " font-family:'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; padding: 10px;border: none; color: white; background-color: #0499ff; width: 100%; font-size: 13px; border-radius: 5px;""/></div></td> <td> <input type = "reset"  /> </td></tr>

    </form>
    </table>
     <div id = "results2"></div>
</div>

AND THEN THE CODE IN PHP FILE CUT DOWN TO THE INITIAL VARIABLES:

/* GRADES VARS */
$grade1 = $_POST['grade1'];
$grade2 = $_POST['grade2'];
$grade3 = $_POST['grade3'];
$grade4 = $_POST['grade4'];
$grade5 = $_POST['grade5'];
$grade6 = $_POST['grade6'];
$grade7 = $_POST['grade7'];
$grade8 = $_POST['grade8'];
$grade9 = $_POST['grade9'];
$grade10 = $_POST['grade10'];
$grade11 = $_POST['grade11'];
$grade12 = $_POST['grade12'];


/* GRADE WEIGHT VARS */
$weight1 = $_POST['weight1'];
$weight2 = $_POST['weight2'];
$weight3 = $_POST['weight3'];
$weight4 = $_POST['weight4'];
$weight5 = $_POST['weight5'];
$weight6 = $_POST['weight6'];
$weight7 = $_POST['weight7'];
$weight8 = $_POST['weight8'];
$weight9 = $_POST['weight9'];
$weight10 = $_POST['weight10'];
$weight11 = $_POST['weight11'];
$weight12 = $_POST['weight12'];

THANKS!

Answer 1

So basically you need to use field names as an array so take this example:

<input type="text" name="someName[]" value="0" />
<input type="text" name="someName[]" value="2" />
<input type="text" name="someName[]" value="4" />
<input type="text" name="someName[]" value="6" />

When you do a for submit and post the values to the server you will be able to access them with PHP as an array like so:

echo $_POST['someName'][0]; // outputs 0
echo $_POST['someName'][1]; // outputs 2
echo $_POST['someName'][2]; // outputs 4
echo $_POST['someName'][3]; // outputs 6

Now since you won't know how many rows there are you can loop over it:

foreach($_POST['someName'] as $someName){
    echo $someName; //will output the value 0/2/4/6 depending on the iteration
}

When adding the button with javascript you just need to make sure the name is the same and with brackets:

$('#addButton').click(function(){
    $('.container').append('<input type="text" name="someName[]" value="someNumber" />');
});

As long as you have that and inputs are inside of form tag that can be submitted this will work.

Edit so based on the code you added to your initial answer I would recommend taking advantage of arrays in PHP.

So lets say you use the inputs like I explained above (by the way this can be used on any HTML element that can be posted to the backend [checkboxes, inputs, textareas, selects, etc...]). You could do this:

$grades = array();
foreach($_POST['grade'] as $g){
    $grades[] = $g; // add grade from each input to the array
}

// then you can manipulate the data through looping through it.
foreach($grades as $grade){
    // do something here with each grade...whether it be manipulating it
    // or adding it another array with some changes whatever.
}

This should allow you to clean up your code and you can do the same thing with your weights.

Answer 2

::::::::EDIT AFTER LOOKING AT CODE::::::::

You are going about this all wrong with you're code. HOWEVER if you'd like to get it working using the existing code try something like this:

change

<tr> <td><input type = "text" name = "grade12" /> </td> <td> <input type = "text" name = "weight12"  /> </td> </tr>

to

<tr id="last"> <td><input type = "text" name = "grade12" /> </td> <td> <input type = "text" name = "weight12"  /> </td> </tr>

then jQuery would look something like this:

$("#add-button").click(function() {
      $('#last').append("<tr><td><input type = \"text\" name = \"customgrades[\]\" /> </td> <td> <input type = \"text\" name = \"customweight[\]\"  /> </td> </tr>");
    });

then do a button or link Add a grade

Once you submit the form, on the php side of things

$_REQUEST[customgrades];
$_REQUEST[customweight];

OR if your elitist friend on the internet want's to chastise you for using $_REQUEST even though in this application there is no reason why you can't use it you can use:

$_POST[customgrades];
$_POST[customweight];

Those two variables will hold arrays with the associated data.