Wsrtjtyk

I am trying to enter data to my database with dynamic textboxes. The dynamic textboxes are created with Javascript. When I try to send the data to my database I see that my PHP script is posting only the first row into the database

<div id="form">

  <form name="reaction" id="reaction" method="post" action="./post.php">

  //The first row is created in HTML

  <input type="text" name="firstname" id="firstname1" placeholder="Firstname" /> <br />

</div>



//The other rows are created in Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>



  $(document).ready(function(){

    var final_total_amt = $('#final_total_amt').text();

    var count = 1;



  $(document).on('click', '#add_row', function(){

    count++;

    $('#total_item').val(count);

    var html_code = '';

    html_code += '<input type="text" placeholder="Firstname'+count+'" name="firstname" id="firstname'+count+'" data-srno="'+count+'" /><br />';

  });



  $('#form').append(html_code);

</script>



<button type="submit" class="btn btn-primary" name="send">Save</button>

</form>

In the PHP script I am trying to post the multiple textboxes with:

foreach($_POST['firstname'] as $i => $item) {

  $db3 = new PDO('mysql:host=localhost;dbname=db', 'root', 'pass');

  $query3= "INSERT INTO scu_db(firstname) VALUES (:firstname)";

  $stmt3 = $db3->prepare($query3);

  $exec3 = $stmt3->execute(array(

    ':firstname'     =>  $_POST["firstname"][$i]

  ));

}

The script only posts the first row that is created in HTML to my database.

Does someone know how I can solve this?

Result of var_dump on $_POST['firstname']:

array(1) { [0]=> string(2) "1" }

Your problem was caused primarily by improperly nested HTML tags. Switch the positions of your div#form tag with your form like below

<form name="reaction" id="reaction" method="post" action="./post.php">

  <div id="form">

Remember to close out your $(document).ready() method declaration, and also place your $('#form').append(html_code) code within the scope of your $(document).on('click') event.

See below for a working sample

<?php

var_dump($_POST);

?>



<form name="reaction" id="reaction" method="post" action="">

<div id="form">

  //The first row is created in HTML

  <input type="text" name="firstname" id="firstname1" placeholder="Firstname" /> <br />

</div>



//The other rows are created in Javascript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  var final_total_amt = $('#final_total_amt').text();

  var count = 1;



  $(document).on('click', '#add_row', function(){

    count++;

    $('#total_item').val(count);

    var html_code = '';

    html_code += '<input type="text" placeholder="Firstname'+count+'" name="firstname" id="firstname'+count+'" data-srno="'+count+'" /><br />';

    $('#form').append(html_code);

  });

});

</script>



<button type="submit" class="btn btn-primary" name="send">Save</button>

<button type="button" class="btn btn-primary" id="add_row">Add Row</button>

</form>

@John in my case I had done it like this, it is working fine. It has two buttons to add and/or remove fields from the other fields. If you need this then I can send you both files in email.

 addNewRow();



$("#add").click(function(){

    addNewRow();

})



function addNewRow(){

    $.ajax({

        url : DOMAIN+"/includes/process.php",

        method : "POST",

        data : {getNewOrderItem:1},

        success : function(data){

            $("#invoice_item").append(data);

            var n = 0;

            $(".number").each(function(){

                $(this).html(++n);

            })

        }

    })

}



$("#remove").click(function(){

    $("#invoice_item").children("tr:last").remove();

})