Trying to access form input in javascript

user_10574455 0
Viewed 1415

I'm quite new to web development and I'm trying to access form data in my javascript file but can't manage to do it. Here it is:

My HTML:

var name = document.getElementById('loginForm').value;
console.log(name);
<form id="loginForm">
  Username <input type="text" name="username" value="Donald"><br> Password: <input type="text" name="password" value="Duck"><br>
  <input type="submit" value="Submit" />
</form>
<script type="module" src="other.js"></script>

The reason I've done it in a separate javascript file is that I'll be calling APIs later on. No matter what I've tried, 'name' is always Donald instead of what I enter into my form and I'm not sure how I can access it if I remove value from the input tags.

Any tips are greatly appreciated.

forms html javascript
5 Answers

Your script will be called on load what means it will always return the default value Donald.

So to get the new value you could attach a click event to a button then when you click you'll get the current value like :

document.getElementById('showName').addEventListener('click', function() {
  console.log(document.querySelector('[name="username"]').value);
})
<form id="loginForm">
  Username: <input type="text" name="username" value="Donald">
  <br> Password: <input type="text" name="password" value="Duck">
  <br>
  <input type="button" value="Show value" id="showName" />
</form>

user_42817790

You are reading the value outside of any function, so the value will be whatever it is at the time the <script> is loaded.

If you want to read the value at some other time, you'll need to wrap the code in a function and call it later.

How you do that depends on the particular later that you care about. Most likely you should bind the function as an event handler. Maybe to the input event of the text box, or the submit event of the form.

Dorward_190680 

var form = new FormData(document.getElementById("loginForm"));
var inputValue = form.get("username");
<form id="loginForm">
  Username <input type="text" name="username" value="Donald"><br> Password: <input type="text" name="password" value="Duck"><br>
  <input type="submit" value="Submit" />
</form>
<script type="module" src="other.js"></script>

user_101834340

You are accessing the form el and not the input el. Also you need onchange listener. 

var el = document.getElementsByName('username')[0];
var value = el.value;
console.log(value);//Donald

el.onchange = function(e){
   console.log(e.target.value); // new value any time you change it in the input
}

Hope this helps :)

user_35687910

The reason it does not show anything different is that you only access it initially, not after any changes. for a submit or other event. In order to access after a change you have to monitor for that change event, same for a submit, then access the form in an event handler for that event.

var username = document.getElementById('username');
console.log(username.value);
var myform = document.getElementById('loginForm');

username.addEventListener('change', function(event) {
  console.log(event.type);
  console.log(event.target.value);
  console.log('Element change through function!');
});
myform.addEventListener('submit', function(event) {
  var thisform = this;// refer to form (see below)
  event.preventDefault(); // stop the submit for now
  event.stopImmediatePropagation();
  event.stopPropagation();
  console.log(thisform.password.value);//use form field by name
  console.log(event.type);// submit
  console.log(username.value);// from the id reference
  console.log('Form submit through function!');
  return false;
});
.label {
  display: block;
}
<form id="loginForm">
  <label class="label">Username: <input id="username" type="text" name="username" value="Donald"></label>
  <label class="label">Password: <input type="text" name="password" value="Duck"></label>
  <input type="submit" value="Submit" />
</form>
<script type="module" src="other.js"></script>

user_1259810
Related