how to solve theproblem with saving the data in an appended textbox

Question

please help me out, i use isset to check if the index is defined but instead of saving the value of the textbox it stores 0.how shoul i do it? cause if i wont check if the index is defined ,when i only fill out one textbox it will throw an error, but if i fill out all five it works fine. please take a look at y code, the variables in javascript is used for its inout name, the count is for the stop adding of input text when it reach 5 HTML and PHP

<form class="form-horizontal" method= "POST">
<div class="control-group">
    <div class="inc">
        <div class="controls">
            <button style="margin-left: 50px" class="btn btn-info" type="submit" id="append" name="append">
            Add Textbox</button>
            <br>
            <br>
        </div>
    </div>
    <input type="submit" class="btn btn-info" name="submit" value="submit"/> 
</div>
<?php
$host = "localhost";
$dbname = "lala";
$user = "root";
$pass = "";
$conn = new PDO("mysql:host=$host; dbname=$dbname", $user, $pass);
if(isset($_POST['submit'])){
    for($i=1; $i<=5; $i++){
        if(isset($_POST["textbox$i"]) && $_POST["textbox$i"] !=""){ 
        $sasa = $_POST["textbox$i"];            
        $sql="INSERT into sasa (sasa) values('$sasa')";

        echo $sql."<br>";

$q=$conn->query($sql);
            }

    }   
}
?>

javascript;

<script type="text/javascript">
                    jQuery(document).ready( function () {
                        var val = 1;
                        var me = 0;
                        var count = 0;
    $("#append").click( function() {
        if(count<5){
        if(me==0){
            val=1;
            me = me + 1;
            count = count +1;
    $(".inc").append("<div class='controls'><input class='form-control' type='text' name='textbox"+ val +"'  placeholder='textbox"+ val +"'><a href='#' class='remove_this btn btn-danger'>remove</a> <br> <br> </div");
    return false;
        }
        else{
            val = val  + 1;
            me = me + 1;
            count = count +1;
             $(".inc").append("<div class='controls'><input class='form-control' type='text' name='textbox"+ val +"'  placeholder='textbox"+ val +"'><a href='#' class='remove_this btn btn-danger'>remove</a> <br> <br> </div");
    return false;

        }
        }
        else{

        }
    });

jQuery(document).on('click', '.remove_this', function() {
    me = me - 1;
    count = count - 1;
    jQuery(this).parent().remove();
    return false;
    });

});

Possible duplicate of [$\_post inside a loop](http://stackoverflow.com/questions/34859653/post-inside-a-loop) — CarlosCarucce, Jan 18 '16 at 18:26
yeah but this time its the about checking if the index is undefined and saving it — Anecito Alima Santillan, Jan 18 '16 at 18:29

score 0 · Answer 1 · answered Jan 18 '16 at 18:54

both your JS and PHP are wrong. You need to post an array rather than naming each textbox. In other words, your textbox names should be something like name='textbox[]'. Redo it like this:

JS:

$(document).ready(function () {

    $("#append").click(function (e) {
        e.preventDefault();
        var textboxes = $(".textbox").length;
        if (textboxes < 5) {
            $(".inc").append("<div class='controls'>\
                                  <input class='textbox form-control' type='text' name='textbox[]' >\
                                  <a href='#' class='remove_this btn btn-danger'>remove</a>\
                               </div>");
        }
    });

    $(document).on('click', '.remove_this', function (e) {
        e.preventDefault();
        $(this).parent().remove();
    });
});

PHP:

if (isset($_POST['submit'])) {

    if (!empty($_POST['textbox'])) {

        $host = "localhost";
        $dbname = "lala";
        $user = "root";
        $pass = "";
        $conn = new PDO("mysql:host=$host; dbname=$dbname", $user, $pass);

        $textboxes = $_POST['textbox'];
        foreach ($textboxes as $value) {
            $sql = "INSERT into sasa (sasa) values('$value')";
            echo $sql . "<br>";
            $q = $conn->query($sql);
        }
    }
}

what if i have to append two textbox and the values should be saved in one row but different attributes how should i do it? — Anecito Alima Santillan, Jan 19 '16 at 00:11
for the textbox[] it should be saved in sasa attribute and for the box[] it should be saved in sasa1 ,(on the same row) — Anecito Alima Santillan, Jan 19 '16 at 00:22

score 0 · Answer 2 · answered Jan 19 '16 at 16:12

Ok, it seems like your goal is to send a multidimensional array to PHP. In other words, you want PHP to be able to receive something in this format:

array (size=2)
  0 => 
    array (size=2)
      'text' => string 'some text' (length=9)
      'box' => string 'some box' (length=8)
  1 => 
    array (size=2)
      'text' => string 'some text' (length=9)
      'box' => string 'some box' (length=8)

In order for you to achieve this, you need to create a function that indexes your input textboxes when you create them and when you delete them so that you can end up with inputs with indexed name attributes like so:

<input name="data[0][text]">
<input name="data[0][box]">

<input name="data[1][text]">
<input name="data[1][box]">

With that said, this is the JS I would use:

   <script>
        $(document).ready(function () {

            function re_index($cont) {
                $cont.find(".textbox_group").each(function (i) {
                    $(this).find('.text').attr("name", "data[" + i + "][text]");
                    $(this).find('.box').attr("name", "data[" + i + "][box]");
                });
            }

            $("#append").click(function (e) {
                e.preventDefault();
                var $cont = $(".inc");
                if ($(".textbox_group").length < 5) {
                    $cont.append("<div class='controls textbox_group'>\
                                      <input class='text form-control' type='text' >\
                                      <input class='box form-control' type='text' >\
                                      <a href='#' class='remove_this btn btn-danger'>remove</a>\
                                   </div>");
                    re_index($cont);
                }
            });

            $(document).on('click', '.remove_this', function (e) {
                e.preventDefault();
                $(this).parent().remove();
                var $cont = $(".inc");
                re_index($cont);
            });
        });
    </script>

Then in PHP you can capture the data and iterate to insert it with SQL:

$data = $_POST['data'];
foreach ($data as $input) {
   var_dump($input['text']);
   var_dump($input['box']);
}

how to solve theproblem with saving the data in an appended textbox

2 Answers2