为什么输入元素的值未定义？ [复制]

Question

我有一个简单的表格：

<form name="demoForm" id="demoForm">
  <label id=”givenNameLabel” class =blueText>Please enter your given name:
  <input type = “text” name = “givenName” id= “givenName” value ="nn">
  </label>
  <button onclick = validate("givenName");>Validate this entry</button>
</form> 

但是当我尝试获取该值时，它是未定义的。 我使用 vanilla JS 或 jQuery 获得价值：

<script type="text/javascript">
  function validate(someTextID){
       alert("In validate()")   //Works
       var thisElement = "#"+someTextID;         //the text element; 
       var thisLabel = thisElement + "Label"; //the label for the text element;                     
       var thisValue = $(thisElement).val(); //The value stored in the text box                                  
       alert("thisElement is " +thisElement);   //Works
       alert("thisLabel is " +thisLabel);       //Works

       alert("thisValue is " +thisValue);   //Why is the value undefined?

        //more code to take actions depending on thisValue 
  }
</script>

Answer 1

通过将“智能”引号替换为“正常”引号来稍微理顺您的 HTML 之后（正如塞巴斯蒂安西蒙在他的评论中提到的那样） 我稍微简化了您的代码并添加了重要部分：

• return validate(...) 在您的 onclick 部分中确保您的验证函数的返回值用于确定是否提交表单。
• return falseinside 你的函数将导致表单不被传输（如果你返回true表单将被提交）

  function validate(textid){
     console.log(document.querySelector('#'+textid).value);   //Works
     //more code to take actions depending on thisValue 
     
     return false;  // if you don't want to submit the form yet
  }

  <form name="demoForm" id="demoForm">
    <label id="givenNameLabel" class ="blueText">Please enter your given name:
    <input type="text" name = "givenName" id= "givenName" value ="nn">
    </label>
    <button onclick ='return validate("givenName")'>Validate this entry</button>
  </form> 

---

这是一个替代版本。我怀疑，如果您以“相对”方式处理输入字段，即通过寻找点击按钮的previousElementSibling。

Array.prototype.forEach.call() 是一个看起来很笨拙的构造，它将数组方法forEach() 应用于document.querySelectorAll() 返回的节点列表（这个版本甚至可以在 Internet Explorer 中使用）。在forEach() 函数中，点击事件绑定到每个带有“validate”类的按钮的validate(ev) 函数。

Array.prototype.forEach.call(document.querySelectorAll('.validate'),
  function(el){el.addEventListener('click',validate)});
function validate(ev){
  var el=ev.target.previousElementSibling;
  console.log('validating element '+el.name+', the value is: '+el.value);   
  //more code to take actions depending on el.name and el.value 
   ev.preventDefault(); // in case you DON'T want to submit the form yet ...
}

<form name="demoForm" id="demoForm">
  <label class ="blueText">Please enter your given name:
  <input type="text" name="givenName" value="Carsten">
  <button class="validate">Validate this entry</button></label><br>
  <label class ="blueText">Where do you live?
  <input type="text" name="myhome" value="Hanover">
  <button class="validate">Validate this entry</button></label><br>
  <label class ="blueText">What are your hobbies?
  <input type="text" name="myhobbies" value="coding">
  <button class="validate">Validate this entry</button></label>

</form>