如何使用querySelector按名稱選擇輸入元素？

我最近收到了在這個網站上使用querySelector在表單輸入如select上的幫助，但是一旦我把<select>拿出來，它完全改變了該函數中必須完成的工作。如何使用querySelector按名稱選擇輸入元素？

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

我該怎麼做？

來源

2013-03-01 Anthony Tobuscus

'querySelector'方法採用'selector'參數。 'selector'參數是一個字符串，它包含一個或多個由逗號分隔的CSS選擇器。如果你堅持有效的選擇器，MDN在[**選擇器**]（https://developer.mozilla.org/en-US/docs/CSS/Getting_Started/Selector）上有一個很棒的頁面。當然，你總是可以在SO上獲得幫助。我只是想你可能會發現頁面一本方便的有一般:)再次感謝 – Nope 2013-03-01 12:36:25

：d – 2013-03-01 14:53:15

你可以試試 '輸入[名稱= 「PWD」]'：

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

去看一下這一個http://jsfiddle.net/2ZL4G/1/

來源

2013-03-01 01:07:21 AlexCheuk

我嘗試過，但似乎沒有回我，我沒有得到任何警告 – 2013-03-01 01:14:27

嗯，問心無愧。我已經試過這使很多次，它仍然無法使用此方法的工作，但它的jsfiddle作品？我錯過了什麼嗎？此外它顯示在地址欄，所以我知道它越來越投入，只是我沒有得到任何警報 – 2013-03-01 01:39:41

@AnthonyTobuscus：如果您的代碼仍然有'調試;'聲明它比這可能會導致代碼的其餘部分不執行，因爲它會停止該行的執行。 – Nope 2013-03-01 11:24:21

這些例子似乎有點效率低下。如果你想在價值行事試試這個：

<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關鍵字脂肪箭頭（=>）您可能會遇到的問題。如果你需要做的是，去老同學：

如果您正在使用密碼的輸入工作，你應該使用type="password"所以它會顯示******當用戶鍵入，並且它也是更多的語義。

來源

2017-09-07 06:22:38 agm1984

如何使用querySelector按名稱選擇輸入元素？

回答

相關問題