Попытка получить доступ к вводу формы в javascript
Я новичок в веб-разработке, и я пытаюсь получить доступ к данным формы в моем файле javascript, но не могу это сделать. Вот:
Мой HTML:
var name = document.getElementById('loginForm').value;
console.info(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. Независимо от того, что я пробовал, «имя» всегда - это Дональд, а не то, что я ввожу в свою форму, и я не уверен, как я могу получить к нему доступ, если удалю значение из тегов ввода.
Любые советы приветствуются.
@Sara он уже получил значение 'name' is always Donald
@ChintuYadavSara - Это только усугубит проблему. Значение атрибут (в отличие от свойства, которое они используют в настоящее время) всегда будет значением по умолчанию (поэтому, если они внесут изменение, которое вы предлагаете, у них будет два различных причин симптомов, которые они испытывают).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Вы читаете значение вне какой-либо функции, поэтому значение будет таким, каким оно было в момент загрузки <script>.
Если вы хотите прочитать значение в другое время, вам нужно обернуть код в функция и назвать его потом.
Как вы это делаете, зависит от конкретного потом, о котором вы заботитесь. Скорее всего, вам следует привязать функцию как обработчик события. Возможно, к событию input текстового поля или событию submit формы.
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>Вы обращаетесь к форме el, а не к входу el. Также вам нужен слушатель onchange.
var el = document.getElementsByName('username')[0];
var value = el.value;
console.info(value);//Donald
el.onchange = function(e){
console.info(e.target.value); // new value any time you change it in the input
}
Надеюсь это поможет :)
Ваш скрипт будет вызываться при загрузке, что означает, что он всегда будет возвращать значение по умолчанию Donald.
Итак, чтобы получить новое значение, вы можете прикрепить событие щелчка к кнопке, тогда, когда вы нажмете, вы получите текущее значение, например:
document.getElementById('showName').addEventListener('click', function() {
console.info(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>Также важно, что при обработке события отправки в форме вместо нажатия кнопки все несколько отличается.
Причина, по которой он не показывает ничего другого, заключается в том, что вы получаете к нему доступ только изначально, а не после каких-либо изменений. для отправки или другого события. Чтобы получить доступ после изменения, вы должны отслеживать это событие изменения, то же самое для отправки, а затем обращаться к форме в обработчике событий для этого события.
var username = document.getElementById('username');
console.info(username.value);
var myform = document.getElementById('loginForm');
username.addEventListener('change', function(event) {
console.info(event.type);
console.info(event.target.value);
console.info('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.info(thisform.password.value);//use form field by name
console.info(event.type);// submit
console.info(username.value);// from the id reference
console.info('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>Привет, друзья, у вас опечатка в вашем коде в строке 14, sonsole.log('Form submit through function!'); должен быть console.info('Form submit through function!');
вам нужно выбрать тег ввода и получить значение попробуйте этот
document.getElementsByTagName("input")[0].getAttribute("value");