将一个表单的表单数据作为嵌套json发布到具有另一个文件数据的json文件中 - Posting form data of one form as nested json in a json file that has data from another file

这个问题的标题可能令人困惑。我在这里澄清。我有两个表单：一个用于timeline，另一个用于events
HTML code:

<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<style>
  .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;
}
</style>
<div id="btnDiv">
  <button id="btn">Click here to create a new time line!</button>
  <button id="btnOne">Click here to create a new Event!</button>
</div>
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">X</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p><span class="error">* required field.</span></p>
        <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
          Name: <input type="text" name="name">
          <span class="error">* <?php echo $nameErr;?></span>
          <br><br>
          E-mail: <input type="text" name="email">
          <span class="error">* <?php echo $emailErr;?></span>
          <br><br>
          Website: <input type="text" name="website">
          <span class="error"><?php echo $websiteErr;?></span>
          <br><br>
          Comment: <textarea name="comment" rows="5" cols="40"></textarea>
          <br><br>
          Gender:
          <input type="radio" name="gender" value="female">Female
          <input type="radio" name="gender" value="male">Male
          <span class="error">* <?php echo $genderErr;?></span>
          <br><br>
          qwe: <textarea name="qwe" rows="5" cols="40"></textarea>
          <br><br>
          rty: <textarea name="rty" rows="5" cols="40"></textarea>
          <br><br>
          abc: <textarea name="abc" rows="5" cols="40"></textarea>
          <br><br>
          def: <textarea name="def" rows="5" cols="40"></textarea>
          <br><br>
          dob: <input type="text" id="dob" name="dob">
          <br><br>
          <input type="submit" value="Submit">  
        </form>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>
<div id="myModalOne" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">X</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p><span class="error">* required field.</span></p>
        <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
          Name: <input type="text" name="name">
          <span class="error">* <?php echo $nameErr;?></span>
          <br><br>
          E-mail: <input type="text" name="email">
          <span class="error">* <?php echo $emailErr;?></span>
          <br><br>
          Website: <input type="text" name="website">
          <span class="error"><?php echo $websiteErr;?></span>
          <br><br>
          Comment: <textarea name="comment" rows="5" cols="40"></textarea>
          <br><br>
          dob: <input type="text" id="dobOne" name="dob">
          <br><br>
          <input type="submit" value="Submit">  
        </form>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>
</div>


<script>
  $(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 <span> 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 <span> (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 <span> 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 <span> (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);
}
</script>

PHP code:

<?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);
?>  
<?php
  echo "<h2>Your Input:</h2>";
  echo $name;
  echo "<br>";
  echo $email;
  echo "<br>";
  echo $website;
  echo "<br>";
  echo $comment;
  echo "<br>";
  echo $gender;
  echo "<br>";
  echo $qwe;
  echo "<br>";
  echo $rty;
  echo "<br>";
  echo $abc;
  echo "<br>";
  echo $def;
  echo "<br>";
  echo $dob;
?>

将表单数据写入json的PHP code是：

$file = dirname(__FILE__).'/validation-data.json';
$file_content = file_put_contents($file, json_encode($_REQUEST, JSON_PRETTY_PRINT));

每当我提交任何一个表单的数据时，它都会成功地写入json文件。这是示例json:

{
    "name": "asd",
    "email": "test@attendize.website",
    "website": "esdfs",
    "comment": "qasdas",
    "dob": "08'/03'/2016"
}

如果我填写另一个表单的数据并提交，那么旧的值就会被新的值所取代。但我希望将新数据作为嵌套值写入到相同的json文件中。我该怎么做？

这应该是一个临时解决方案，因为它并不完美，可以用更安全、更可靠的方式实现。这会受到它工作方式的限制，所以你应该调整它以获得更好的结果。但总的来说，它正在发挥作用，有些事情发生了很大的变化。

所有PHP代码（除了Your Input语句）都是HTML和JS之上的模式

这将解决注意错误，因为现在我已经启用error_reporting来显示所有错误，并且两个模式都充满了这些注意。

在你的第二个模态中，我还放了一行新行（就在提交行之前）：

<input type="hidden" value="1" name="secondModal">

最后，修改了PHP代码（实际上修改了很多）

所有更改的区域都在PHP代码的末尾。

if (empty($_POST["dob"])) {
   $dobErr = "Gender is required";
} else {
   $dob = test_input($_POST["dob"]);
}
// All those ifs above
// Add all values into array
$array = array(
  'name' => $name,
  'email' => $email,
  'website' => $website,
  'comment' => $comment,
  'gender' => $gender,
  'qwe' => $qwe,
  'rty' => $rty,
  'abc' => $abc,
  'def' => $def,
  'dob' => $dob
);
// Was this the second modal?
if ($_POST['secondModal'] == 1) {
    // Get serialized values from temporary file
    $content = file_get_contents('temp_array.txt');
    $array = unserialize($content);
    // Add into already existing array new values
    $array['name2'] = $name;
    $array['email2'] = $email;
    $array['website2'] = $website;
    $array['comment2'] = $comment;
    $array['dob2'] = $dob;
    // Add newly modified array into .json file
    $file = dirname(__FILE__).'/validation-data.json';
    file_put_contents($file, json_encode($array, JSON_PRETTY_PRINT));  
} else {
    // Serializing array for much easier reading when we use this later
    $results = serialize($array);
    file_put_contents('temp_array.txt', '');
    file_put_contents('temp_array.txt', $results);
}
// End of PHP code

这里的主要思想是将序列化的$array存储到临时.txt文件中。在我们填写完第二个Modal之后，我们通过取消序列化并添加新值来检索相同的数组。然后我们存储到.json文件中。

这将产生一个数组，其中包含来自两个模态的值。