Get the value from the form and insert that value in the table by using JavaScript

Question

I have created simple form and table.. So I need to add values from the form. I have created the code but it is not working.

<html>
<body>
    <script>
        function clickFunction(){
            document.getElementByName('inputvalue').innerHTML = document.getElementByName('name');
            }
    </script>
    <form>
        Name: <input type="text" name="name">
        <input type="submit" value="Done" onclick="clickFunction()">
    </form>
    <table border="1">
        <tr><td>Data input: </td><td><label name="inputvalue" > null </label></td></tr>
    </table>
</body>
</html>

Answer 1

There are few things you have to fix first:

It should be document.getElementsByName , you are missing a 's'.
Since, the submit is in a form element. Once you click it, it will submit the form. So, you should stop it by using return false in the function.
To get the value from the input box, you should add 'value' after document.getElementByName('name') . it should be document.getElementByName('name').value .
I have added e.preventDefault . In-case, it tries to submit. In that case, there is a slight change in HTML.
... <input type="submit" value="Done" onclick="clickFunction(event)"> ...

The corrected source code: https://jsfiddle.net/gy03xz4b/4/

HTML is fine, the js will change a bit:

 function clickFunction() {
   document.getElementsByName('inputvalue')[0].innerHTML = document.getElementsByName('name')[0].value;
   return false;
 }

Hope that helps!

Refers:

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
http://www.irt.org/script/155.htm (What does 'return false' do?)
https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault (e.preventDefault)

Get the value from the form and insert that value in the table by using JavaScript

Question

1 answers

solution1
2 ACCPTED 2016-02-01 01:43:55

Get the value from the form and insert that value in the table by using JavaScript

Question

1 answers

solution1 2 ACCPTED 2016-02-01 01:43:55

solution1
2 ACCPTED 2016-02-01 01:43:55