我如何将数据从已完成的json表单发送到php数据库
[英]How do i send data from completed json form to php database
问题描述
我想运行一个允许在设备中检测到互联网连接时自动发送完成的json表单的代码。 我对每个问题的ID是动态生成的。 如果我所有的ID都是动态的，如何在单击提交按钮时将数据发送到数据库，同时检查是否存在Internet连接？
<!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);
?>
1 个解决方案
解决方案1
0 2015-07-27 07:49:01
让我们逐步解决此问题：
- 首先用于自动检查Internet连接有一个不错的JS库，用于检查Internet连接，称为Offline.js。
使用
document.addEventListener("online", OnlineEvent, false);
document.addEventListener("offline", OnDeviceOffline, false);
非常不可预测，因为这在不同的浏览器中会有不同的表现
- 为了得到自动生成的ID值的是JQuery的事业称为
jQuery.each()查看详情点击这里
范例：
$('input[id^="txtAnswer"]').each(function(input){ var value = $('input[id^="txtAnswer"]').val(); var id = $('input[id^="txtAnswer"]').attr('id'); // you can now make a JSON containing answer or array with Key as post url parameter then make a ajax call after ending the loop and outside this loop });
当它们不是来自HTML表单时，如何将PHP POST和FILES数据发送到AJAX URL调用？
[英]How do I send PHP POST and FILES data to an AJAX URL call when they are not from an HTML form?
我怎样才能获得表单数据用javascript验证它并使用php将其发送到数据库
[英]how can i get form data validate it with javascript and send it to database using php
如何使用 javascript（不使用 jquery）将 HTML 表单数据发送到 JSON？
[英]How do I send HTML form data to JSON using javascript (without jquery)?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.