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'].

How do I add a row using jQuery, and then submit that form to a PHP file so it is different from the pre-made rows.

Note: I store the values that are sent to the PHP file in variables, then enter them into the formula that calculates the GPA.

Code for the 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>

The code in the 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'];

I haven't really tried anything yet... I have no clue how I would go about making a jquery function that would set up a whole new row of inputs with different names each time... I have tried some things for a couple of days now but quickly erased them knowing that they weren't even close — Wp3Dev
– Wp3Dev, Commented Jan 16, 2013 at 1:06
If you do a little digging in resource tab (chrome) you can find just what it does and modify it towards your needs. — Class
– Class, Commented Jan 16, 2013 at 1:06
I made one for fun, it's gpacal.com. You can look at the source, it's not entirely finished but I just made it for friends and stuff to use. — Sam Creamer
– Sam Creamer, Commented Jan 10, 2014 at 19:16

jefffan24 · Accepted Answer · 2013-01-16 01:14:53Z

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.

CPPUIX · Accepted Answer · 2024-08-23 10:44:16Z

-1

You are going about this all wrong with your 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 you don't want to use $_REQUEST:

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

Those two variables will hold arrays with the associated data.

edited Aug 23, 2024 at 10:44

CPPUIX

2,4178 gold badges17 silver badges38 bronze badges

answered Jan 16, 2013 at 1:04

Hydra IO

1,5611 gold badge13 silver badges29 bronze badges

8 Comments

jefffan24 Over a year ago

Don't use $_REQUEST, you should know what you are expecting on the backend and should use that. What if someone set the $_GET to be customGrades and it over wrote the post variables with something malicious? YOU should never use $_REQUEST and you shouldn't use it in example code either.

jefffan24 Over a year ago

Also whats with escaping the brackets in the javascript? What you really need to be escaping is the double quotes you put for the input. Its going to end the string earlier than expected (As you can see in the syntax highlighter where it goes from red to black). You should use single quotes for holding the string here, and use double quotes for the attributes on the input. Then no escaping is needed (not even the brackets).

jefffan24 Over a year ago

One final criticism, your first 2 examples are identical...your not changing anything.

Hydra IO Over a year ago

Firstly, in this specific application, there is no reason he can't use $_REQUEST... Secondly: yes my escape was in the wrong area good catch, however you still need to escape the [] in jQuery... Thirdly: I gave him a proper example for his existing code...Lastly

jefffan24 Over a year ago

No you don't, if the brackets are in a string it treats them as standard characters, not as an array literal.

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related