Fourierstudent Fourierstudent - 2 months ago 7
PHP Question

Creating inputs in function, or any other method (Javascript)

I'm trying to make something that makes it easier to write out a matrix/matrices.
You start with getting two number inputs for the dimensions of the matrix. And after that you "submit" the numbers and out comes several input boxes.

How do you write this code? Is it possible to do it in another function?

I was thinking of having the "submit" button have a validification to see if numbers are real, and if they are the function continues with for loops on how to "write" out the number boxes.

This is what I got right now:

function validate(){
var num;
num = document.getElementById("numberbox").value;

var myForm = document.getElementById('payForm'); //
while(myForm.hasChildNodes()){
myForm.removeChild(myForm.firstChild);
}


myForm = document.createElement("form");
myForm.setAttribute("method","post");
myForm.setAttribute("action","processChecking.php");

if(isNaN(num) || num<1){
document.getElementById("output").innerHTML = "invalid number!";
document.getElementById("numberbox").value = '';
} else {
document.getElementById("output").innerHTML = "number validated!";
array(num);
for (var i = 0; i <= num; i++) {
var input = document.createElement('input');
input.type = 'text';
input.name = 'myInput_' + i;
input.id = 'myInput_' + i;
myForm.appendChild(input);
}
}
}





<body>
<table>
<tr>
<td>
<p>
Enter number for how many number boxes you want:<br>
<input id="numberbox" type="number">
<button type="button" onclick="validate()">Validate</button>
<br>
<p id="output"></p>
<br>
</p>
</td>
<td style="text-align:right;">
<p id="payForm">
</p>
</td>
</tr>
</table>
</body>

Answer

Here is what I made from your question so far. If it is on track, then we can build upon it.

function createTable() {
  var num_rows = document.getElementById('rows').value;
  var num_cols = document.getElementById('cols').value;
  var theader = '<table border="1">\n';
  var tbody = '';

  for (var i = 0; i < num_rows; i++) {
    tbody += '<tr>';
    for (var j = 0; j < num_cols; j++) {
      tbody += '<td>';
      tbody += '<input type="number">'
      tbody += '</td>'
    }
    tbody += '</tr>\n';
  }
  var tfooter = '</table>';
  document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
<form name="tablegen">
  <label>Input number of rows :
    <input type="number" name="rows" id="rows" />
  </label>
  <br />
  <label>Input number of columns :
    <input type="number" name="cols" id="cols" />
  </label>
  <br/>
  <input name="generate" type="button" value="Create Table!" onclick='createTable();' />
</form>

<div id="wrapper"></div>

Comments