title: Posting form data of one form as nested json in a json file that has data from another file
body: <p>Title of this question can be confusing. I'm clarifying it here. I've 2 forms: One for <code>timeline</code> and another one for <code>events</code>.<br>
  <strong><code>HTML code:</code></strong>  </p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="jquery-ui.css"&gt;
  &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
    .error {color: #FF0000;}
    /* The Modal (background) */
  .modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: -75px;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content */
  .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      border: 1px solid #888;
      width: 80%;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      -webkit-animation-name: animatetop;
      -webkit-animation-duration: 0.4s;
      animation-name: animatetop;
      animation-duration: 0.4s
  }
  
  /* Add Animation */
  @-webkit-keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
  }
  
  @keyframes animatetop {
      from {top:-300px; opacity:0}
      to {top:0; opacity:1}
  }
  
  /* The Close Button */
  .close {
      color: white;
      float: right;
      font-size: 28px;
      font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
  }
  
  .modal-header {
      padding: 2px 16px;
      background-color: #5cb85c;
      color: white;
  }
  
  .modal-body {padding: 2px 16px;}
  
  .modal-footer {
      padding: 2px 16px;
      background-color: #5cb85c;
      color: white;
  }
  &lt;/style&gt;
  
  &lt;div id="btnDiv"&gt;
    &lt;button id="btn"&gt;Click here to create a new time line!&lt;/button&gt;
    &lt;button id="btnOne"&gt;Click here to create a new Event!&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="myModal" class="modal"&gt;
  
    &lt;!-- Modal content --&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;span class="close"&gt;X&lt;/span&gt;
        &lt;h2&gt;Modal Header&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;p&gt;&lt;span class="error"&gt;* required field.&lt;/span&gt;&lt;/p&gt;
          &lt;form method="post" action="&lt;?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?&gt;"&gt;  
            Name: &lt;input type="text" name="name"&gt;
            &lt;span class="error"&gt;* &lt;?php echo $nameErr;?&gt;&lt;/span&gt;
            &lt;br&gt;&lt;br&gt;
            E-mail: &lt;input type="text" name="email"&gt;
            &lt;span class="error"&gt;* &lt;?php echo $emailErr;?&gt;&lt;/span&gt;
            &lt;br&gt;&lt;br&gt;
            Website: &lt;input type="text" name="website"&gt;
            &lt;span class="error"&gt;&lt;?php echo $websiteErr;?&gt;&lt;/span&gt;
            &lt;br&gt;&lt;br&gt;
            Comment: &lt;textarea name="comment" rows="5" cols="40"&gt;&lt;/textarea&gt;
            &lt;br&gt;&lt;br&gt;
            Gender:
            &lt;input type="radio" name="gender" value="female"&gt;Female
            &lt;input type="radio" name="gender" value="male"&gt;Male
            &lt;span class="error"&gt;* &lt;?php echo $genderErr;?&gt;&lt;/span&gt;
            &lt;br&gt;&lt;br&gt;
            qwe: &lt;textarea name="qwe" rows="5" cols="40"&gt;&lt;/textarea&gt;
            &lt;br&gt;&lt;br&gt;
            rty: &lt;textarea name="rty" rows="5" cols="40"&gt;&lt;/textarea&gt;
            &lt;br&gt;&lt;br&gt;
            abc: &lt;textarea name="abc" rows="5" cols="40"&gt;&lt;/textarea&gt;
            &lt;br&gt;&lt;br&gt;
            def: &lt;textarea name="def" rows="5" cols="40"&gt;&lt;/textarea&gt;
            &lt;br&gt;&lt;br&gt;
            dob: &lt;input type="text" id="dob" name="dob"&gt;
            &lt;br&gt;&lt;br&gt;
            &lt;input type="submit" value="Submit"&gt;  
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;h3&gt;Modal Footer&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="myModalOne" class="modal"&gt;
  
    &lt;!-- Modal content --&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;span class="close"&gt;X&lt;/span&gt;
        &lt;h2&gt;Modal Header&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;p&gt;&lt;span class="error"&gt;* required field.&lt;/span&gt;&lt;/p&gt;
          &lt;form method="post" action="&lt;?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?&gt;"&gt;  
            Name: &lt;input type="text" name="name"&gt;
            &lt;span class="error"&gt;* &lt;?php echo $nameErr;?&gt;&lt;/span&gt;
            &lt;br&gt;&lt;br&gt;
            E-mail: &lt;input type="text" name="email"&gt;
            &lt;span class="error"&gt;* &lt;?php echo $emailErr;?&gt;&lt;/span&gt;
            &lt;br&gt;&lt;br&gt;
            Website: &lt;input type="text" name="website"&gt;
            &lt;span class="error"&gt;&lt;?php echo $websiteErr;?&gt;&lt;/span&gt;
            &lt;br&gt;&lt;br&gt;
            Comment: &lt;textarea name="comment" rows="5" cols="40"&gt;&lt;/textarea&gt;
            &lt;br&gt;&lt;br&gt;
            dob: &lt;input type="text" id="dobOne" name="dob"&gt;
            &lt;br&gt;&lt;br&gt;
            &lt;input type="submit" value="Submit"&gt;  
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;h3&gt;Modal Footer&lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  
  &lt;script&gt;
    $(function() {
      $( "#dob" ).datepicker();
      $( "#dobOne" ).datepicker();
    });
    //modal for timeline
    // Get the modal
  var modal = document.getElementById('myModal');
  
  // Get the button that opens the modal
  var btn = document.getElementById("btn");
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks the button, open the modal
  btn.onclick = function() {
      modal.style.display = "block";
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
      modal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == modal) {
          modal.style.display = "none";
      }
  }
  
  //modal for events
    // Get the modal
  var modalOne = document.getElementById('myModalOne');
  
  // Get the button that opens the modal
  var btn = document.getElementById("btnOne");
  
  // Get the &lt;span&gt; element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks the button, open the modal
  btn.onclick = function() {
      modalOne.style.display = "block";
  }
  
  // When the user clicks on &lt;span&gt; (x), close the modal
  span.onclick = function() {
      modalOne.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
      if (event.target == modal) {
          modalOne.style.display = "none";
      }
  }
  function alertjson(e) {
    var file = new XMLHttpRequest();
    var file_path = 
    file.open(validation-data.json, r);
  
  }
  &lt;/script&gt;  
  </code></pre>
  
  <p><strong><code>PHP code:</code></strong>  </p>
  
  <pre><code>&lt;?php
  // define variables and set to empty values
  $nameErr = $emailErr = $genderErr = $websiteErr = "";
  $name = $email = $gender = $comment = $website = $qwe = $rty = $abc = $def = $dob = "";
  
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (empty($_POST["name"])) {
      $nameErr = "Name is required";
    } else {
      $name = test_input($_POST["name"]);
    }
  
    if (empty($_POST["email"])) {
      $emailErr = "Email is required";
    } else {
      $email = test_input($_POST["email"]);
    }
  
    if (empty($_POST["website"])) {
      $website = "";
    } else {
      $website = test_input($_POST["website"]);
    }
  
    if (empty($_POST["comment"])) {
      $comment = "";
    } else {
      $comment = test_input($_POST["comment"]);
    }
  
    if (empty($_POST["gender"])) {
      $genderErr = "Gender is required";
    } else {
      $gender = test_input($_POST["gender"]);
    }
  
    if (empty($_POST["qwe"])) {
      $qweErr = "Gender is required";
    } else {
      $qwe = test_input($_POST["qwe"]);
    }
  
    if (empty($_POST["rty"])) {
      $rtyErr = "Gender is required";
    } else {
      $rty = test_input($_POST["rty"]);
    }
  
    if (empty($_POST["abc"])) {
      $abcErr = "Gender is required";
    } else {
      $abc = test_input($_POST["abc"]);
    }
  
    if (empty($_POST["def"])) {
      $defErr = "Gender is required";
    } else {
      $def = test_input($_POST["def"]);
    }
  
    if (empty($_POST["dob"])) {
      $dobErr = "Gender is required";
    } else {
      $dob = test_input($_POST["dob"]);
    }
  }
  
  function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    // echo $data; //print data 
  }
  
  $file = dirname(__FILE__).'/validation-data.json';
  $file_content = file_put_contents($file, json_encode($_REQUEST, JSON_PRETTY_PRINT));
  //echo $file_content;
  //var_dump($file_content);
  ?&gt;  
  &lt;?php
    echo "&lt;h2&gt;Your Input:&lt;/h2&gt;";
    echo $name;
    echo "&lt;br&gt;";
    echo $email;
    echo "&lt;br&gt;";
    echo $website;
    echo "&lt;br&gt;";
    echo $comment;
    echo "&lt;br&gt;";
    echo $gender;
    echo "&lt;br&gt;";
    echo $qwe;
    echo "&lt;br&gt;";
    echo $rty;
    echo "&lt;br&gt;";
    echo $abc;
    echo "&lt;br&gt;";
    echo $def;
    echo "&lt;br&gt;";
    echo $dob;
  ?&gt;  
  </code></pre>
  
  <p><code>PHP code</code> which writes form data to json is:  </p>
  
  <pre><code>$file = dirname(__FILE__).'/validation-data.json';
  $file_content = file_put_contents($file, json_encode($_REQUEST, JSON_PRETTY_PRINT));  
  </code></pre>
  
  <p>Whenever I submit the data of any one form, it gets written to json file successfully. This is the example json:  </p>
  
  <pre><code>{
      "name": "asd",
      "email": "test@attendize.website",
      "website": "esdfs",
      "comment": "qasdas",
      "dob": "08\/03\/2016"
  }  
  </code></pre>
  
  <p>If I fill the data of another  form and submit, then old values are just replaced by new values. But I want new data to written into same json file as nested values. How can I do it? </p>