Is there a method to post form without refreshing page and after a time interval?-CodePudding

I am using this ajax script to keep all the information on page even after pressing submit

<!DOCTYPE html>
        <html>
          <head>
            <title>AJAX POST Submit</title>
   
            <script>
            function ajaxpost () {
              // (A) GET FORM DATA
              var form = document.getElementById("myForm");
              var data = new FormData(form);
        
              // (B) AJAX
              var xhr = new XMLHttpRequest();
              xhr.open("POST", "0-dummy.php");
              // What to do when server responds
              xhr.onload = function () { console.log(this.response); };
              xhr.send(data);
        
              // (C) PREVENT HTML FORM SUBMIT
              return false;
            }
            </script>
          </head>
          <body>
            <form id="myForm" onsubmit="return ajaxpost()">
              Name: <input type="text" name="name" required/>
              Email: <input type="text" name="email" required/>
              <input type="submit" id = "hello"value="Go!"/>
            </form>
          </body>

I essentially want to update the form and post it to "dummy.php" after few mins without having to press submit button and erasing data on page.

          <script>
            //var div = document.getElementById('myForm');
            //var submitted = document.getElementById('hello');
            
                function CountDown(duration, display) {
            
                        var timer = duration, minutes, seconds;
            
                        var interVal=  setInterval(function () {
                            minutes = parseInt(timer / 60, 10);
                            seconds = parseInt(timer % 60, 10);
            
                            minutes = minutes < 10 ? "0"   minutes : minutes;
                            seconds = seconds < 10 ? "0"   seconds : seconds;
                    display.innerHTML ="<b>"   minutes   "m : "   seconds   "s"   "</b>";
                            if (timer > 0) {
                                --timer;
                            }else{
                        clearInterval(interVal)
                                document.getElementById('myForm').submit();
                                }
            
                        },1000);
            
                }
            
                function SubmitFunction(){
                //submitted.innerHTML="Time is up!";
                
                document.getElementById('myForm').submit();
            
                }
                //CountDown(5,div);
                
            </script>
        </html>

The reason I want it this way is because I am trying to make a html page which uses php to post the value of checkbox every few minutes to a text file. The value of the checkbox determines the circuit which is connected to a device which collects all the data from the text file.

CodePudding user response：

so what you need is just avoid most what you wrote and just stick to the following:

<input type="button" onclick="setInterval(ajaxpost,1000);" id = "hello"value="Go!"/>

the trick here at first change the type from submit to button.

What will happen after the first click on Go, it will keep sending every second, and delete onsubmit="return ajaxpost()"

the following is the test I made:

<!DOCTYPE html>
        <html>
          <head>
            <title>AJAX POST Submit</title>
   
            <script>
            function ajaxpost () {
              // (A) GET FORM DATA
              var form = document.getElementById("myForm");
              var data = new FormData(form);
        
              // (B) AJAX
              var xhr = new XMLHttpRequest();
              xhr.open("POST", "help.php");
              // What to do when server responds
              xhr.onload = function () { console.log(this.response); };
              xhr.send(data);
        
            }
            </script>
          </head>
          <body>
            <form id="myForm" >
              Name: <input type="text" name="name" required/>
              Email: <input type="text" name="email" required/>
              <input type="button" onclick="setInterval(ajaxpost,1000);" id = "hello"value="Go!"/>
            </form>
          </body>

and my hello.php was just:

<?php

echo $_POST["name"]."". $_POST["email"];

Hope that answers the question.