How to get value from JS-Generated HTML inputs in PHP using POST or GET

Question

I am making a grid of inputs using javascript. Each of these inputs has a unique name and id: "test1","test2"... I'm also able to change the style of these inputs based on their name.

var c = document.getElementById("gridOne");

function createTable() {
var table = document.createElement('table');
var rows = +document.getElementById('numRows').value;
var cols = +document.getElementById('numCols').value;
    var n = 0;
for(var r=0; r<rows; r++) {
  var tr = document.createElement('tr');
  table.appendChild(tr);
  for(var c=0; c<cols; c++) {
    if(r == 0 || c == 0 || r == rows - 1 ||c == cols - 1 ){ 
        var td = document.createElement('td');
        tr.appendChild(td);
        var inp = document.createElement('input');
        inp.setAttribute('id', 'test'+n);
        inp.setAttribute('name', 'test'+n);
        inp.setAttribute('value', n);
        inp.setAttribute('type','number');
        td.appendChild(inp);
        n++;


    } else {
        var tq = document.createElement('td');
        tr.appendChild(tq);
        tq.classList.add('inner');
        var inp = document.createElement('input');
        inp.setAttribute('type','text');
        inp.disabled = true;
        tq.appendChild(inp);
    }
  }

}
var container = document.getElementById('input_container');
container.innerHTML = '';
container.appendChild(table);
}

The HTML code that is handling and outputting the JavaScript is this

<form method="POST">
<div class="canvas" id="input_container">
<script type="text/javascript" src="js/Grid1.js"></script>
</div>
<input name="Confirm" type="submit">

When i try to access the values submitted by these inputs i'm getting an error. I'm using PHP, ive tried both GET and POST but im getting no luck.

    if (isset($_POST['Confirm'])) 
{
    $test0 =  $_POST['test0'];
    $test1 =  $_POST['test1'];
    $test2 =  $_POST['test2'];
}

My code works for everything except the dynamically generated input forms.

it is normal you have not input with the name test0 but your isset is working if you enter in the if — bormat
– bormat, Commented Feb 17, 2017 at 23:44
what is the value of rows and cols in your script use console .log or debug function of chrome — bormat
– bormat, Commented Feb 17, 2017 at 23:47

Albert221 · Accepted Answer · 2017-02-17 23:52:36Z

1

The error you are getting is actually not an error, but a notice.

Undefined index: test0 in x on line y

To avoid that you should firstly check whether these values exists, i.e.:

$test0 = isset($_POST['test0']) ? $_POST['test0'] : 'default value';

Or using PHP7 null coalescing operator:

$test0 = $_POST['test0'] ?? 'default value';

Better approach for your problem

I think that better way to handle dynamically generated fields would be to use arrays. So you should:

use [name] attribute with braces [] at the end
on the backend, iterate over that array.

So, example code might look like:

<input type="number" name="test[]">
<input type="number" name="test[]">
<input type="number" name="test[]">

and PHP:

foreach ($_POST['test'] as $test) {
    var_dump($test);
}

answered Feb 17, 2017 at 23:52

Albert221

7,8055 gold badges36 silver badges51 bronze badges

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

3 Comments

Lawl Over a year ago

how do i make the 'default value' be the user input?

Albert221 Over a year ago

Default value is when the user input isn't given.

Lawl Over a year ago

THanks! this helped a lot

Collectives™ on Stack Overflow

How to get value from JS-Generated HTML inputs in PHP using POST or GET

1 Answer 1

Better approach for your problem

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Better approach for your problem

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related