添加动态输入并将数据插入MySQL

Question

I have a form which has inputs and there is a button that adds the same row underneath to insert more data if its needed. At the moment I'm not trying to insert it to my database, I just want to echo those data in a page called "f.php" but I only see the first row and I'm not be able to see the second+ rows.

<form action="forms/f.php" method="post" enctype="multipart/form-data"> 
    <tr style="height:85px; text-align:center;">
        <td><input type="text" name="hours1[]" id="hours1" /></td>
        <td><input type="text" name="hours2[]" id="hours2" /></td>
        <td><input type="text" name="durationh[]" id="durationh" /></td>
        <td><input type="text" name="hrscode[]" id="hrscode" /></td>
        <td><textarea name="remark" id="remark[]"></textarea></td>

    </tr> 
</table>
<div class="input_fields_wrap">
</div>
<script>
$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div style="height:80px;"><a href="#" class="remove_field"><img src="img/remove.png"></a><table id="dataTable" width="900" style="margin-left:25px;"><tr style="text-align:center;"><td width="70"><input type="text" name="hours1[]" id="hours1" /></td><td width="64"><input type="text" name="hours2[]" id="hours2" /></td><td width="92"><input type="text" name="durationh[]" id="durationh" /></td><td><input type="text" name="hrscode[]" id="hrscode" /></td><td><textarea name="remark" id="remark[]"></textarea></td></tr></table></div>');
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})});
</script><br />    <input type="submit" value="submit">
</form>

This is f.php code:

<?php
$hours = $_POST['hours1'];
$hours1 = $hours[0];
$hours2 = $hours[1];
echo $hours1; echo $hours2;
?>

Could you please help me with a solution to do this and tel me what I'm doing wrong here.

Many Thanks.

Answer 1

Change the name of the created input fields to hours[] instead of hours1[] and hours2[]. Then you should be able to iterate through all fields.