Issues in applying a form on HTML. HTML level beginner

Question

I have been having some issues in sending data that the user has put in a form to another html file called data.html. I really wanted to write the data to like a text file but I'm not really sure how to do that. Here's my application.html, application.css and data.html that has the script. Anyway some one can help me out?

application.css

html {
    display: flex;
    flex-flow: column;
    align-items: stretch;
    height: 300px;
}

#wrap {
    flex: 1 1 auto;
    overflow: auto;
    width: 900px;
    margin: 0 auto;
    height: 100%;
    border-style: solid;
    border-color: black;
}

body {
    background-color: white;
    font-family: sans-serif;
}

/*images*/
#aum-logo {
    height: 7em;
    float: left;
    padding-left: 1em;
    padding-right: 1em;
}

header{
    flex: 0 1 auto;
    padding-bottom: 2em;
}

#title{
    margin-bottom: -.5em;
}

/*navigatin bar*/
#navMenu ul {
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    background-color: #231f20;
}

#navMenu ul li a{
    color: white;
    text-decoration: none;
}

#navMenu li {
    float: left;
    padding: 1em;
    margin-left: 2em;
}

/*sidebar*/
aside {
    background-color: #ff4814;
    float: left;
    position: relative;
    height:69.8%;
}

aside #sideNav ul {
    list-style-type: none;
}

aside #sideNav ul li {
    margin-left: -2em;
    padding-right: 2em;
    padding-top: 1em;
}

aside #sideNav ul li a {
    display: block;
    text-decoration: none;
    overflow: hidden;
    color: white;
}

/*main content*/
main h4 {
    margin-left: 10em;
    font-size: 18px;
}

main p {
    font-size: 14px;
    margin-left: 15em;
    margin-right: 2.2em;
}

main ul li {
    font-size: 15px;
    margin-left: 15em;
    padding-top: 3px;
}

/*form */
form {
    align-content: center;
    margin-left: 20em;
}

form #gender {
    margin-left: 21px;
}

form #gpa {
    margin-left: 40px;
}

form #date {
    margin-left: 39px;
}

form #button {
    margin-left: 13em;
}

/*footer*/
footer{
    border-top: solid;
    border-top-color: black;
}

footer p{
    text-align: center;
    font-size: 10px;
}

application.html
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>AUM Computer Science</title>
    <link rel="shortcut icon" href="/Images/favicon.ico" type="image/favicon.ico">
    <link rel="stylesheet" href="/Styles/application.css">
    <link rel="stylesheet" href="Styles/normalize.css">
</head>
    
<body>
<div id="wrap">
    <!-- Main Header -->
    <header>
    <img src="/Images/aumLogo.gif" alt="logo" id="aum-logo">
    <h1 id="title"><i>College of Sciences</i></h1>
    <h2 id="subtitle"><i>Department of Computer Science</i></h2>
    </header>
    
    <!-- Navigation Bar -->
    <nav id="navMenu">
        <ul>
            <li><a href="/index.html" class="bullets">Home</a></li>
            <li><a href="/Pages/description.html">Program Description</a></li>
            <li><a href="/Pages/application.html" class="bullets">Teacher Assistant Application</a></li>
            <li><a href="/Pages/calculator.html" class="bullets">GPA Calculator</a></li>
        </ul>
    </nav>
    
    <!-- left navigation bar -->
    <aside>
        <nav id="sideNav">
            <ul>
                <li><a href="/Pages/advising.html" class="bullets">Advising</a></li>
                <li><a href="/Pages/concentrations.html" class="bullets">Concentrations</a></li>
                <li><a href="https://www.aum.edu" class="bullets">AUM Home Page</a></li>
            </ul>
        </nav>
    </aside>
    
    <!-- body of website -->
    <main>
        <h4>Teacher Assistant Description</h4>
        <p>A teacher assitant is a one individual student that get's selected in order to aid the professor. One of the requirements is that the student has taken the class they'll be assisting with before and is in good academic standing. Students selected to be Teacher Assistants may get tuition discounts as well. Please speak with your advisor in order to get all of the lastest incentives for becoming a teacher assistant</p>
        <h4>Teacher Assistant Application</h4>
        <p>Please fill out the following form. Use the comment section to put any additional comments that may make your application stand out. Also use to include the name of the professor you're trying to assist as well as the classes.</p>
        <br>
        <form action="/Pages/data.html" name="app-form" method="post" id="app-form">
            <label for="fname">First Name:</label>
            <input type="text" id="fname" name="fname" autofocus required><br><br>
            <label for="lname">Last Name:</label>
            <input type="text" id="lname" name="lname" required><br><br>
            <label for="studentID">Student ID:</label>
            <input type="text" id="studentID" name="studentID" required><br><br>
            <label for="gender" id="">Gender:</label>
            <select id="gender" name="gender" required>
                <option value=""></option>
                <option value="male">Male</option>
                <option value="female">Female</option>
                <option value="other">Other</option>
                <option value="ratherNotSay">Rather Not Say</option>
            </select><br><br>
            <label for="gpa">GPA:</label>
            <input type="text" id="gpa" name="gpa" placeholder="ex: 4.0" required><br><br>
            <label for="date">Date:</label>
            <input type="text" id="date" name="date" placeholder="mm/dd/yyyy" required><br><br>
            <label for="comments">Comments:</label><br>
            <textarea rows="4" cols="50" name="comments" form="app-form"></textarea><br><br>
            <input type="submit" value="Submit" id="button">
            <input type="reset" value="Reset">
            
        </form>
    </main>
    <footer>
        <p>Created by: Diego Acuna, CS Student</p>
        <p>&copy; Copyright: Diego Acuna</p>
        <p>Email: <a href="mailto: dacuna1@aum.edu">dacuna1@aum.edu</a></p>
    </footer>

