Wie kann ich querySelector aktivieren, um ein Eingabeelement nach Namen auszuwählen?

Ich habe vor kurzem Hilfe auf dieser Website zu erreichen , die querySelectorauf einem Formular Eingabe wie selectaber sobald ich nahm , <select>um es völlig verändert , was in der Funktion getan werden mußte.

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>

Früher hatte ich ('select')für die querySelector, aber jetzt bin ich mir nicht sicher, was ich dort setzen soll.
Ich habe auch mehrere Dinge ausprobiert, querySelectorAllaber ich kann es scheinbar nicht herausfinden.

Um klar zu sein, versuche ich das zu ziehen name="pwd".

Wie könnte ich das machen?

Sie können 'input [name = "pwd"]' versuchen:

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

Schauen Sie sich diese http://jsfiddle.net/2ZL4G/1/ an.

Ich weiß, dass dies alt ist, aber ich hatte kürzlich das gleiche Problem und konnte das Element auswählen, indem ich nur auf das folgende Attribut zugegriffen habe: document.querySelector('[name="your-selector-name-here"]');

Nur für den Fall, dass jemand dies jemals brauchen würde :)

1- Sie müssen den Block der Funktion mit '}' schließen, was fehlt.

2- Das Argument von querySelector darf keine leere Zeichenfolge '' oder '' sein ... Verwenden Sie '*' für alle.

3- Diese Argumente geben den erforderlichen Wert zurück:

querySelector('*')

querySelector('input')

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

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

Diese Beispiele scheinen etwas ineffizient zu sein. Versuchen Sie dies, wenn Sie auf den Wert reagieren möchten:

<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>

Wenn Sie ein thisSchlüsselwort mit einem fetten Pfeil ( =>) verwenden, tritt ein Problem auf . Wenn Sie das tun müssen, gehen Sie zur alten Schule:

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

Wenn Sie mit Passworteingaben arbeiten, sollten Sie diese verwenden, type="password"damit ****** angezeigt wird, während der Benutzer tippt, und es ist auch semantischer.

Also ... müssen Sie einige Dinge in Ihrem Code ändern

<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>

Versuchen Sie es auf diese Weise.

querySelector()stimmte mit der ID im Dokument überein. Sie müssen die ID des Passworts eingeben.html

Dann gib es weiter querySelector()mit #symbol & .value property.

Beispiel:

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