如何使用 javascript 獲取多個輸入值

Question

我試着編寫如下的學生經理代碼。 但是當我在 web 中運行我的代碼時，似乎出現了一些我不理解的錯誤。 我無法從性別和語言中獲得輸入值。 當我檢查控制台發現我的代碼有問題時，只是一片空白。所以我不知道為什么當我沒有從控制台收到任何錯誤時我無法獲得價值。 因為我的英語水平不好所以我無法解釋我的錯誤。 我為此感到抱歉。 有人能幫我嗎。 謝謝先在這里輸入圖片描述

 <table>
                        <form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
                            <div id="s1">
                                <label>Student Name:</label>
                                <input type="text" placeholder="Input student name"
                                    title="Please fill out this field" id="name" name="name">
                            </div>
                            <div id="s2">
                                <label>Student DOB:</label>
                                <input type="date" placeholder="dd-mm-yyyy" id="date" name="date">
                            </div>
                            <div id="s3">
                                <label>Student gender:</label>
                                <input type="radio" id="gender1" class="gender" name="gender">Male
                                <input type="radio" id="gender2" class="gender" name="gender">Female
                            </div>
                            <div id="s4">
                                <label>Student Language</label>
                                <input type="checkbox" id="lang1" class="lang" name="lang">English
                                <input type="checkbox" id="lang2" class="lang" name="lang">Vietnamese
                                <input type="checkbox" id="lang3" class="lang" name="lang">Japanese
                                <input type="checkbox" id="lang4" class="lang" name="lang">Chinese
                                <input type="checkbox" id="lang5" class="lang" name="lang">French
                            </div>
                            <div id="s5">
                                <label>Student Class:</label>
                                <select id="class" name="class">
                                    <option>C1608G</option>
                                </select>
                                <a href="#" id="add" onclick="">Add class</a>
                            </div>
                            <button id="bt">Add</button>
                        </form>
                        <br><br><br>
                        <h2><strong>Student List</strong></h2>
                        <br>
                        <table id="table" border="1">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Class</th>
                                    <th>DOB</th>
                                    <th>Gender</th>
                                    <th>Language</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

這是我的 javascript 代碼

    var selectedRow = null
    
    function onFormSubmit() {
        var formData = readFormData();
        // check empty row
        if (selectedRow == null) {
            // Insert New User Record
            insertNewRecord(formData);
        }
        else {
            // Update New User Record
            updateRecord(formData);
        }
        // Reset Input Values
        resetForm();
    }
    
    function readFormData() {
        var formData = {};
        // Get Values From  Input
        formData["name"] = document.getElementById("name").value;
        formData["class"] = document.getElementById("class").value;
        formData["date"] = document.getElementById("date").value;
        formData["gender"] = document.getElementsByClassName("gender").value;
        formData["lang"] = document.getElementsByClassName("lang").value;
        // return Form Data
        return formData;
    }
    
    function insertNewRecord(data) {
        var table = document.getElementById("table").getElementsByTagName('tbody')[0];
        var newRow = table.insertRow(table.length);
        cell1 = newRow.insertCell(0);
        cell1.innerHTML = data.name;
        cell2 = newRow.insertCell(1);
        cell2.innerHTML = data.class;
        cell3 = newRow.insertCell(2);
        cell3.innerHTML = data.date;
        cell4 = newRow.insertCell(3);
        cell4.innerHTML = data.gender;
        cell5 = newRow.insertCell(4);
        cell5.innerHTML = data.lang;
        cell5 = newRow.insertCell(5);
        cell5.innerHTML = '<a href="#" onClick="onDelete(this)" style="color: blue;">Delete</a>';
    }
    
    function updateRecord(formData) {
        selectedRow.cells[0].innerHTML = formData.name;
        selectedRow.cells[1].innerHTML = formData.class;
        selectedRow.cells[2].innerHTML = formData.date;
        selectedRow.cells[3].innerHTML = formData.gender;
        selectedRow.cells[4].innerHTML = formData.lang;
    }
    
    function resetForm() {
        document.getElementById("name").value = "";
        document.getElementById("class").value = "";
        document.getElementById("date").value = "";
        document.getElementsByClassName("gender").value = "";
        document.getElementsByClassName("lang").value = "";
        selectedRow = null;
    }
    function onDelete(td) {
        if (confirm('Are you sure to delete this record ?')) {
            row = td.parentElement.parentElement;
            document.getElementById("table").deleteRow(row.rowIndex);
            resetForm();
        }
    }
    function updateRecord(formData) {
        selectedRow.cells[0].innerHTML = formData.name;
        selectedRow.cells[1].innerHTML = formData.class;
        selectedRow.cells[2].innerHTML = formData.data;
        selectedRow.cells[3].innerHTML = formData.gender;
        selectedRow.cells[4].innerHTML = formData.lang;
    }

Answer 1

您的代碼中存在兩個主要問題。

1. 您的單選框/復選框需要有value s - 您的代碼無法將它們旁邊的文本推斷為值（沒有一些額外的編碼，無論如何這不是正確的方法）