</div>
</body>
</html>

data.html
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>AUM Computer Science</title>
    <link rel="shortcut icon" href="/Images/favicon.ico" type="image/favicon.ico">
    <link rel="stylesheet" href="/Styles/data.css">
    <link rel="stylesheet" href="Styles/normalize.css">
</head>
    
<script type="text/javascript">
//<![CDATA[
    var decode = function ( text ) {
        text = text.replace(/\+/g, " ");
        text = text.replace(/%[a-fA-F0-9]{2}/g,
            function ( text ) {
                return String.fromCharCode( "0x" + text.substr(1,2));
            }
        );
        return text;
    }
    
    var display_data = function () {
        var query = location.search.replace("?", "");
        if ( query == "" ) return;
        
        var fields = query.split("&");
        
        if ( fields.length == 0 ) {
            document.write("<p>No data was submitted.</p>");
        } else {
            document.write("<dl>");
            var field_parts;
            for ( var i in fields ) {
                field_parts = fields[i].split("=");
                field_parts[0] = decode (field_parts[0]);
                field_parts[1] = decode (field_parts[1]);
                document.write("<dt>" + field_parts[0] + "</dt>");
                document.write("<dd>" + field_parts[1] + "</dd>");
            }
            document.write("</dl>");
        }
    }
    ]]
</script>
    
<body>
<div id="wrap">
    <!-- Main Header -->
    <header>
    <img src="/Images/aumLogo.gif" alt="logo" id="aum-logo">
    <h1 id="title"><i>College of Sciences</i></h1>
    <h2 id="subtitle"><i>Department of Computer Science</i></h2>
    </header>
    
    <!-- Navigation Bar -->
    <nav id="navMenu">
        <ul>
            <li><a href="index.html" class="bullets">Home</a></li>
            <li><a href="/Pages/description.html">Program Description</a></li>
            <li><a href="/Pages/application.html" class="bullets">Teacher Assistant Application</a></li>
            <li><a href="/Pages/calculator.html" class="bullets">GPA Calculator</a></li>
        </ul>
    </nav>
    
    <!-- left navigation bar -->
    <aside>
        <nav id="sideNav">
            <ul>
                <li><a href="Pages/advising.html" class="bullets">Advising</a></li>
                <li><a href="Pages/concentrations.html" class="bullets">Concentrations</a></li>
                <li><a href="https://www.aum.edu" class="bullets">AUM Home Page</a></li>
            </ul>
        </nav>
    </aside>
    
    <!-- body of website -->
    <main>
        <h4>Application Data:</h4>
        <script>display_data();</script>
          
    </main>
    <footer>
        <p>Created by: Diego Acuna, CS Student</p>
        <p>&copy; Copyright: Diego Acuna</p>
        <p>Email: <a href="mailto: dacuna1@aum.edu">dacuna1@aum.edu</a></p>
    </footer>

</div>
</body>
</html>

You can refer to this answer [enter link description here](https://stackoverflow.com/questions/21012580/is-it-possible-to-write-data-to-file-using-only-javascript) — Rasoul Salehi, Jul 18 '20 at 19:15

score 0 · Answer 1 · answered Jul 18 '20 at 21:16

You can't write to an html file since this would need file access. The most common way is calling a serverside script that handles the data from the form. When using the post type the browser will send all the fieldnames and their values as variables when submitting. The serverside script can then access these variables and store them in a database or write them to a file.

Using javascript you can do some storing, like in cookies or html5 storage, but actually writing it to a physical file will need flesystem access. You can find more info in the answer of the link provided by Rasoul : Is it possible to write data to file using only JavaScript?

Issues in applying a form on HTML. HTML level beginner

1 Answers1