No sending to database

I'm trying to mkae a simple association test in which people have to fill in their own association to 2 stimuli (presented together), the association (a few words) is then written to the database (MySQL) and will be used for testing later on.

I've gotten it to display everything I want but the association people should fill in is deleted every time and doesn't get written to the database, while the stimulus stays the same (doesn't go the next item where it should).

I pasted the code for the task, and the process page here:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Exp Test 2</title> <script language="javascript" type="text/javascript"> </script> <script> var djConfig = { locale: 'en', parseOnLoad: true, isDebug: true, }; </script> <script type="text/javascript" src="http://localhost/ExpressionEngine/assets/js/dojoroot/dojo/dojo.js"></script> <script> var face_list = [ //image, name, association, id ["female2.jpg","Maria","","1"], ["male3.jpg","Gerard","","2"], ["female3.jpg","Barbara","","3"] ]; var elaborate = { hint: [], // LONGTEXT string in the DB, called 'hint' subject_id: "group1", // TEXT string in the DB. } var subElab = function(/*String*/item_elab,/*String*/face_id) { elaborate.hint[elaborate.hint.length] = { face_id: face_id, item_elab: item_elab } } var counter = -1; function init() { nextFace(); } dojo.addOnLoad(function(){ init(); }); function checkElab() { var item_elab = document.getElementById("item_elaboration"); //item_elab.value = ""; //console.log(item_elab); if (item_elab == "") { alert("please insert your association"); } else { subElab(item_elab,counter); console.log(elaborate); console.log(dojo.toJson(elaborate)); nextFace(); } } function nextFace() { //var item_elab = document.getElementById("item_elaboration"); //item_elab.value = ""; counter += 1; if (counter >= face_list.length) { save(); } else { var stimulus = face_list[counter][0]; dojo.attr(dojo.byId("item_stimulus"),"src","../../assets/images/faces/"+stimulus); var response = face_list[counter][1]; dojo.byId("item_response").innerHTML = response; dojo.byId("item_elaboration").focus(); console.log(dojo.toJson(elaborate)); } } function save() { var x = dojo.toJson(elaborate); console.log("JSON: ",x); dojo.xhrPost( { url: "http:// ................process", postData: dojo.toJson(elaborate), handleAs: "json", load: function(item_elab) { alert("Data saved with success!"); return item_elab; }, error: function(item_elab) { alert("Error saving data: " + item_elab); } }); } function handleKeyPress(e,form) { var key=e.keyCode || e.which; if (key == 13) { checkElab(); } } </script> </head> <body> <h2> text </h2> <br/> text <br/><br/> <p>text</p> <div id="central_element"> <div>Stimulus</div> <div></div> <br/> <div>Response</div> <input id="item_elaboration" onkeypress="handleKeyPress(event,this.form)" style="width:250px"/> Elaboratie<br /> <button onclick="checkElab()">Check Elaboration</button> <br /> <button onclick="nextFace()">Next</button> </div> </body> </html>

Code:

<?php $method = $_SERVER['REQUEST_METHOD']; if ($method == 'POST' || $method == 'PUT') { $input_data = json_decode(file_get_contents('php://input')); } else { $input_data = $_GET; } $EE = get_instance(); $subject_id = $input_data->subject_id; $hint = $input_data->hint; if ($subject_id == "") { echo "Subject ID is a required field"; exit(1); } else if ($hint == array()) { echo "There are no elaborations to save"; exit(1); } else { $data = array( 'subject_id' => $subject_id, 'hint' => json_encode($hint) // convert to text string ); $sql = $EE->db->insert_string('exp_hinttest', $data); $EE->db->query($sql); if ($EE->db->affected_rows() == 1) { echo "{'status': 'correct'}"; } else { echo "{'status': 'error'}"; } } ?>

Anyone see what I'm doing wrong? I'm totally new at JS, dojo or php and have to learn from trial and error, so I'm curious as to what mistakes I am making.
Thanks!

You should isolate your problem. Too much code which is not related with your problem. What that dojo.js external file does? Is it related with your problem?

In fact: make clear what you want and want doe not work. Clear.

Okay, I'd say this is the most important part of the code where the problem might be.

It does not give any errors, just blanks out the answer bar again and does not load the next image. So it seems like it doesn't even get to the save() function.

Code:

var elaborate = { hint: [], // LONGTEXT string in the DB, called 'hint' subject_id: "group1", // TEXT string in the DB. } var subElab = function(/*String*/item_elab,/*String*/face_id) { elaborate.hint[elaborate.hint.length] = { face_id: face_id, item_elab: item_elab } } var counter = -1; function init() { nextFace(); } dojo.addOnLoad(function(){ init(); }); function checkElab() { var item_elab = document.getElementById("item_elaboration"); //item_elab.value = ""; //console.log(item_elab); if (item_elab == "") { alert("please insert your association"); } else { subElab(item_elab,counter); console.log(elaborate); console.log(dojo.toJson(elaborate)); nextFace(); } } function nextFace() { //var item_elab = document.getElementById("item_elaboration"); //item_elab.value = ""; counter += 1; if (counter >= face_list.length) { save(); } else { var stimulus = face_list[counter][0]; dojo.attr(dojo.byId("item_stimulus"),"src","../../assets/images/faces/"+stimulus); var response = face_list[counter][1]; dojo.byId("item_response").innerHTML = response; dojo.byId("item_elaboration").focus(); console.log(dojo.toJson(elaborate)); } } function save() { var x = dojo.toJson(elaborate); console.log("JSON: ",x); dojo.xhrPost( { url: "http:// ................process", postData: dojo.toJson(elaborate), handleAs: "json", load: function(item_elab) { alert("Data saved with success!"); return item_elab; }, error: function(item_elab) { alert("Error saving data: " + item_elab); } }); }

At a first glance - remove always the last coma after the last identifier in an object or array (see the red)

Code:

var elaborate = { hint: [], // LONGTEXT string in the DB, called 'hint' subject_id: "group1", // remove the last comma }