CODEWITHSUNDEEP
javascripthtmlbuttoninputclick
J.Jay
J.Jay

Reputation: 249

Get the user input on text field on button click

I'm trying to let the user input a 3-digit number on a text field that appears when "Create Node" button is clicked. Then, print the value of the text field(which is what user keyed in earlier) when "Add" button is pressed. I'm having troubles reading the value from the text field on button click. I'd also like to make sure that the user can only input a 3-digit number and alert "Error" when anything else is entered.

The following is my html tags:

  <div id="UI"><b>User Interface</b>
        <br>
        <br>
        <form id="form">
            <input type="button" value="Create Node" id="button">
            <br>
        </form>
    </div>

Here's my js codes in my "script" tag:

 document.getElementById("button").addEventListener('click', function () {
    var text = document.createElement('input');
    text.setAttribute("type", "text");
    text.setAttribute("id", "nodeID");
    text.setAttribute("maxlength", "3");
    text.setAttribute("size", "6");
    text.setAttribute("placeholder", "Enter Node ID");
    var form = document.getElementById("form");
    form.appendChild(text);
    var submit = document.createElement('BUTTON');
    var t = document.createTextNode("Add");
    submit.appendChild(t);
    submit.setAttribute("id", "subButton");
    $('#form').append(submit);
});
document.getElementById("subButton").addEventListener('click', function () {
    var x = document.getElementByID("nodeID");
    console.log(x.value);
});

Here's what I've done so far on jsfiddle.

Upvotes: 0

Views: 6288

Answers (3)

Abbas Amiri
Abbas Amiri

Reputation: 3204

I have altered your code and the result is:

 document.getElementById("button").addEventListener('click', function () {
    var text = document.createElement('input');
    text.setAttribute("type", "text");
    text.setAttribute("id", "nodeID");
    text.setAttribute("maxlength", "3");
    text.setAttribute("size", "6");
    text.setAttribute("placeholder", "Enter Node ID");
    var form = document.getElementById("form");
    form.appendChild(text);
    var submit = document.createElement('BUTTON');
    var t = document.createTextNode("Add");
    submit.appendChild(t);
    submit.setAttribute("id", "subButton");
    submit.setAttribute("type", "button");
    submit.addEventListener('click', function () {
        if (isNaN(text.value)) {
            console.log("Error Message");
        }
        else {
            console.log(text.value);
        }
    });
    form.appendChild(submit);
});

Upvotes: 1

Unni Babu
Unni Babu

Reputation: 1814

enter image description here
Found js syntax errors and you have put the function outside, thats why its not getting node value. Corrected the js code and tested! 100% working,screenshot shown 


    <script>
        document.getElementById("button").addEventListener('click', function () {
            var text = document.createElement('input');
            text.setAttribute("type", "text");
            text.setAttribute("id", "nodeID");
            text.setAttribute("maxlength", "3");
            text.setAttribute("size", "6");
            text.setAttribute("placeholder", "Enter Node ID");
            var form = document.getElementById("form");
            form.appendChild(text);
            var submit = document.createElement('BUTTON');
            var t = document.createTextNode("Add");
            submit.appendChild(t);
            submit.setAttribute("id", "subButton");
            submit.setAttribute("type", "button");
            $('#form').append(submit);

            document.getElementById("subButton").addEventListener('click', function () {
                var x = document.getElementById("nodeID");
                console.log(x.value);
            });

        });

    </script>

Upvotes: 1

kaustubh badamikar
kaustubh badamikar

Reputation: 664

Another way to create element dynamically, probably its not the right way to create.

<script type="text/javascript">
   document.getElementById("button").addEventListener('click', function () {
   var str = '<input type="text" id="nodeID" maxlength="3" size="6" placeholder="Enter Node ID">';
   $('#form').append(str);
   str = '<button id="subButton" onclick="getvalues(event)">Add</button>';
   $('#form').append(str);

});
function getvalues (e) {
   e.preventDefault();
   var x = document.getElementById("nodeID");
    console.log(x.value);
}
</script>

Upvotes: 2

Related Questions