Question

我已经开发了一个HTML联系表单。如何使用JavaScript捕获表单中输入的数据？（我不能使用jQuery）？我想我需要使用document.GetElementById()，但如何？当用户离开字段，单选按钮或复选框时，是否需要使用onBlur等事件来捕获它？

＆＃13;

/*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
}

＆＃13;

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

＆＃13;

Answer 1

只是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);
});

修改

更可重复使用的方法。为表单中的所有元素提供要添加相同模糊侦听器的相同类。然后遍历所有这些元素并添加监听器和处理程序。

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);
}

示例：http://codepen.io/ScavaJripter/pen/33d9336b618f3162a9dfb16379ef4fcc/

Answer 2

根据您的需要，有很多方法可以做到这一点。这是一个例子 A.警告名称字段onblur的值 B.防止提交表格，除非名称是查尔斯（最终确认）

＆＃13;

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");
    }
  });
 
}

＆＃13;

/*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}

＆＃13;

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

＆＃13;

如何捕获输入到HTML表单字段中的数据？

2 个答案: