如何捕获输入到HTML表单字段中的数据？
[英]How do I capture data entered into the field of an HTML form?
问题描述
I've developed a html contact form. 
我开发了一个html联系表单。 How do I capture the data which is entered in the form using JavaScript? 如何使用JavaScript捕获表单中输入的数据？ (I can't use jQuery)? （我不能使用jQuery）？ I think I need use document.GetElementById() , but how ? 我想我需要使用document.GetElementById() ，但是如何 ？ And do I need to use an event such as onBlur to capture it when a user leaves the field, radio button, or checkbox? 当用户离开字段，单选按钮或复选框时，是否需要使用onBlur等事件来捕获它？
/*Borders of fields for validation and indication*/ input:invalid{ box-shadow: 0 0 2px .5px red; } textarea:invalid{ box-shadow: 0 0 2px .5px red; } /*Spacing around fields this is in place of <br>*/ label{ display: block; padding-top: 5px }
<!DOCTYPE html> <html> <head> <title>Contact Me</title> <link rel="stylesheet" type="text/css" href="contactform_Lab8.css"> </head> <body> <form id="contactus"> <fieldset> <label for="name">Name:</label> <input id="name" type="text" name="name" autofocus required> <label for="email">Email:</label> <input id="email" type="email" name="email" required> <label for="phone">Phone:</label> <input id="phone" type="tel" name="phone" required> <label for="status">Status: <select id="status" name="status" required> <option value="client">Client</option> <option value="partner">Partner</option> <option value="vendor">Vendor</option> </select> </label> <label for="subscribe"> <input id="subscribe" type="checkbox" name="subscribe" value="check" checked> Send me your newsletter</label> <label for="sales"> <label for="support"> <input id="slsSupport" type="radio" name="slsSupport" value="sales" checked>Sales <input id="slsSupport" type="radio" name="slsSupport" value="support">Support </label> </label> <label for="msg">Message:</label> <textarea id="msg" name="msg" rows="10" cols="30" required></textarea> </fieldset> <fieldset> <button type="submit">Send</button> <button type="reset">Reset</button> </fieldset> </form> <script src="contactform_Lab8.js"></script> </body> </html>
2 个解决方案
解决方案1
4 已采纳 2015-03-27 23:53:00
it is just the value attribute 它只是value属性
//the specific input
var inputID = document.getElementById('inputID');
//add a listener to the object for blur
inputID.addEventListener('blur',function(){
//the value attribute is the way to get what the user entered.
console.log(inputID.value);
});
EDIT 编辑
For a more re-usable approach. 对于更可重用的方法。 Give all of the elements in the form the same class that you want to add the same blur listener to. 为表单中的所有元素提供要添加相同模糊侦听器的相同类。 Then loop through all of those elements and add the listener and handler. 然后循环遍历所有这些元素并添加侦听器和处理程序。
var inputClass = document.getElementsByClassName('formInput');
for (var i = 0, ii = inputClass.length; i < ii ; i++) {
inputClass[i].addEventListener('blur', doSomething);
}
function doSomething() {
var inputField = this;
console.log(inputField.value);
}
example: http://codepen.io/ScavaJripter/pen/33d9336b618f3162a9dfb16379ef4fcc/ 例如： http ： //codepen.io/ScavaJripter/pen/33d9336b618f3162a9dfb16379ef4fcc/
解决方案2
1 2015-03-28 00:08:33
There are many ways to do this depending on what you want. 根据您的需要，有很多方法可以做到这一点。 Heres an example of A. alerting the value of the name field onblur B. Preventing the form from submitting unless the name is charles (final validation) 下面是一个例子A.警告名称字段onblur B的值。防止表单提交，除非名称是查尔斯（最终验证）
window.onload = function () { var name =document.getElementById("name"); name.addEventListener("blur", alertVal); function alertVal(){ alert(name.value); } var form = document.getElementById("contactus"); form.addEventListener("submit",function(e){ e.preventDefault(); if(name.value == "charles"){ alert("Success submitting form"); form.submit(); } else{ alert("name must be charles"); } }); }
/*Borders of fields for validation and indication*/ input:invalid{ box-shadow: 0 0 2px .5px red; } textarea:invalid{ box-shadow: 0 0 2px .5px red; } /*Spacing around fields this is in place of <br>*/ label{display: block; padding-top: 5px}
<!DOCTYPE html> <html> <head> <title>Contact Me</title> <link rel="stylesheet" type="text/css" href="contactform_Lab8.css"> </head> <body> <form id="contactus"> <fieldset> <label for="name">Name:</label> <input id="name" type="text" name="name" id="name" autofocus required> <label for="email">Email:</label> <input id="email" type="email" name="email" required> <label for="phone">Phone:</label> <input id="phone" type="tel" name="phone" required> <label for="status">Status: <select id="status" name="status" required> <option value="client">Client</option> <option value="partner">Partner</option> <option value="vendor">Vendor</option> </select> </label> <label for="subscribe"> <input id="subscribe" type="checkbox" name="subscribe" value="check" checked> Send me your newsletter</label> <label for="sales"> <label for="support"> <input id="slsSupport" type="radio" name="slsSupport" value="sales" checked>Sales <input id="slsSupport" type="radio" name="slsSupport" value="support">Support </label> </label> <label for="msg">Message:</label> <textarea id="msg" name="msg" rows="10" cols="30" required></textarea> </fieldset> <fieldset> <button type="submit">Send</button> <button type="reset">Reset</button> </fieldset> </form> <script type="contactform_Lab8.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.