Question

我有联系表格。联系表格有输入，选择器和单选按钮。

问题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>

Answer 1

尝试

＆＃13;

// 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;

getElementsByName循环遍历使用onChange事件返回值的所有字段

1 个答案: