Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript AJAX Basics (retiring) Programming AJAX Processing JSON Data

Marcos Raj
PLUS
Marcos Raj
Courses Plus Student 5,979 Points
Posted by Marcos Raj
Marcos Raj
Courses Plus 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

edinjusupovic
edinjusupovic
5,664 Points
edinjusupovic
edinjusupovic
5,664 Points

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