Taking data from the form and put it in the table row by using JavaScript.

Question

I have created form. now I need to take input data into table. So I have created the code but it does not working. In here, I take the input-data by using id = "input1" then I click on the submit button and it will call for myfunction() function. That function will show the data in the table. But it not working.

<html>
<head>
    <title>
    </title>
</head>
<body>
<div id="form1">
</div>
<div id="table1">

</div>
<script>
            var f = document.createElement("form");

            var i = document.createElement("input"); 
            i.setAttribute('type',"text");
            i.setAttribute('name',"input1");
            i.setAttribute('id',"input1");

            var s = document.createElement("input");
            s.setAttribute('type',"submit");
            s.setAttribute('value',"Submit");
            s.setAttribute('id',"done")

            f.appendChild(i);
            f.appendChild(s);


            document.getElementById("form1").appendChild(f);
</script>   
<script>
    document.getElementById("done").onclick = function() {myFunction()};

    function myFunction() {
            var t = document.createElement("table");
            t.setAttribute('border',"1");

            var row = document.createElement("tr"); 
            var cell = document.createElement("td");
            var cellText = document.getElementById("input1");

            cell.appendChild(cellText);
            row.appendChild(cell);
            t.appendChild(row);

            document.getElementById("table1").appendChild(t);
    }

</script>
</body>
 </html>

whats the output now?

Anoop LL
– Anoop LL

2016-01-30 09:04:34 +00:00
Commented Jan 30, 2016 at 9:04 — Anoop LL
– Anoop LL, Commented Jan 30, 2016 at 9:04

Nikhil Aggarwal · Accepted Answer · 2016-01-30 09:04:27Z

2

You need to update your code to following

document.getElementById("done").onclick = function() {
       event.preventDefault();
       myFunction()
};

For reference - http://plnkr.co/edit/ZgMWu6tCb95R9TEAQKbi?p=preview

edited Jan 30, 2016 at 9:04

answered Jan 30, 2016 at 8:58

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

Comments

Anoop LL · Accepted Answer · 2016-01-30 09:07:56Z

0

var s = document.createElement("input");
        s.setAttribute('type',"button");
        s.setAttribute('value',"Submit");
        s.setAttribute('id',"done");

Change input type to button, as you are showing the data in a table you dont need submit button, if you are giving submit button it will automatically try to call the action which is not defined. If you want o use submit then add event.preventDefault(); to the myFunction()

answered Jan 30, 2016 at 9:07

Anoop LL

1,5752 gold badges23 silver badges36 bronze badges

Comments

javaDeveloper · Accepted Answer · 2016-01-30 09:12:13Z

You should change the type of button from submit to button. Also if you just need the text inside the input box take the value instead of the element.

 <html>
    <head>
        <title>
        </title>
    </head>
    <body>
    <div id="form1">
    </div>
    <div id="table1">
    <table id="myTable" border="1"></table>
    </div>
    <script>
                var f = document.createElement("form");

                var i = document.createElement("input"); 
                i.setAttribute('type',"text");
                i.setAttribute('name',"input1");
                i.setAttribute('id',"input1");

                var s = document.createElement("input");
                s.setAttribute('type',"button");
                s.setAttribute('value',"Submit");
                s.setAttribute('id',"done")

                f.appendChild(i);
                f.appendChild(s);


                document.getElementById("form1").appendChild(f);
    </script>   
    <script>
        document.getElementById("done").onclick = function() {myFunction()};

        function myFunction() {
                var table = document.getElementById("myTable");

                var row = table.insertRow(0);
            var cell1 = row.insertCell(0);
                var cellText = document.getElementById("input1").value;
            cell1.innerHTML = cellText;
        }

    </script>
    </body>
     </html>

Community · Accepted Answer · 2020-06-20 09:12:55Z

Try this,

You should consider a decent framework such as jQuery / Angular / ... to do these HTML manipulations

I've changed the form input type="submit" to button type="button", added .value to the cellText var, used .innerHTML to set it inside the <td>

Online Demo - https://plnkr.co/edit/ApNX7vuN31Wu0fbCR9Vh?p=preview

  <script>
    var f = document.createElement("form");

    var i = document.createElement("input");
    i.setAttribute('type', "text");
    i.setAttribute('name', "input1");
    i.setAttribute('id', "input1");

    var s = document.createElement("button");
    s.setAttribute('type', "button");
    s.innerHTML = "Click me";
    s.setAttribute('id', "done")

    f.appendChild(i);
    f.appendChild(s);


    document.getElementById("form1").appendChild(f);
  </script>
  <script>
    document.getElementById("done").onclick = function() {
      myFunction()
    };

    function myFunction() {
      var t = document.createElement("table");
      t.setAttribute('border', "1");

      var row = document.createElement("tr");
      var cell = document.createElement("td");
      var cellText = document.getElementById("input1").value;

      cell.innerHTML = cellText;
      row.appendChild(cell);
      t.appendChild(row);

      document.getElementById("table1").appendChild(t);
    }
  </script>

Collectives™ on Stack Overflow

Taking data from the form and put it in the table row by using JavaScript.

4 Answers 4

Comments

Comments

Comments

Try this,

Online Demo - https://plnkr.co/edit/ApNX7vuN31Wu0fbCR9Vh?p=preview

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Try this,

Online Demo - https://plnkr.co/edit/ApNX7vuN31Wu0fbCR9Vh?p=preview

Comments

Your Answer

Sign up or log in

Post as a guest

Related