Append form data into a json file - php

Question

I want to append form data into a json file, here is my code however i'm not sure what I have done wrong. Every time I submit data via post I only get an error response. Where is this code going wrong?
HTML
<form class="ajax form-inline">
<div class="form-group">
<label for="exampleInputAmount">Yo, whats your first name?</label>
<div class="input-group">
<input type="text" class="form-control" id="fname" placeholder="First name">
</div>
</div>
<div class="form-group">
<label for="exampleInputAmount">&& Last name?</label>
<div class="input-group">
<input type="text" class="form-control" id="lname" placeholder="Last name">
</div>
</div>
<button type="submit" class="btn btn-primary">Submit to JSON</button>
</form>
JS/ Jquery
$('form.ajax').on('submit', function(){
var $fname = $("#fname")
var $lname = $("#lname")
var object = {
firstname: $fname.val(),
lastname: $lname.val(),
}
var params = JSON.stringify(object);
$.ajax({
type: 'POST',
data: params,
dataType: "json",
url: 'save_to_json.php',
success: function(data) {
console.log('success');
},
error: function(data) {
console.log('error');
},
complete: function() {
console.log('complete');
}
});
return false;
e.preventDefault()
});
PHP / save_to_json.php
<?php
if (!isset($_POST['params']) && !empty($_POST['params'])) {
$params = $_POST['params'];
$jsonObject = json_encode($params);
file_put_contents('my_json_data.json', $jsonObject, FILE_APPEND);
}
else {
echo "Noooooooob";
}
?>

Answer 1

First of all, use event.preventDefault() method to stop your form from being submitted.
Here's the reference:
event.preventDefault()
Second, there's no point using var params = JSON.stringify(object); in your code.
And finally, Remove this line dataType: "json", unless you're expecting a json object as response from server. dataType is the type of data that you're expecting back from the server.
So your jQuery script should be like this:
$(document).ready(function(){
$('form.ajax').on('submit', function(e){
e.preventDefault();
var $fname = $("#fname");
var $lname = $("#lname");
var params = {
firstname: $fname.val(),
lastname: $lname.val(),
}
$.ajax({
type: 'POST',
data: params,
url: 'save_to_json.php',
success: function(data) {
console.log('success');
},
error: function(data) {
console.log('error');
},
complete: function() {
console.log('complete');
}
});
return false;
});
});
And this is how you can process the AJAX request,
<?php
if (isset($_POST['firstname']) && isset($_POST['lastname'])) {
$params = array('firstname' => $_POST['firstname'], 'lastname' => $_POST['lastname']);
$jsonObject = json_encode($params);
file_put_contents('my_json_data.json', $jsonObject, FILE_APPEND);
}
else {
echo "Noooooooob";
}
?>
Edited:
Based on your requirement you should process the AJAX request like this:
<?php
if (isset($_POST['firstname']) && isset($_POST['lastname'])) {
$params = array('firstname' => $_POST['firstname'], 'lastname' => $_POST['lastname']);
$jsonObject = json_encode($params);
$json = file_get_contents('my_json_data.json');
if(empty($json)){
$jsonObject = json_encode(array('username' => [$jsonObject]));
file_put_contents('my_json_data.json', $jsonObject);
}else{
$json = json_decode($json, true);
$newJson = $json['username'][0] . "," . $jsonObject;
$jsonObject = json_encode(array('username' => [$newJson]));
file_put_contents('my_json_data.json', $jsonObject);
}
}
else {
echo "Noooooooob";
}
?>