JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

Marcos Raj
PRO
Marcos Raj
Pro Student 5,979 Points

Can We Create a JSON File using JAVASCRIPT, if yes how?

As i was trying to create program where the user giving the inputs and and submit the inputs and now i want these inputs store in JSON file and using the AJAX callback function i can access that JSON file when ever i click the button.

HERE BELOW I AM TRY DO SOMETHING, BUT I STUCK. AS I AM GETTING THE OUTPUT BUT NOT EXACT AS I WANTED AND ALSO TELL HOW HOW SHOULD I STORE THE SAME IN JSON FILE.

<!DOCTYPE html>
<html>
<head>
    <title>Class Attendance</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header>
        <h2>Class Attendance</h1>
    </header>
    <div class="wrapper">
        <div class="InputSection">
            <div class="TeacherInput">
                <h1>Teacher Attendance</h1>
                <form class="Teacher
                             Form">
                        <label class="TeacherNameLabel">Name: </label>
                        <input type="text" class="TeacherNameInput" placeholder="Enter Teacher Name"><br>
                        <input type="radio"  value="present" class="Teacherpresent radio"> Present <br>
                        <input type="radio"  value="Not present" class="TeacherNotPresent radio"> Not Present <br>
                        <button type="submit" class="TSubmit" value="submit" name="submit">Submit</button>
                </form>
            </div>
            <div class="StudentInput">
                <h1>Students Attendance</h1>
                    <form class="StudentForm">
                        <label class="StudentNameLabel">Name: </label>
                        <input type="text" class="StudentNameInput" placeholder="Enter Student Name"><br>
                        <input type="radio" value="present" class="Studentpresent radio"> Present <br>
                        <input type="radio"  value="Not present" class="studentNotPresent radio"> Not Present <br>
                        <button type="submit" class="SSubmit" value="submit" name="submit">Submit</button>
                    </form>
            </div>
        </div>
        <div class="displaySection">
            <div class="TeacherTable">        
                <table border="1" class="TTable">
                    <tr>
                        <th>Teacher Name</th>
                        <th>Teacher Attendance</th>
                    </tr>
                    <tr class="TeacherInsert">
                    </tr>
                </table>
            </div>
            <div class="StudentTable">
                <table border="1" class="STable">
                    <tr>
                        <th>Student Name</th>
                        <th>Student Attendance</th>
                    </tr>
                    <tr class="StudentInsert"></tr>
                </table>
            </div>
        </div>
    </div>
 <script src="app.js"></script>
</body>
</html>
const TeacherNameInput = document.querySelector('.TeacherNameInput');
const StudentNameInput = document.querySelector('.StudentNameInput');
const TeacherForm = document.querySelector('.TeacherInput');
const StudentForm= document.querySelector('.StudentInput');
const InputSection = document.querySelector('.InputSection');
const Tbutton = document.querySelector('.TSubmit');
const Sbutton = document.querySelector('.SSubmit');
const displaySection = document.querySelector('.displaySection');
const TeacherTable = document.querySelector('.TeacherTable');
const StudentTable = document.querySelector('.StudentTable');
const TTable = document.querySelector('.TTable');
const STable = document.querySelector('.STable');
//const TeacherInsert = document.querySelector('.TeacherInsert');
//const StudentInsert = document.querySelector('.StudentInsert');



TeacherForm.addEventListener('click', () => 
    {   
        Tbutton.addEventListener('click', (e) => 
        {
            const tr = document.createElement('tr');
            const td = document.createElement('td');
            e.preventDefault();
            td.textContent = TeacherNameInput.value;
            tr.appendChild(td);
            TTable.appendChild(tr);
        });
    });

StudentForm.addEventListener('click', () =>
{     
    Sbutton.addEventListener('click', (e) => 
        {
            const trs = document.createElement('tr');
            const tds = document.createElement('td');
            e.preventDefault();
            tds.textContent = StudentNameInput.value;
            trs.appendChild(tds);
            STable.appendChild(trs);
        });     
});

As out my am getting multiple result while entering the name. Please check code and also please let the query which i have mentioned above. Thanks in advance.

1 Answer

You cannot store this data on the server side; this requires a server programming language such as PHP or NodeJS

Marcos Raj
Marcos Raj
Pro Student 5,979 Points

ok so which on should I go for PHP or NODE.js