Question

我想运行一个代码，允许在设备中检测到互联网连接时自动发送已完成的json表单。我的每个问题的ID都是动态生成的。如果我的所有ID都是动态的，如何检查是否存在互联网连接，如何将点击我的提交按钮的数据发送到数据库？

<!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);

    ?>

Answer 1

让我们一步一步解决这个问题：

首先自动检查Internet连接有一个很好的JS库来检查名为Offline.js

        if (item != null)
        {
            this.displayItems = new List<ExtraDisplayItems> //Error
            {
                new ExtraDisplayItems 
                { 
                    ...
                }
            };
            dgAddExtras.Items.Add(item);
        }

高度不可预测，因为这在不同的浏览器中表现不同

为了获取自动生成的id的值，他们是名为document.addEventListener("online", OnlineEvent, false); document.addEventListener("offline", OnDeviceOffline, false);的JQuery实用程序。请参阅详细信息here
示例：

jQuery.each()

如何将完成的json表单中的数据发送到php数据库

1 个答案: