如何使用 javascript 获取多个输入值

Question

I tried to code a student manager like below. But when i ran my code in web there seem something error that i dont understanding. I can't get input value from gender and language. When i check console to see something wrong in my code, just a blank.So i dont know why i can't get value when i didn't get any error from console. Because my english skill is not good so I can't explain my mistake. i'm sorry for that. Can someone help me. Thanks first enter image description here

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

Here is my javascript code

    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

Two major problems you have in your code.

1. Your radio/checkboxes need to have value s - your code cannot infer the text next to them as the value (without some additional coding and anyways that's not the right way to do it)

2. To check which radio is selected, you can use querySelector and the ? flag. Here's what it looks like in your code after I've added it:

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

Which is: document.querySelector(".gender:checked") finds the item with the class name 'gender' that is checked (the psuedo class :checked does that). If it doesn't exist (if there isn't an element with that class name or none of them are checked), the ? flag captures that and instead a blank value is used. (Otherwise it might throw an error or be undefined)

To get all the checked checkboxes, you can use this kind of structure:

 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>