Попытка получить доступ к вводу формы в JavaScript

Question

Я довольно новичок в веб-разработке и пытаюсь получить доступ к данным формы в моем файле javascript, но не могу этого сделать. Вот оно:

Мой 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>

Причина, по которой я сделал это в отдельном файле javascript, заключается в том, что позже я буду вызывать API. Независимо от того, что я пробовал, «имя» - это всегда Дональд, а не то, что я ввожу в свою форму, и я не уверен, как получить к нему доступ, если я удалю значение из входных тегов.

Любые советы приветствуются.

Answer 1

Причина, по которой он не показывает ничего другого, заключается в том, что вы обращаетесь к нему только изначально, а не после каких-либо изменений. для отправки или другого события. Чтобы получить доступ после изменения, необходимо отслеживать это событие изменения, то же самое для отправки, а затем получить доступ к форме в обработчике события для этого события.

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>

Answer 2

Ваш скрипт будет вызываться при загрузке, что означает, что он всегда будет возвращать значение по умолчанию Donald.

Таким образом, чтобы получить новое значение, вы можете прикрепить событие нажатия к кнопке, а затем при нажатии вы получите текущее значение, например:

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>

Answer 3

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>

Answer 4

Вы обращаетесь к форме эл, а не к вводу эл. Также вам нужен onchange слушатель.

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
}

Надеюсь, это поможет:)

Answer 5

Вы читаете значение вне любой функции, поэтому значение будет таким, какое оно есть в момент загрузки <script>.

Если вы хотите прочитать значение в другое время, вам нужно обернуть код в функцию и вызвать его позже .

То, как вы это делаете, зависит от конкретного позже , который вас волнует. Скорее всего, вам следует связать функцию как обработчик событий . Может быть, к событию input текстового поля или событию submit формы.