How to append data in JSON file through HTML form using PHP ?

Last Updated : 23 Sep, 2020

The purpose of this article is to append data to a JSON file through HTML form using PHP.

Approach 1: If the JSON file is not created then we create a new JSON file, send data to it, and append data in it. To see how to create a JSON file by taking data from the HTML form, refer this link.

Approach 2: If the JSON file is already created then we directly append data to the JSON file. To send data from HTML form to JSON file we are using 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 json_encode() function. The json_encode() function returns a JSON encoded string. To create a JSON file we used PHP file_put_contents() which is used to write data to a file. We pass 2 arguments in 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 PHP get_data() function.

According to the first approach, we will successfully create a JSON file using the json_encode() function. Now our JSON file is created. The next task is to append data to that JSON file. To append data to the JSON file we have to store the previous data to a variable. To get the data of our JSON file we will be using the file_get_contents() function. The file_get_contents() reads a file into a string. To decode the string, the json_decode() function is used which is an in-built function in PHP used to decode a JSON string. The function converts a JSON encoded string into a PHP variable. The HTML data in an array is assigned to our decoded string. The json_encode() function and file_put_contents() are used to encode string and put the contents to JSON file respectively.

Example: The following HTML and PHP code 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="year"
                        placeholder="Year"> 
                </div> 

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

PHP Code: The following is the "gfg.php" file used in the above HTML file.

PHP

<?php
     
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
                 
    function get_data() {
        $name = $_POST['name'];
        $file_name='StudentsData'. '.json';
 
        if(file_exists("$file_name")) { 
            $current_data=file_get_contents("$file_name");
            $array_data=json_decode($current_data, true);
                             
            $extra=array(
                'Name' => $_POST['name'],
                'Branch' => $_POST['branch'],
                'Year' => $_POST['year'],
            );
            $array_data[]=$extra;
            echo "file exist<br/>";
            return json_encode($array_data);
        }
        else {
            $datae=array();
            $datae[]=array(
                'Name' => $_POST['name'],
                'Branch' => $_POST['branch'],
                'Year' => $_POST['year'],
            );
            echo "file not exist<br/>";
            return json_encode($datae);   
        }
    }

    $file_name='StudentsData'. '.json';
    
    if(file_put_contents("$file_name", get_data())) {
        echo 'success';
    }                
    else {
        echo 'There is some error';                
    }
}
     
?>

Output: The content of the "StudentsData.json" file shows the data in JSON format.