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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<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

chevron_right


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

PHP

filter_none

edit
close

play_arrow

link
brightness_4
code

<?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';                
    }
}
       
?>

chevron_right


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

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.