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
– DannyBoi, Commented Sep 10, 2016 at 8: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
– Fourierstudent, Commented Sep 10, 2016 at 13:52
@Fourierstudent......I didnt quite get the second part of your question. What is the submit button really supposed to do. — DannyBoi
– DannyBoi, Commented Sep 10, 2016 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
– Fourierstudent, Commented Sep 10, 2016 at 14:21

DannyBoi · Accepted Answer · 2016-09-10 14:00:06Z

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, 2016 at 14:00

answered Sep 10, 2016 at 8:31

DannyBoi

6541 gold badge7 silver badges26 bronze badges

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

3 Comments

Fourierstudent Over a year ago

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 Over a year ago

Was thinking like the part I had before with while loop that removes earlier boxes

DannyBoi Over a year ago

@Fourierstudent.....Check it now.....here is where I copied and edited it from stackoverflow.com/a/8187521/6395782 , for your reference

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related