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

Question

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>

@Fourierstudent..... Firstly, you mention two inputs required but the code contains only one, is it a square matrix ? Secondly, `if they are the function continues with for loops on how to "write" out the number boxes.` . What exactly do you mean by that? — DannyBoi, Sep 10 '16 at 08:23
Yea, it's supposed to be 2 inputs but I've been trying to get the first one to work and then after go with the other one. — Fourierstudent, Sep 10 '16 at 13:52
@Fourierstudent......I didnt quite get the second part of your question. What is the submit button really supposed to do. — DannyBoi, Sep 10 '16 at 14:10
The "submit" button would first check if the inputs are real numbers. I was thinking of after creating the matrix have some other buttons. One that maybe calculates the determinant, average number, inverse, etc... — Fourierstudent, Sep 10 '16 at 14:21
However, if the answer has solved your question please consider accepting it by clicking the check-mark. This indicates to the wider community that you've found a solution. — DannyBoi, Sep 10 '16 at 14:40

DannyBoi · Accepted Answer · 2016-09-10T14:00:06.483

0

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>

edited Sep 10 '16 at 14:00

answered Sep 10 '16 at 08:31

DannyBoi

636
1
7
23

This is really good! But how can I remove the old ones? Let's say when you click "create the table" several times, I want the previous table to be removed. – Fourierstudent Sep 10 '16 at 13:45
Was thinking like the part I had before with while loop that removes earlier boxes – Fourierstudent Sep 10 '16 at 13:45
@Fourierstudent.....Check it now.....here is where I copied and edited it from http://stackoverflow.com/a/8187521/6395782 , for your reference – DannyBoi Sep 10 '16 at 14:02

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

1 Answers1