CODEWITHSUNDEEP
javascriptphpajax
Shea Price
Shea Price

Reputation: 123

Submit issues with form that interact with an API

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

Upvotes: 1

Views: 91

Answers (1)

Parnasree Chowdhury
Parnasree Chowdhury

Reputation: 344

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 .

Upvotes: 2

Related Questions