我有联系表格。联系表格有输入,选择器和单选按钮。
问题1:使用getElementsByName
如何使用onChange
事件获取字段的索引?我会使用For Loop
吗?
问题2:如何使用选择器和单选按钮的输入执行此操作?
问题3:一旦我从索引中获取数据,我如何将索引用于字段的ID,因为我想要评估数据。
提前致谢!
的Javascript
`// Var for element
var contactname = document.getElementsByName('cf')[1];
//Get value when clicking out of field
contactname.addEventListener('onchange',function(){
console.log(contactname.value);
});`
HTML表单
<!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="cf" autofocus required>
<label for="email">Email:</label>
<input id="email" type="email" name="cf" required>
<label for="phone">Phone:</label>
<input id="phone" type="tel" name="cf" required>
<label for="status">Status:
<select id="status" name="cf" 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="cf" value="check" checked>
Send me your newsletter</label>
<label for="sales">
<label for="support">
<input id="slsSupport" type="radio" name="cf" value="sales" checked>Sales
<input id="slsSupport" type="radio" name="cf" value="support">Support
</label>
</label>
<label for="msg">Message:</label>
<textarea id="msg" name="cf" 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>
答案 0 :(得分:1)
尝试
// Var for element
var contactname = document.getElementsByName("cf");
//Get value when clicking out of field
Array.prototype.slice.call(contactname).forEach(function(elem, index) {
elem.addEventListener("change",function(event) {
// `log` `elem` `index` , `id` , `value`
console.log(index, event.target.id, event.target.value);
}, false);
});
&#13;
<form id="contactus">
<fieldset>
<label for="name">Name:</label>
<input id="name" type="text" name="cf" autofocus required>
<label for="email">Email:</label>
<input id="email" type="email" name="cf" required>
<label for="phone">Phone:</label>
<input id="phone" type="tel" name="cf" required>
<label for="status">Status:
<select id="status" name="cf" 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="cf" value="check" checked>
Send me your newsletter</label>
<label for="sales">
<label for="support">
<input id="slsSupport" type="radio" name="cf" value="sales" checked>Sales
<input id="slsSupport" type="radio" name="cf" value="support">Support
</label>
</label>
<label for="msg">Message:</label>
<textarea id="msg" name="cf" rows="10" cols="30" required></textarea>
</fieldset>
<fieldset>
<button type="submit">Send</button>
<button type="reset">Reset</button>
</fieldset>
</form>
&#13;