How can i get multiple input values with javascript

user_18727060 0
Viewed 99

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 firstenter 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;
    }
html javascript
1 Answers

Two major problems you have in your code.

  1. Your radio/checkboxes need to have values - 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>

user_17729330
Related