Unable to collect data from additional textbox created by javascript

Question

I'm trying to collect data entered inside textboxes wrapped in div within a form.I'm using session to gather an array of data passed by the submit button. However it only captures the very first row of data. I believe data entered in textboxes created by javascript not recognised?

HTML Entry 1

   <input type="text" name="myInputs_d[]" size='5' style='margin:4px;'>D(mm)
   <input type="text" name="myInputs_d1[]" size='5' style='margin:4px;'>D1(mm)
   <input type="text" name="myInputs_bags[]" size='5' style='margin:4px;'>Bags
   <input type="text" name="myInputs_carton[]" size='5' style='margin:4px;'>Cartons

    </div>
    <input type="submit" value="submit" name="submit">
    </form>    
  <input type="button" value="Add another text input"  onClick="addInput('dynamicInput');">

javascript to create multiple textboxes

<script>
var counter = 1;
var limit = 10;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " <input type='text' name='myInputs_d[]' size='5' style='margin:5px;'>D(mm)<input type='text' name='myInputs_d1[]' size='5' style='margin:5px;'>D1(mm)<input type='text' name='myInputs_bags[]' size='5' style='margin:5px;'>Bags<input type='text' name='myInputs_carton[]' size='5' style='margin:5px;'>Cartons";
          document.getElementById(divName).appendChild(newdiv);

          counter++;
     }
}
</script>

Php to echo all the data entered

$_SESSION['myInputs_all'][]=array($_POST["myInputs_d"],$_POST["myInputs_d1"],$_POST["myInputs_bags"],$_POST["myInputs_carton"]);
print_r($_SESSION['myInputs_all']);
foreach ($myInputs_all  as $eachInput) 
{
  echo $eachInput . "<br>";

}

I might have entered three sets of records ,but when I print_r($_SESSION['myInputs_all']);..... it only shows the first record like this.

Array ( [0] => Array ( [0] => 10 ) [1] => Array ( [0] => Array ( [0] => 10 ) [1] => Array ( [0] => 10 ) [2] => Array ( [0] => 20 ) [3] => Array ( [0] => 20 ) )

check only $_SESSION in print_r function like this print_r($_SESSION) — Munshi Azhar
– Munshi Azhar, Commented Oct 17, 2014 at 2:56
i don't see anything wrong in this, unless to tried to just input one row — Kevin
– Kevin, Commented Oct 17, 2014 at 2:59
@MunshiAzhar, it displays all the session variable but the used in the page.However for the textbox item still one row only it shows — Kalaivani Nair
– Kalaivani Nair, Commented Oct 17, 2014 at 3:13
@Travesty3 , it displays all the POST variable but the used in the page.However for the textbox item still one row only it shows — Kalaivani Nair
– Kalaivani Nair, Commented Oct 17, 2014 at 3:13

Munshi Azhar · Accepted Answer · 2014-10-17 03:19:34Z

1

Try out this code

JavaScript:

var counter = 1;
var limit = 10;
function addInput(divName){

 if (counter == limit)  {
      alert("You have reached the limit of adding " + counter + " inputs");
 }
 else {
    var newDiv = document.createElement('div');
    var stringInput = "Entry " + (counter + 1) + " <input type='text'           name='myInputs_d[]' size='5' style='margin:5px;'>D(mm)<input type='text' name='myInputs_d1[]' size='5' style='margin:5px;'>D1(mm)<input type='text' name='myInputs_bags[]' size='5' style='margin:5px;'>Bags<input type='text' name='myInputs_carton[]' size='5' style='margin:5px;'>Cartons";
    newDiv.innerHTML = stringInput;
    document.getElementById(divName).appendChild(newDiv);
    counter++;
 }
}

Your HTML should look like this. ( Add form tag and submit button )

<form name="test" method="post" action="">
<div id="dynamicInput">

Entry 1

<input type="text" name="myInputs_d[]" size='5' style='margin:4px;'>D(mm)
<input type="text" name="myInputs_d1[]" size='5' style='margin:4px;'>D1(mm)
<input type="text" name="myInputs_bags[]" size='5' style='margin:4px;'>Bags
<input type="text" name="myInputs_carton[]" size='5' style='margin:4px;'>Cartons

</div>

<input type="button" value="Add another text input"  onClick="addInput('dynamicInput');">
<input type="submit" name="submit" value="Submit"  />
</form>

and in Last your php code should look like this:

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

$_SESSION['myInputs_all'] = array($_POST["myInputs_d"],$_POST["myInputs_d1"],$_POST["myInputs_bags"],$_POST["myInputs_carton"]);

print_r($_SESSION['myInputs_all']);
echo "<br>";
foreach( $_SESSION['myInputs_all'] as $all_inputs ){

    foreach( $all_inputs as $inputs ){
        echo $inputs.'<br>';
    }

}
}

answered Oct 17, 2014 at 3:19

Munshi Azhar

3231 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kalaivani Nair Over a year ago

Well my html code already has form tag, I just replace my javascript and php as yours but it still displays only one row

Munshi Azhar Over a year ago

I studied your code and I found that you are setting your session variable as array and your POST variables are also in array means that your session variable stores multidimensional array. so that first I loop out the session variable and than loop out your POST variables which are in session's array.

Kalaivani Nair Over a year ago

it works ..but how to make the foreach echo set of row by row.. I mean to display the first 4 columns of data and then following the next.

Munshi Azhar Over a year ago

For displaying data row by row can try below code $counter = count( $_POST['myInputs_d']); and your for and foreach loop like this. for( $c = 0; $c < $counter; $c++ ){ foreach( $myInputs_all as $all_inputs ){ echo $all_inputs[$c].' '; } echo '<br>'; }

Rima · Accepted Answer · 2014-10-17 03:32:13Z

0

Your loop is not properly iterating over all elements, here is my suggestion:

for($i = 0; $i < count($myInputs_all); ++$i) {
    for($j = 0; $j < (count($myInputs_all[$i])-1); ++$j) {
        for($k = 0; $k < 4; ++$k) {
            print "i:$i; j:$j; k:$k";
            print $myInputs_all[$i][$k][$j] . "<br>";
        }
    }
}

answered Oct 17, 2014 at 3:32

Rima

1,8511 gold badge15 silver badges12 bronze badges

2 Comments

Kalaivani Nair Over a year ago

i tried this but doesn't echo anything,//for the additional info starts $_SESSION['myInputs_all'] = array($_POST["myInputs_d"],$_POST["myInputs_d1"],$_POST["myInputs_bags"],$_POST["myInputs_carton"]); for($i = 0; $i < count($_SESSION['myInputs_all']); ++$i) { for($j = 0; $j < (count($_SESSION['myInputs_all'][$i])-1); ++$j) { for($k = 0; $k < 4; ++$k) { print "i:$i; j:$j; k:$k"; print $_SESSION['myInputs_all'][$i][$k][$j] . "<br>"; } } }//for the additional info ends

Munshi Azhar Over a year ago

I tried your loop but it generate many notices for undefined index.

Collectives™ on Stack Overflow

Unable to collect data from additional textbox created by javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related