How do I get the value from <input> in javascript?

Question

What should I do to get uname and pword the value from the username and password input box? i tried to use document.getelementbyid().value but it doesn't seem to work

 <!DOCTYPE html> <html> <head> <p id="paragraph"> LOGIN </p> </head> <form id="forme" autocomplete="off"> Username:<input type="text" id="take" name="Username"> <br><br> Password: <input type="password" id="pass" name="Password"><br> <input type="submit" onsubmit="javascript:checkid()"> </form> <script> function checkid() { uname = document.getElementById("take").value pword = document.getElementById("pass").value if (uname == "abc" && pword == "123") { document.getElementById("paragraph").innerText = "right" } else { document.getElementById("paragraph").innerText = "wrong" } } </script> </html>

Answer 1

You're really close, just a few things:

the <head> tag is something special, you can't put a p in it. It all needs to go into the body tag.
the onsubmit event should be on the form, not on the button
a form by default does a network request. To prevent the page reloading you have to do a preventDefault .

Like this:

 function checkid(event) { event.preventDefault(); uname = document.getElementById("take").value pword = document.getElementById("pass").value if (uname == "abc" && pword == "123") { document.getElementById("paragraph").innerText = "right" } else { document.getElementById("paragraph").innerText = "wrong" } }

 <p id="paragraph"> LOGIN </p> <form id="forme" autocomplete="off" onsubmit="javascript:checkid(event)"> Username:<input type="text" id="take" name="Username"> <br><br> Password: <input type="password" id="pass" name="Password"><br> <input type="submit"> </form>

Answer 2

The onsubmit belongs on the form tag and not on the submit button
There is no need for javascript: labels in event handlers (or anywhere else for that matter)
HTML tags do not belong in head tags
Please do be aware that having a test for userid and password in plain view is no security at all

Recommended method (apart from the plain text password)

 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Form example</title> <script> function checkid(e) { // passing the submit event as "e" e.preventDefault(); // stopping the submit const uname = document.getElementById("take").value; // do not leak the vars into global scope const pword = document.getElementById("pass").value document.getElementById("paragraph").innerText = (uname == "abc" && pword == "123") ? "right" : "wrong"; // using a ternary } window.addEventListener("load", function() { // on page load document.getElementById("forme").addEventListener("submit", checkid); // assign the eventlistener }) </script> </head> <body> <p id="paragraph"> LOGIN </p> <form id="forme" autocomplete="off"> Username:<input type="text" id="take" name="Username"> <br><br> Password: <input type="password" id="pass" name="Password"><br> <input type="submit"> </form> </body> </html>

Answer 3

EASY:

 function getValue() { $('form').on('submit', function(event) { event.preventDefault(); $(this).serialize(); document.getElementById('result').value = `You entered: ${document.getElementById('text-input').value}`; }); }

 form .form-group { margin-bottom: 10px; } input[type=text] { height: 25px; } button[type=submit] { height: 30px; } input#text-input { width: 200px; }

 <form> <div class="form-group"> <input type="text" placeholder="Enter your text here..." id="text-input" name="text-input" required> <button type="submit" onclick="getValue()"> Submit </button> </div> <div class="form-group"> <output id="result" name="result" for="text-input"></output> </div> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

How do I get the value from <input> in javascript?

Question

3 answers

solution1
3 2020-08-23 18:11:39

solution2
1 2020-08-23 18:22:35

solution3
0 2020-08-23 21:40:24

How do I get the value from <input> in javascript?

Question

3 answers

solution1 3 2020-08-23 18:11:39

solution2 1 2020-08-23 18:22:35

solution3 0 2020-08-23 21:40:24

solution1
3 2020-08-23 18:11:39

solution2
1 2020-08-23 18:22:35

solution3
0 2020-08-23 21:40:24