Submit issues with form that interact with an API

Question

I have a form that interacts with an API, I used a simple auto submit:

<script type="text/javascript">
    window.setTimeout(function(){
        document.getElementById('formSubmit').submit();
    },1000*20);
</script>

and it worked great in the testing environment. We moved into a new environment and the setup of the hardware was slightly different, realized that didn't work and altered it. Now my auto submit isn't working. The API developers suggested I use watchdog instead so I applied a code according from @Drakes and modified it to interact with my application. This also did not work. I am a noob with Watchdog, and most things in the development world, did I skip a set up with watchdog that wasn't referenced in the previous question?

function watchdog() {
    var xmlhttp;
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5 - whatever, it doesn't hurt
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {

            // This is how you can discover a server-side change
            if(xmlhttp.responseText !== "<?php echo $currentValue; ?>") {
                document.location.reload(true); // Don't reuse cache
            }
        }
    };
    xmlhttp.open("POST","page.php",true);
    xmlhttp.send();
}

// Call watchdog() every 20 seconds
setInterval(function(){ watchdog(); }, 20000);

Thanks @ Grundy. It looks better in my source page but doesn't copy over well. — Shea Price, Feb 17 '16 at 17:51
@parnasree-chowdhury answer was correct. I am not able to post the version of my code that works as their is still an issue in my environment unrelated to code. Using error_reporting I was able to prove my code had no issues. — Shea Price, Feb 17 '16 at 22:34

Parnasree Chowdhury · Accepted Answer · 2016-02-17T21:53:27.180

I think you haven't posted the field values [Fields of the form]. The AJAX code you have used is checking if some value got changed or not every 20 second. But as much as I can understand you wanted to submit your form every 20 second. In that case the AJAX post code need some editing. May be the following thing can solve your problem. Here I am assuming your form having two fields and hence two values are getting submitted. If you have more then you have to modify it as per your requirement.

EDITED MY TESTCODE (This is tested)

The html code along with the AJAX script is as follows -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
function watchdog(value1,value2) {
var xmlhttp;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
} else {
    // code for IE6, IE5 - whatever, it doesn't hurt
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {

        // write any code as this block will be executed only after form succesfully submitted.
  document.getElementById("showresponse").innerHTML = xmlhttp.responseText;
        console.log(xmlhttp.responseText);// You can use this responseText as per your wish
        }
    }
xmlhttp.open("POST","process.php?value1="+value1+"&value2="+value2,true);
xmlhttp.send();
}

// Call watchdog() every 20 seconds
 window.setInterval(function(){ 
 var myForm = document.getElementById('formSubmit');
 var value1 = myForm.elements["field1"].value;
 var value2 = myForm.elements["field2"].value;
 // thus store all required field values in variables , 
 //here as instance I am assuming the form has two fields , hence posting two values
  watchdog(value1,value2); 
  }, 20000);
  
  function submitIt(){
  var myForm = document.getElementById('formSubmit');
 var value1 = myForm.elements["field1"].value;
 var value2 = myForm.elements["field2"].value;
 watchdog(value1,value2);
  }
</script>
</head>

<body>
<form id="formSubmit">
<input type="text" name="field1" value="value1" />
<input type="text" name="field2" value="value2" />
<button type="button" onclick="submitIt();">Submit</button>
</form>
<div id="showresponse"></div>
</body>
</html>

The php code of process.php will be as follows -->

<?php
 if(isset($_REQUEST['value1']) && isset($_REQUEST['value1']))
  {
   $value1 = $_REQUEST['value1'];
   $value2 = $_REQUEST['value2'];
   echo "Values are respectively : " .$value1." and ".$value2;
  }
 else
 {
  echo "Data not found";
 }
 ?>

While testing the above code sample dont forget to keep both html and process.php files in same folder and then test it. The above shown "Run Code snippet" button will not show you any effect of the php code as it only runs html and javascript. So to test it properly you should keep it on some server - local or online .

Ideally I could see if there was any product information pulled into the form and if so if the user didn't hit the done button after 20 seconds then the form would send. I also tried this and it didn't submit... could you test it on your end to make sure this call works? I think there is an issue with the API but I don't have a way to debug the API @Parnasree Chowdhury — Shea Price, Feb 17 '16 at 19:36
I have edited my code and tested, its working. But I dont know whether it will serve your purpose or not, but this code sample is submitting the forma data automatically in every 20 seconds. You can check it. — Parnasree Chowdhury, Feb 17 '16 at 21:40
I have checked it and it doesn't work. I have debugged and error checked my code (and all subsequent code) and they don't come back with errors. I'm trying to figure out if it is my code how. Thanks again! — Shea Price, Feb 17 '16 at 21:42
Have you tested my edited code on your side ? It is working here. Just a reminder - In case you are testing this particular code dont forget to keep the process.php file along with html file. — Parnasree Chowdhury, Feb 17 '16 at 21:44
I tested your code on my computer and it works, in the testing environment no auto submits are working... I think this solved my problem! Thank you again! — Shea Price, Feb 17 '16 at 22:09

Submit issues with form that interact with an API

1 Answers1