Как я могу использовать querySelector для выбора элемента ввода по имени?

Недавно я получил помощь на этом сайте по использованию querySelector на входе формы, например select, но как только я взял <select>, он полностью изменил то, что должно было быть сделано в этой функции.

HTML:

<form onsubmit="return checkForm()">
    Password: <input type="text" name="pwd">
    <input type="submit" value="Submit">
</form>

JavaScript:

<script language="Javascript" type="text/javascript">
    debugger;
    function checkForm() {
        var form = document.forms[0];
        var selectElement = form.querySelector('');
        var selectedValue = selectElement.value;

        alert(selectedValue);
</script>

Раньше у меня был ('select') для querySelector, но теперь я не уверен, что туда положить.
Я пробовал несколько вещей, а также querySelectorAll, но я не могу понять это.

Чтобы быть ясным, я пытаюсь вытащить name="pwd".

Как я могу это сделать?

Ответ 1

Вы можете попробовать 'input [ name= "pwd" ]':

function checkForm(){
     var form = document.forms[0];
     var selectElement = form.querySelector('input[name="pwd"]');
     var selectedValue = selectElement.value;
}

взгляните на это http://jsfiddle.net/2ZL4G/1/

Ответ 2

1- вам нужно закрыть блок функции клавишей '}', которая отсутствует.

2- аргумент querySelector не может быть пустой строкой '' или ''... Использовать '*' для всех.

3- эти аргументы вернут необходимое значение:

querySelector('*')

querySelector('input')

querySelector('input[name="pwd"]')

querySelector('[name="pwd"]')

Ответ 3

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

<input id="cta" type="email" placeholder="Enter Email...">
<button onclick="return joinMailingList()">Join</button>

<script>
    const joinMailingList = () => {
        const email = document.querySelector('#cta').value
        console.log(email)
    }
</script>

Вы столкнетесь с проблемой, если используете ключевое слово this с жирной стрелкой (=>). Если вам нужно это сделать, идите в старую школу:

<script>
    function joinMailingList() {
        const email = document.querySelector('#cta').value
        console.log(email)
    }
</script>

Если вы работаете с вводами пароля, вы должны использовать type="password", чтобы он отображал ****** во время ввода пользователем, и он также более семантичен.

Ответ 4

Итак... вам нужно изменить некоторые вещи в вашем коде

<form method="POST" id="form-pass">
Password: <input type="text" name="pwd" id="input-pwd">
<input type="submit" value="Submit">
</form>

<script>
var form = document.querySelector('#form-pass');
var pwd = document.querySelector('#input-pwd');
pwd.focus();
form.onsubmit = checkForm;

function checkForm() {
  alert(pwd.value);
}
</script>

Попробуйте так.

Ответ 5

querySelector() соответствует идентификатору в документе. Вы должны написать идентификатор пароля в .html

Затем передайте его в querySelector() со #symbol &.value property.

Пример:

let myVal = document.querySelector('#pwd').value

Ответ 6

Я знаю, что это старо, но недавно я столкнулся с той же проблемой, и мне удалось выбрать элемент, обратившись только к такому атрибуту: document.querySelector('[name="your-selector-name-here"]');

На всякий случай это кому-нибудь понадобится :)