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>

但是当我尝试获取该值时，它是不确定的。我通过香草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 false将导致发送 not 表单（如果您返回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>

这是替代版本。我怀疑，如果您以“相对”方式（例如，通过查找）处理输入字段，则可能不需要单个元素的id，并且可以将验证功能重新用于其他输入字段。 previousElementSibling的点击按钮。

Array.prototype.forEach.call()是一个笨拙的构造，将Array方法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>

为什么输入元素的值未定义？

1 个答案: