I want to run a code that allows automatic sending of the completed json form when internet connection is detected in the device. My ids for each of the question are dynamically generated. How do i send data on click of my submit button to the database while checking if there is internet connection if all my ids are dynamic?
<!DOCTYPE html>
<html>
<head>
<title>Form Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/panel2.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/rotation.js"></script> <!-- /rotation-->
<script src="js/panel2.js"></script> <!-- /panel2-->
<script type="text/javascript" src="cordova.js"></script>
<script src="form.json"></script>
</head>
<body>
<script src="js/fullscreen.js"></script> <!-- /fullscreen-->
<div data-role="page" id="demo-page" data-url="demo-page">
<div data-role="header" data-theme="b">
<h1></h1>
<a href="#left-panel" data-icon="carat-r" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a>
</div><!-- /header -->
<div role="main" class="ui-content jqm-content jqm-fullwidth" id="form-panel">
<h3 class="textaligncenter">This is a Form</h3>
<div id="questions">
</div>
<script>
var array = JSON.parse(arrayQuestions);
console.log(array);
for(var i=0;i<array.length;i++){
var question = array[i];
var questionDiv = document.createElement("div");
var html = "<form>";
html = question.question + " <br> ";
var choices = question.choices;
for(j=0;j<choices.length;j++){
var choicesOpt = choices[j];
if(question.type == "radio") {
html += "<fieldset data-role=\"controlgroup\">";
html += "<input type=\"radio\" name=\"" +i+ "\" id=\"" +i+choicesOpt+ "\" value=\"" +choicesOpt+ "\" /><label for=\"" +i+choicesOpt+ "\">" +choicesOpt+ "</label>";
html += "</fieldset>";
} else if(question.type == "checkbox"){
html += "<fieldset data-role=\"controlgroup\">";
html += "<input type=\"checkbox\" name=\"" +i+ "\" id=\"" +i+choicesOpt+ "\" value=\"" +choicesOpt+ "\" /><label for=\"" +i+choicesOpt+ "\">" +choicesOpt+ "</label>";
html += "</fieldset>";
} else if(question.type == "textbox"){
html += "<input type=\"text\" data-clear-btn=\"true\" name=\"" +i+ "\" id=\"" +i+choicesOpt+ "\" value=\"" +choicesOpt+ "\">";
} else {
html += "<textarea name=\"" +i+ "\" id=\"" +i+choicesOpt+ "\"></textarea>";
}
html += "";
}
html += "</form>";
// html += "<input type=\"button\" onclick=\"myFunction()\" value=\"Submit form\"></form>";
questionDiv.innerHTML = html + "<br>";
document.getElementById('questions').appendChild(questionDiv);
}
</script>
<script>
var buttonDiv = document.createElement("div");
var buttonHtml = "<input type=\"button\" onclick=\"saveFunction()\" id=\"save\" value=\"Save Form\"></form>";
buttonHtml += "<input type=\"button\" onclick=\"submitFunction()\" id=\"submit\" value=\"Submit Form\"></form>";
buttonDiv.innerHTML = buttonHtml + "<br>";
document.getElementById('questions').appendChild(buttonDiv);
document.addEventListener("deviceready",onDeviceReady, false);
document.addEventListener("online", OnlineEvent, false);
document.addEventListener("offline", OnDeviceOffline, false);
function onDeviceReady() {
}
function OnlineEvent(){
alert("You are online");
// $('#submit').on('click', function () {
// $.ajax({
// url: "connection.php",
// type: "POST",
// data: {
// choice: $('#"\" value=\"" +choicesOpt+ "\" ').val(),
//
// }
// datatype: "json",
// success: function (status) {
// if (status.success == false) {
// //alert a failure message
// } else {
// alert("Successfully submitted");
// }
// }
// });
// });
}
function OnDeviceOffline(){
alert("You are offline");
}
function saveFunction() {
//Save storage here
// window.location.href='status.html';
if (OnlineEvent()== true){
$('#submit').on('click', function () {
$.ajax({
url: "connection.php",
type: "POST",
data: {
choice: $('#"\" value=\"" +choicesOpt+ "\" ').val(),
}
datatype: "json",
success: function (status) {
if (status.success == false) {
//alert a failure message
} else {
alert("Successfully submitted");
}
}
});
});
}
}
function submitFunction() {
if (OnlineEvent()== true){
alert("Storage code here, send to server");
// STORAGE FUNCTION CODE HERE alert("Your form is successfully submitted!");
window.location.href='previewform.html';}
}
</script>
</div><!-- /content -->
</div>
</body>
</html>
<?php
$choice = json_decode($_POST['<script>choicesOpt</script>']);
//And this is how, i suppose, we will add the values to my table 'sample'
$sql = "INSERT INTO answers (choicesOpt) ";
$sql .= "VALUES ('$choicesOpt')";
if (!mysql_query($sql, $con)) {
die('Error: ' . mysql_error());
} else {
echo "Answers stored";
}
mysql_close($con);
?>
