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

The task is to send data of HTML form directly to JSON file.

Approach: We have 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. For this 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. Then 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 file_put_contents() function. The first parameter is our file name in which we want to store data in the JSON format and second is our get_data() function.

Example: The following HTML and PHP codes demonstrates the above approach.

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="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>

chevron_right


gfg.php This “gfg.php” file demonstrates the PHP code to which the HTML form contents are posted.



filter_none

edit
close

play_arrow

link
brightness_4
code

<?php
    
    if ($_SERVER['REQUEST_METHOD'] == 'POST') {
          
        function get_data() {
            $datae = array();
            $datae[] = array(
                'Name' => $_POST['name'],
                'Branch' => $_POST['branch'],
                'College' => $_POST['college'],
            );
            return json_encode($datae);
        }
          
        $name = "gfg";
        $file_name = $name . '.json';
       
        if(file_put_contents(
            "$file_name", get_data())) {
                echo $file_name .' file created';
            }
        else {
            echo 'There is some error';
        }
    }
?>

chevron_right


Output: The content of “gfg.json” file shows the following 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.