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>

There is NO need for javascript: in the statement onsubmit="javascript:checkid()" and the onsubmit belongs on the form tag — mplungjan
– mplungjan, Commented Aug 23, 2020 at 18:14

David784 · Accepted Answer · 2020-08-23 18:11:39Z

3

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>

answered Aug 23, 2020 at 18:11

David784

7,5243 gold badges24 silver badges35 bronze badges

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

2 Comments

mplungjan Over a year ago

There is ZERO need for javascript: in the statement javascript:checkid(event)

mplungjan Over a year ago

Using addEventListener is better - even a return checkid() with a return false in the function is clearer

mplungjan · Accepted Answer · 2020-08-23 18:22:35Z

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>

mrwolferinc · Accepted Answer · 2020-08-23 21:40:24Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related