2. 要檢查選擇了哪個無線電，您可以使用querySelector和? 旗幟。 這是我添加后它在您的代碼中的樣子：

   formData["gender"] = document.querySelector(".gender:checked")?.value || '';

這是： document.querySelector(".gender:checked")找到名稱為 class 的項目 'gender' 被選中（psuedo class :checked這樣做）。 如果它不存在（如果不存在名稱為 class 的元素，或者沒有選中任何元素），則? flag 捕獲它，而是使用空白值。 （否則它可能會拋出錯誤或未定義）

要獲取所有選中的復選框，您可以使用這種結構：

 formData["lang"] = []; 
      // creates the array
  document.querySelectorAll(".lang:checked").forEach(item => formData["lang"].push(item.value)); 
      // loops through each checked checkbox and gets it's value, adding it to the array
  formData["lang"] = formData["lang"].join(', ') 
      // this converts your array into a list that is comma separated. This line is optional because javascript will show your array as a comma separated list anyways

 var selectedRow = null function onFormSubmit() { var formData = readFormData(); // check empty row if (selectedRow == null) { // Insert New User Record insertNewRecord(formData); } else { // Update New User Record updateRecord(formData); } // Reset Input Values resetForm(); } function readFormData() { var formData = {}; // Get Values From Input formData["name"] = document.getElementById("name").value; formData["class"] = document.getElementById("class").value; formData["date"] = document.getElementById("date").value; formData["gender"] = document.querySelector(".gender:checked")?.value || ''; formData["lang"] = []; document.querySelectorAll(".lang:checked").forEach(item => formData["lang"].push(item.value)); formData["lang"] = formData["lang"].join(', ') // return Form Data return formData; } function insertNewRecord(data) { var table = document.getElementById("table").getElementsByTagName('tbody')[0]; var newRow = table.insertRow(table.length); cell1 = newRow.insertCell(0); cell1.innerHTML = data.name; cell2 = newRow.insertCell(1); cell2.innerHTML = data.class; cell3 = newRow.insertCell(2); cell3.innerHTML = data.date; cell4 = newRow.insertCell(3); cell4.innerHTML = data.gender; cell5 = newRow.insertCell(4); cell5.innerHTML = data.lang; cell5 = newRow.insertCell(5); cell5.innerHTML = '<a href="#" onClick="onDelete(this)" style="color: blue;">Delete</a>'; } function updateRecord(formData) { selectedRow.cells[0].innerHTML = formData.name; selectedRow.cells[1].innerHTML = formData.class; selectedRow.cells[2].innerHTML = formData.date; selectedRow.cells[3].innerHTML = formData.gender; selectedRow.cells[4].innerHTML = formData.lang; } function resetForm() { document.getElementById("name").value = ""; document.getElementById("class").value = ""; document.getElementById("date").value = ""; document.getElementsByClassName("gender").value = ""; document.getElementsByClassName("lang").value = ""; selectedRow = null; } function onDelete(td) { if (confirm('Are you sure to delete this record?')) { row = td.parentElement.parentElement; document.getElementById("table").deleteRow(row.rowIndex); resetForm(); } } function updateRecord(formData) { selectedRow.cells[0].innerHTML = formData.name; selectedRow.cells[1].innerHTML = formData.class; selectedRow.cells[2].innerHTML = formData.data; selectedRow.cells[3].innerHTML = formData.gender; selectedRow.cells[4].innerHTML = formData.lang; }

 <form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off"> <div id="s1"> <label>Student Name:</label> <input type="text" placeholder="Input student name" title="Please fill out this field" id="name" name="name"> </div> <div id="s2"> <label>Student DOB:</label> <input type="date" placeholder="dd-mm-yyyy" id="date" name="date"> </div> <div id="s3"> <label>Student gender:</label> <input type="radio" id="gender1" class="gender" name="gender" value="Male">Male <input type="radio" id="gender2" class="gender" name="gender" value="Female">Female </div> <div id="s4"> <label>Student Language</label> <input type="checkbox" id="lang1" class="lang" name="lang" value="English">English <input type="checkbox" id="lang2" class="lang" name="lang" value="Vietnamese">Vietnamese <input type="checkbox" id="lang3" class="lang" name="lang" value="Japanese">Japanese <input type="checkbox" id="lang4" class="lang" name="lang" value="Chinese">Chinese <input type="checkbox" id="lang5" class="lang" name="lang" value="French">French </div> <div id="s5"> <label>Student Class:</label> <select id="class" name="class"> <option>C1608G</option> </select> <a href="#" id="add" onclick="">Add class</a> </div> <button id="bt">Add</button> </form> <br><br><br> <h2><strong>Student List</strong></h2> <br> <table id="table" border="1"> <thead> <tr> <th>Name</th> <th>Class</th> <th>DOB</th> <th>Gender</th> <th>Language</th> </tr> </thead> <tbody> </tbody> </table>