Injecting a value into a row added using JavaScript

[mike324]

Hi.

I am using the following code to add and delete rows from a table. You can see this post for an explanation but a different question: https://www.sitepoint.com/community/t/how-to-stop-an-add-delete-table-row-script-from-deleting-the-last-row-and-how-to-limit-rows/353365/10

Main HTML

 <table id="tbl_posts" class="table">
                        <thead>
                            <tr class="course-book-rule">
                                <td colspan="5" class="course-book-heading">Attendee Details</td>
                            </tr>
                            <tr style="border: none;">
                                <td colspan="5"><textarea class="form-control rounded-0 w-100" id="requirements" name="requirements" rows="3" placeholder="Do any of the attendees you are entering have any special requirements?"></textarea></td>
                            </tr>
                            <tr>
                                <td>#</td>
                                <td>Name</td>
                                <td>Email</td>
                                <td>Job Title</td>
                                <td><a class="btn-sm btn-rounded add-record its-blue-bg white-text pr-4 pl-4" data-added="0"><i class="fas fa-plus"></i></a></td>
                            </tr>
                        </thead>

                        <tbody id="tbl_posts_body">
                            <tr id="rec-1">
                                <td><span class="sn">1</span>.</td>
                                <td><input type="text" id="attendeename" name="attendeename"></td>
                                <td><input type="email" id="attendeeemail" name="attendeeemail"></td>
                                <td><input type="text" id="attendeejobtitle" name="attendeejobtitle"></td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>

The HTML template for new rows

<div style="display:none;">

                <table id="sample_table">
                    <tr id="">
                        <td><span class="sn"></span>.</td>
                        <td><input type="text" id="attendeename" name="attendeename"></td>
                        <td><input type="email" id="attendeeemail" name="attendeeemail"</td>
                        <td><input type="text" id="attendeejobtitle" name="attendeejobtitle"</td>
                        <td><a class="btn-sm btn-rounded delete-record its-blue-bg lighten-2 pl-3 pr-3" data-id="0"><i class="fas fa-minus"></i></a></td>
                    </tr>
                </table>
 
           </div>

And the JS:

<script type="text/javascript">
    $(document).ready(function(){

    jQuery(document).delegate('a.add-record', 'click', function(e) {
        var rows = $( "#tbl_posts_body tr" ).length;
        if (rows >= 10) {
            return;
        }
        e.preventDefault();    
        var content = jQuery('#sample_table tr'),
        size = jQuery('#tbl_posts >tbody >tr').length + 1,
        element = null,    
        element = content.clone();
        element.attr('id', 'rec-'+size);
        element.find('.delete-record').attr('data-id', size);
        element.appendTo('#tbl_posts_body');
        element.find('.sn').html(size);
   });

    jQuery(document).delegate('a.delete-record', 'click', function(e) {
        e.preventDefault();    
        var id = jQuery(this).attr('data-id');
        var targetDiv = jQuery(this).attr('targetDiv');
        jQuery('#rec-' + id).remove();
        //regenerate index number on table
        $('#tbl_posts_body tr').each(function(index){
        $(this).find('span.sn').html(index+1);
    });
        return true;
    });

  });
</script>

The code works well. BUT, I’m looking now at pulling the form values out of $_POST, I have an issue. The html that the JS copies to create each new added row is static html, a static template. It does NOT contain a unique name attribute for each input element.

So, if I add two extra rows alongside the original row, all three name elements for jobtitle (say) are just attendeejobtitle. What I need is attendeejobtitle_1, attendeejobtitle_2, etc.

How can I achieve this? (Please bear in mind I am just beginning to learn JS.)

Cheers

[mabismad]

Use arrays for the field names - name="attendeename[]"This will cause the values from the multiple sets of fields to be submitted as arrays that you can test/loop over in the php code.

[mike324]

mabismad,

Thanks for your response.

I’m using this HTML:

<tbody id="tbl_posts_body">
  <tr id="rec-1">
    <td><span class="sn">1</span>.</td>
    <td><input type="text" id="attendeename" name="attendeename[]" required></td>
    <td><input type="email" id="attendeeemail" name="attendeeemail[]" required></td>
  </tr>
</tbody>

and trying something like this to get these values:

$names = $_POST['attendeename'];
$emails = $_POST['attendeeemail'];

$message .= "<table>";
foreach ($emails as $email) {
  echo $message .= "<tr>$name<td></td><td>$email</td></tr>";
}
$message .= "</table>";

Works well for listing the emails from each row.

I’m stuck with how to get the name as well.
I have output like:
email1
email2

I want output like

name1 email1
name2 email2

Not sure how to loop over two arrays and output data from each on the same line.

[mabismad]

The array key/index values are the same for each form field within a set. From 0 to whatever the highest value is. You can see what the data is using print_r($_POST);

You would loop to get each successive key, then access that element in each field array.

foreach(array_keys($_POST['attendeename']) as $key)
{
    // access the successive values via $_POST['attendeename'][$key], $_POST['attendeeemail'][$key], ...
}

[mike324]

mabismad,

Thank you for your reply. That works perfectly. Array keys? I’m off to the PHP Manual. “Every day’s a school day.”

Cheers