Reputation: 510

Auto submit form every x seconds without page refresh and insert data into MYSQL?

I'm trying to auto submit a form every x seconds without refreshing the page and insert the data on the inputs in MYSQL database.

the issue is that I can insert the form's input value into the database with a submit button IF i click on the submit button manually... but if I use my Auto submit JavaScript code, it will not submit any data into the database!

I am using this AJAX code to prevent the form from refreshing (works fine and insert the data into mysql database without refreshing the page IF i click on the submit button):

jQuery(document).ready(function() {

$(function(){
    $('#locForm').on('submit', function(e){
        // prevent native form submission here
        e.preventDefault();

        // now do whatever you want here
        $.ajax({
            type: $(this).attr('method'), // <-- get method of form
            url: $(this).attr('action'), // <-- get action of form
            data: $(this).serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
            beforeSend: function(){

            },
            success: function(data){
            }
        });
    });
});
});

And this is my HTML form:

  <form id="locForm" name="locForm" target="_myFrame" action="location.php" method="post" >
  <input type="text" id="curLat" name="curLat"  value=""/>
  <input type="text" id="curLon" name="curLon"  value=""/>


  <input type="submit" value="submit" />
  </form>

and this is the code for Auto submitting the form every X seconds:

      window.onload = function() {

        var auto = setTimeout(function(){ autoRefresh(); }, 100);

        function submitform(){
          alert('test');
          document.forms["myForm"].submit();
        }

        function autoRefresh(){
           clearTimeout(auto);
           auto = setTimeout(function(){ submitform(); autoRefresh(); }, 10000);
        }

}

so, basically, everything works fine without and the form gets submitted without page refresh and the data gets inserted into mysql database IF and only IF i Manually press/click on the submit form but when I use the auto submit code above, nothing gets inserted into teh database!

Could someone please advise on this?

Thanks in advance.

EDIT:

this will insert the data into the database but it'll execute once and then it stops... The following code also, DOES NOT prevent the form action and opens the form's action="" in a new window:

var auto = setTimeout(function(){ autoRefresh(); }, 100);

function submitform(e){
  alert('test');
  document.forms["locForm"].submit();

  e.preventDefault();
}

function autoRefresh(){
   clearTimeout(auto);
   auto = setTimeout(function(){ submitform(); autoRefresh(); }, 10000);
}

Upvotes: 0

Answers (3)

Ryan IT

Reputation: 45

I created a sample using this code.

html code

<!DOCTYPE html>
<html>
<head>

<script>
$(function() {
function ajaxSubmit(form) {
    $.ajax({
        type: form.attr('method'), // <-- get method of form
        url: form.attr('action'), // <-- get action of form
        data: form.serialize(), // <-- serialize all fields into a string that is 
ready to be posted to your PHP file
        beforeSend: function(){

        },
        success: function(data){
        }
    });
}

$("#locForm").submit(function(e) {
    e.preventDefault();
    ajaxSubmit($(this));
});

setInterval(function() {
    ajaxSubmit($("#locForm"));
}, 10000);
});
</script>


<script>

  window.onload = function() {

var auto = setTimeout(function(){ autoRefresh(); }, 100);

function submitform(e){
alert('test');
document.forms["locForm"].submit();

e.preventDefault();
}

function autoRefresh(){
clearTimeout(auto);
auto = setTimeout(function(){ submitform(); autoRefresh(); }, 10000);
}

</script>

</head>

html code

<body>

<form id="locForm" name="locForm" target="" action="testingadd.php" method="post" >


<input type="text"  name="curLat"  value="" required>
<input type="text" name="curLon"  value="" required>


<input name="submit" type="submit" value="submit" />
</form>

</body>
</html>

testingadd.php form

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "testing_db" ;
$conn = mysqli_connect($servername, $username, $password, $dbname);

if (isset($_POST['submit'])){

$curLat =$_POST['curLat'];
$curLon =$_POST['curLon'];

$query = mysqli_query($conn, "INSERT INTO testing_table (curLat, curLon ) 
values ('$curLat', '$curLon' )");

}

else{
echo" ";
}

mysqli_close($conn); 

?>

<html>
<link rel="icon" href="ghsfavicon.png" type="image/gif" sizes="16x16">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="ghsfavicon.png" type="image/gif" sizes="16x16">

</head>
<body>

<center><h1> Submited!</h1></center>

</body>
</html>

Is this the right setup I need to do? I am new to javascript and ajax, and I want to know if this is possible for creating auto submit form and insert the fields into database.

Upvotes: 1

Barmar

Reputation: 780818

Put the AJAX code in a separate function, and call that periodically:

$(function() {
    function ajaxSubmit(form) {
        $.ajax({
            type: form.attr('method'), // <-- get method of form
            url: form.attr('action'), // <-- get action of form
            data: form.serialize(), // <-- serialize all fields into a string that is ready to be posted to your PHP file
            beforeSend: function(){

            },
            success: function(data){
            }
        });
    }

    $("#locForm").submit(function(e) {
        e.preventDefault();
        ajaxSubmit($(this));
    });

    setInterval(function() {
        ajaxSubmit($("#locForm"));
    }, 10000);
});

Upvotes: 1

Freez

Reputation: 7568

Just change

document.forms["myForm"].submit();

document.forms["locForm"].submit();

It will works better if the id of the form you want to submit exists ;)

Upvotes: 2

Auto submit form every x seconds without page refresh and insert data into MYSQL?

Answers (3)

Related Questions