I have a basic form that includes an input and a submit button. I'd like the value of the input to be converted into JSON and then that JSON to be placed in a file on the server for use later. I'm using AJAX and a small PHP script to handle the data and the file creation, however the JSON file (test.json) is never created.

HTML Markup

<input id="title" type="text" name="title" value="Page Title"/>
<button type="submit" value="submit" id="submit">Submit</button>

JS

var submit = $('#submit');
var title = $('#title');

function createJSON() {
    var jsonObj = [];
    title.each(function() {

        var value = $(this).val();
        var item = {};
        item.title = value;
        jsonObj.push(item);
    });

    $.ajax({
        url:     "create-file.php",
        data: {
            data: jsonObj
        },
        type: "POST"
    });   
}

submit.on('click', function() {
    createJSON();
});

PHP (create-file.php)

<?php
    $json = $_POST['data'];
    $info = json_encode($json);
    $file = fopen('test.json','w+') or die("File not found");
    fwrite($file, $info);
    fclose($file);
?>

JSON

[
    {
        title: "Page Title"
    }
]

I have a basic form that includes an input and a submit button. I'd like the value of the input to be converted into JSON and then that JSON to be placed in a file on the server for use later. I'm using AJAX and a small PHP script to handle the data and the file creation, however the JSON file (test.json) is never created.

HTML Markup

<input id="title" type="text" name="title" value="Page Title"/>
<button type="submit" value="submit" id="submit">Submit</button>

JS

var submit = $('#submit');
var title = $('#title');

function createJSON() {
    var jsonObj = [];
    title.each(function() {

        var value = $(this).val();
        var item = {};
        item.title = value;
        jsonObj.push(item);
    });

    $.ajax({
        url:     "create-file.php",
        data: {
            data: jsonObj
        },
        type: "POST"
    });   
}

submit.on('click', function() {
    createJSON();
});

PHP (create-file.php)

<?php
    $json = $_POST['data'];
    $info = json_encode($json);
    $file = fopen('test.json','w+') or die("File not found");
    fwrite($file, $info);
    fclose($file);
?>

JSON

[
    {
        title: "Page Title"
    }
]

• javascript
• php
• jquery
• json
• ajax

• what error you are getting? – Death-is-the-real-truth Commented May 9, 2017 at 9:58
• @AlivetoDie I'm not getting an error. The script creates the JSON fine, it gets passed via the AJAX call, and then nothing. – Ryan Commented May 9, 2017 at 10:00
• There has to be an error. Are you sure no file within the script location is created? – Tobias F. Commented May 9, 2017 at 10:00
• $json = $_POST['json']; need to be $json = $_POST['data']; – Death-is-the-real-truth Commented May 9, 2017 at 10:01
• @AlivetoDie Updated, thanks, but the issue remains. – Ryan Commented May 9, 2017 at 10:04

2 Answers 2

You have data: {data: jsonObj}, so in php it need to be:-

$json = $_POST['data'];

Add some error reporting in php page too so that you will get details about error.when all errors are solved then ment those lines.

Do like below:-

<?php
    //ment these two lines when errors are resolved
    error_reporting(E_ALL);
    ini_set('display_errors',1);

    $json = $_POST['data']; //json need to be data
    $info = json_encode($json);
    $file = fopen('test.json','w+') or die("File not found");
    fwrite($file, $info);
    fclose($file);exit;
?>

I have checked it and it's working at my local end

Note:- you have title.each(function() { where title = $('#title');.

In future if you have more than one text-box then convert id to class like this:-

<input class="title" type="text" name="title" value="Page Title"/>

Hi You need to write like below code:

$json = $_POST['data'];//$_POST['json'];    
$info = json_encode($json);    
$file = fopen('test.json','w+') or die("File not found");
fwrite($file, $info);
fclose($file);
die;

it will write json in file test.json like [{"title":"Page Title"}]