0

I am building a PHP email form, this form when submitted will send an email with a link to a CSV file on the server with the submitted information. I am half way through the form when I've hit a a bit of a block.

The client wants to have an "Add row" button to add additional rows to one section of the form. It would be OK if this add row button just added one individual input box but the "Add Row" is essentially adding a section of text boxes. This section has 5 textarea boxes in it. I'm really unsure how to achieve this!

This is the HTML:

<tr>
    <td><textarea name="examtype" id="examtype"><?php echo $_SESSION['examType']; ?></textarea></td>
    <td><textarea name="examdate" id="examdate"><?php echo $_SESSION['examDate']; ?></textarea></td>
    <td><textarea name="examsubject" id="examsubject"><?php echo $_SESSION['examSubject']; ?></textarea></td>
    <td><textarea name="examgrade" id="examgrade"><?php echo $_SESSION['examGrade']; ?></textarea></td>
</tr>

Then I am just assigning session variables to them all. Not sure how I approach this...

Thanks in advance!

kala233
  • 549
  • 4
  • 20

1 Answers1

0

I assume you are using jquery, if not i recommend it so the following code works properly.

This is NOT TESTED, but the solution of your problem should look like this:

<script>

var additional_rows = 0;

$(document).ready(function(){
    $('#button_add').click(function() {
        additional_rows = additional_rows + 1;
        $('#add_rows').val(additional_rows);

        $('#myTable').append('<td><textarea name="examtype_' + additional_rows + '" id="examtype_' + additional_rows + '"></textarea></td>
                              <td><textarea name="examdate_' + additional_rows + '" id="examdate_' + additional_rows + '"></textarea></td>
                              <td><textarea name="examsubject_' + additional_rows + '" id="examsubject_' + additional_rows + '"></textarea></td>
                              <td><textarea name="examgrade_' + additional_rows + '" id="examgrade_' + additional_rows + '"></textarea></td>');
    });
});
</script>

<form action='#' method="post">
    <input name="add_rows" id="add_rows" type="hidden" value="0" />
    <table id="myTable">
        <tr>
            <td><textarea name="examtype_0" id="examtype_0"><?php echo $_SESSION['examType']; ?></textarea></td>
            <td><textarea name="examdate_0" id="examdate_0"><?php echo $_SESSION['examDate']; ?></textarea></td>
            <td><textarea name="examsubject_0" id="examsubject_0"><?php echo $_SESSION['examSubject']; ?></textarea></td>
            <td><textarea name="examgradev_0" id="examgrade_0"><?php echo $_SESSION['examGrade']; ?></textarea></td>
        </tr>
    </table>
    <button type="submit">Submit</button>
    <button id="button_add">Add Row</button>
</form>

Dont forget to enumerate/replace the generated textareas names & id's

Basti Funck
  • 1,400
  • 17
  • 31
  • Hi, this is great for adding the new rows. Saved me from doing it thanks. However I think the main issue i'm going to have is using PHP to grab the information depending on how many rows the user adds. There may be 2 and there may be 200... – kala233 Sep 19 '13 at 19:00
  • Then count the amount of added rows and put the value into a hidden input so it will be submitted with the form and you can get the amount via PHP $_POST, i have edited the code example (still not tested) – Basti Funck Sep 20 '13 at 08:52