problem writing to json file

+1 Marie Goodwyn · November 17, 2014
I am new at this so pardon my ignorance. I am trying to make a form to send data to a json file that will be later used to create a quiz with edge Animate. the quiz works fine with a json file I wrote. Now I want the teachers to be able to add questions to the json file from the form so they do not have to touch the json file.
I get the data posted to the html but not to the file.
Testing here: http://mjpagedesign.com/testphp/

Here is the code
PHP
if (!isset($_POST['params'])) {
        $params = $_POST['params'];
        $jsonObject = json_encode($params);
        file_put_content('myData.json', $jsonObject, FILE_APPEND);
echo '$jsonObject';
    }

html:

<script type="text/javascript">
     $(document).ready(function() {
$("#submit").click(function(){
         var postData = {
                question: $("#question").val(),
                answer1: $("#answer1").val(),
answer2: $("#answer2").val(),
answer3: $("#answer3").val(),
answer4: $("#answer4").val(),
correctAnswer: $("#correctAnswer").val(),
                image: $("#image").val(),
                feedbackInfo: $("#feedbackInfo").val()
            };

var params = JSON.stringify(postData);
$.ajax({           
            type: "POST",
data: params, 
contentType:"application/json",
url: "submit.php",                  
            success: function (data) {
$("#myData").html("this data was posted: " + params);
            },
error: function(e){
               alert('failed');
            }
        });
});

    }); 
</script>

<form id="newQuestion" name="newQuestion" method="post">
<label for="question">Question:</label>
    <input id="question" name="question" type="text" /><br>
<label for="answer1">Answer 1 or distractor: </label>
    <input id="answer1" name="answer1" type="text" /><br>
<label for="answer">Answer 2 or distractor: </label>
    <input id="answer2" name="answer2" type="text" /><br>
<label for="answer">Answer 3 or distractor: </label>
    <input id="answer3" name="answer3" type="text"  /><br>
<label for="question">Answer 4 or distractor: </label><br>  
    <input id="answer4" name="answer4" type="text"  /><br>
<label for="correctAnswer">Correct answer number: </label>
    <input id="correctAnswer" name="correctAnswer" type="text" /><br> 
<label for="image">Image name (Exampe: for house.png simply enter: house): </label>
    <input id="image" name="image" type="text"  /> <br>
<label for="feedbackInfo">Info about the question: </label>
    <input id="feedbackInfo" name="feedbackInfo" type="text" /> <br>        
<input type="button" value="submit" name="submit" id="submit"/>  
</form>

Post a Reply

Replies

- page 3
Oldest  Newest  Rating
0 Marie Goodwyn · November 18, 2014
Hello wheately and thank you so much for your help. I know how this feels since I am one of the top contributors on the Edge Animate forum. Is there a way to give you credit for this answer? 

So, It does post to the file which is great progress!!! 
However the data is not quite in the format that I need for Edge Animate. Currently the format for the json file is and should remain as below. I expected stringify to format the data properly. (fake data below)



[
        {
            "question":"What is the color of charcoal",
            "answer1":"black",
            "answer2":"red",
            "answer3":"yellow",
   "answer4":"white",
            "answer":"1",
            "image":"chacoal",
   "feedbackInfo":"Charcoal is usually black and has many usage applications."
        },
 {
            "question":"What is the color of sand",
            "answer1":"black",
            "answer2":"red",
            "answer3":"yellow",
   "answer4":"brown",
            "answer":"3",  
            "image":"sand",
   "feedbackInfo":"Sand is usually yellow but can also be white or grey."
        }
]

and what I got from your file is:

"{\"question\":\"test\",\"answer1\":\"test\",\"answer2\":\"test\",\"answer3\":\"test\",\"answer4\":\"test\",\"correctAnswer\":\"test\",\"image\":\"test\",\"feedbackInfo\":\"test\"}""

Which contains extra quotation marks and \. I wonder if there is a way to get ride of the unwanted stuff. Ideally what is between {} should be added and followed by a comma as shown in the example above. If the format is different, I will not be able to use the json file with Edge Animate. 

This form is a avoid having teachers write their own json file since it is a little complicated for non-coder!
0 Marie Goodwyn · November 17, 2014
I am so grateful for your time and help. I am still getting null. I used the get the string for the selector but now I am not getting anything there either. It seems that params from the jquery does not get into $param in the php.
0 Marie Goodwyn · November 17, 2014
Thank you for helping me. There is not difference. I get null. 
Here is a link to my files in case you want to have a look at it.
Thanks again.
https://app.box.com/s/zj0413dwwxk7rig1nifz
0 Marie Goodwyn · November 17, 2014
I do not get an error. It is now just adding null to the file.

Here is the file now:

[
{
"question":"",
"answer1":"",
"answer2":"",
"answer3":"",
"answer4":"",
"correctAnswer":"",
"image":"",
"feedbackInfo":""
}
]nullnull
0 Marie Goodwyn · November 17, 2014
Also I change the php to:

<?php        
    if (!isset($_POST['params']) && !empty($_POST['params'])) {
        $params = $_POST['params'];
        $jsonObject = json_encode($params);
        file_put_contents('myData.json', $jsonObject, FILE_APPEND);
}
?>

but it is not helping.

Also, I would like the data to be included between the [ ], not after.
0 Marie Goodwyn · November 17, 2014
Oops! Sorry.
I found some error in the php but now it return null - So it is some progress but not enough :( I was missing the s in file_put+contents.

if (!isset($_POST['params'])) {
$params = $_POST['params'];
$jsonObject = json_encode($params);
file_put_contents('myData.json', $jsonObject, FILE_APPEND);
echo '$jsonObject';
}


$(document).ready(function() {
$("#submit").click(function(){
var postData = {
question: $("#question").val(),
answer1: $("#answer1").val(),
answer2: $("#answer2").val(),
answer3: $("#answer3").val(),
answer4: $("#answer4").val(),
correctAnswer: $("#correctAnswer").val(),
image: $("#image").val(),
feedbackInfo: $("#feedbackInfo").val()
};

var params = JSON.stringify(postData);
$.ajax({ 
type: "POST",
data: params,
contentType:"application/json",
url: "submit.php", 
success: function (data) {
$("#myData").html("this data was posted: " + params);
},
error: function(e){
alert('failed');
}
});
});

});


and the html form

<form id="newQuestion" name="newQuestion" method="post">
<label for="question">Question:</label>
<input id="question" name="question" type="text" /><br>
<label for="answer1">Answer 1 or distractor: </label>
<input id="answer1" name="answer1" type="text" /><br>
<label for="answer">Answer 2 or distractor: </label>
<input id="answer2" name="answer2" type="text" /><br>
<label for="answer">Answer 3 or distractor: </label>
<input id="answer3" name="answer3" type="text" /><br>
<label for="question">Answer 4 or distractor: </label><br> 
<input id="answer4" name="answer4" type="text" /><br>
<label for="correctAnswer">Correct answer number: </label>
<input id="correctAnswer" name="correctAnswer" type="text" /><br>
<label for="image">Image name (Exampe: for house.png simply enter: house): </label>
<input id="image" name="image" type="text" /> <br>
<label for="feedbackInfo">Info about the question: </label>
<input id="feedbackInfo" name="feedbackInfo" type="text" /> <br> 
<input type="button" value="submit" name="submit" id="submit"/> 
</form>

PHP

107,081 followers
About

Server-side, HTML embedded scripting language used to create dynamic Web pages.

Links
Moderators