Skip to content
Related Articles

Related Articles

Improve Article
How to send data of HTML form directly to JSON file?
  • Difficulty Level : Medium
  • Last Updated : 23 Jul, 2020

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.




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

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




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

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :