How to send data of HTML form directly to JSON file?

Last Updated : 01 Jul, 2024

To send HTML form data directly to a JSON file. The process of capturing form inputs, converting them to JSON format, and saving them to a file, ensures efficient data handling and storage

Approach

In an HTML form containing several fields such as name, college, etc. We want to send the data of our HTML form directly to the JSON file. We are using the json_encode() function which returns a JSON-encoded string.
We are making an array of values that the user fills in the HTML form. Then we pass this array into the json_encode() function. Then, the json_encode() function returns a JSON-encoded string. The whole task is implemented in a PHP function get_data().
To create a JSON file we used PHP function file_put_contents(). This function is used to write data to a file. We pass 2 arguments in the file_put_contents() function. The first parameter is our file name in which we want to store data in the JSON format and the second is our get_data() function.
This "gfg.php" file demonstrates the PHP code to which the HTML form contents are posted.
The content of "gfg.json" file shows the following data in JSON format.

Example: The example below demonstrates the above approach.

html

<html>

<head>
    <meta charset="UTF-8">

    <style>
        h3 {
            text-align: center;
        }

        img {
            display: block;
            margin: auto;
            height: 150px;
            width: 150px;
        }

        .input {
            margin: 6px;
            padding: 10px;
            display: block;
            margin: auto;
            color: palevioletred;
            font-size: 30px;
        }

        input {
            width: 90%;
            display: block;
            margin-left: 12px;
            background: none;
            background-color: lightyellow;
        }

        select {
            width: 90%;
            display: block;
            margin-left: 12px;
            background: none;
            background-color: lightyellow;
        }

        #heading {
            font-family: cursive;
            text-align: center;
            color: green;
            padding-top: 20px;

        }

        #form_page {
            height: 500px;
            width: 50%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            margin: auto;

        }

        #form_body {
            border-radius: 12px;
            height: 330px;
            width: 450px;
            background-color: beige;
            border: 1px solid pink;
            margin: auto;
            margin-top: 12px;
        }

        #text {
            color: red;
            width: 100px;
        }

        #head {
            border-bottom: 2px solid red;
            height: 100px;
            background-color: aliceblue;
        }

        #submit {
            background-color: white;
            width: 70px;
        }
    </style>

</head>

<body>

    <form method="post" action="gfg.php">

        <div id="form_page">

            <div id="form_body">
                <div id="head">
                    <h1 id="heading">GFG</h1>
                </div>
                <br />
                <div id="input_name" class="input">
                    <input id="name" type="text" 
                        Placeholder="Name" name="name" 
                        required>
                </div>
                <div id="input_class" class="input">
                    <input type="text" placeholder=
                        "Branch" name="branch" required>
                </div>
                <div id="input_year" class="input">
                    <input id="school" type="text" 
                        name="college" 
                        placeholder="College">
                </div>

                <div class="id input">
                    <input id="submit" type="submit" 
                        name="submit" value="submit" 
                        onclick="on_submit()">
                </div>
            </div>
        </div>
    </form>

</body>

</html>