PHP when countdown runs out - countdown

Question

So I have a countdown timer that grabs a .php file when the clock hits 0. Only problem is, the php file is opening in a new window. I would like it to be displayed at the bottom of the page somehow.
I don't know anything about javascript or AJAX. Only php and html. Can anyone show a newbie what to do?
<!--START COUNTDOWN TIMER SCRIPT-->
<br>
<script type="text/javascript">
window.onload = function() {
countDown('my_div1', 'timerunout.php', 4); } function countDown(elID, output, seconds) {
var elem = document.getElementById(elID),
start = new Date().getTime(), end = start+seconds*1000,
timer = setInterval(function() {
var now = new Date().getTime(), timeleft = end-now, timeparts;
if( timeleft < 0) {
document.location.href = output;
clearInterval(timer);
}
else {
timeparts = [Math.floor(timeleft/60000),Math.floor(timeleft/1000)%60];
if( timeparts[1] < 10) timeparts[1] = "0"+timeparts[1];
elem.innerHTML = "When the Clock hits Zero...<br> "+timeparts[0]+":"+timeparts[1];
}
},250); // the lower this number, the more accurate the timer. 250 recommended }
</script>
<center>
<font color="#FF0000"><b><h1>
<div id="my_div1">
</div>
</h1></b></font>
</center>
<!--END COUNTDOWN TIMER SCRIPT-->
Ok so I have a countdown timer on index.php, when it hits 0... it opens another php file into the bottom of the page using AJAX. Let's call this timerunout.php
Problem is this... in that Php file is a link.
At the end of that link needs to be an affiliate ID attached to the end of it.
That affiliate ID is only detected when someone types their username at the end of the address in the index.php. Any suggestions?
Here's the code for index.php
window.onload = function() {
countDown('my_div1', 'timerunout.php', 4);
}
function countDown(elID, output, seconds) {
var elem = document.getElementById(elID);
start = new Date().getTime(), end = start+seconds*1000,
timer = setInterval(function() {
var now = new Date().getTime(), timeleft = end-now, timeparts;
if( timeleft < 0) {
//This code creates the AJAX object, which will then be used to send it.
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//This code parameterizes the object to point at your page in an asynchronous way.
xmlhttp.open("GET","timerunout.php?s1=username",true);
xmlhttp.send(); //Once all parameters are set, send it on it's way.
//Callback. Once the request is in one of it's stages, this will be called.
xmlhttp.onreadystatechange=function() {
//Request done and fetching the page successful?
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//Sets the HTML of my_div1 to whatever was in timerunout.php
elem.innerHTML=xmlhttp.responseText;
}
}
clearInterval(timer);
} else {
timeparts = [Math.floor(timeleft/60000),Math.floor(timeleft/1000)%60];
if( timeparts[1] < 10) timeparts[1] = "0"+timeparts[1];
elem.innerHTML = "When the Clock hits Zero...<br> "+timeparts[0]+":"+timeparts[1];
}
} ,250); // the lower this number, the more accurate the timer. 250 recommended } </script> <center>
<div id="my_div1"></div> </center> <!--END COUNTDOWN TIMER SCRIPT-->
and here's the timerunout.php
//
// Maybe check $s1 is indeed valid
//
$newurl = sprintf('/join.php?id=%s', urlencode($_GET['s1']));
$coaching = sprintf('/live/webinar-register.php?id=%s',
urlencode($_GET['s1']));
?>
So basically what I'm saying is that in index.php,
username in this line needs to be coming from what the user types in their address bar.
xmlhttp.open("GET","timerunout.php?s1=username",true);

Answer 1

If you want to use the jQuery-Framework, you might go about the matter like this:
$.ajax({
url: "timerunout.php",
data:{ s1:"whateverparametersuitsyourfancy" }
}).done(function(data) {
$('#my_div1').html(data);
});
If you want to go the traditional way, the AJAX call is a bit more complicated. From the w3schools website:
//This code creates the AJAX object, which will then be used to send it.
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//This code parameterizes the object to point at your page in an asynchronous way.
xmlhttp.open("GET","timerunout.php?s1=whateverparametersuitsyourfancy",true);
xmlhttp.send(); //Once all parameters are set, send it on it's way.
//Callback. Once the request is in one of it's stages, this will be called.
xmlhttp.onreadystatechange=function() {
//Request done and fetching the page successful?
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//Sets the HTML of my_div1 to whatever was in timerunout.php
document.getElementById("my_div1").innerHTML=xmlhttp.responseText;
}
}
Both codes will send a GET request to the page in question and write the 'echoed' output of the target page to the html tag identified by 'my_div1'.
In your code (I'll use the plain JS example) this may look like this.
<!--START COUNTDOWN TIMER SCRIPT-->
<br>
<script type="text/javascript">
window.onload = function() {
countDown('my_div1', 'timerunout.php', 4);
}
function countDown(elID, output, seconds) {
var elem = document.getElementById(elID);
start = new Date().getTime(), end = start+seconds*1000,
timer = setInterval(function() {
var now = new Date().getTime(), timeleft = end-now, timeparts;
if( timeleft < 0) {
//This code creates the AJAX object, which will then be used to send it.
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//This code parameterizes the object to point at your page in an asynchronous way.
xmlhttp.open("GET","timerunout.php?s1=whateverparametersuitsyourfancy",true);
xmlhttp.send(); //Once all parameters are set, send it on it's way.
//Callback. Once the request is in one of it's stages, this will be called.
xmlhttp.onreadystatechange=function() {
//Request done and fetching the page successful?
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//Sets the HTML of my_div1 to whatever was in timerunout.php
elem.innerHTML=xmlhttp.responseText;
}
}
clearInterval(timer);
} else {
timeparts = [Math.floor(timeleft/60000),Math.floor(timeleft/1000)%60];
if( timeparts[1] < 10) timeparts[1] = "0"+timeparts[1];
elem.innerHTML = "When the Clock hits Zero...<br> "+timeparts[0]+":"+timeparts[1];
}
} ,250); // the lower this number, the more accurate the timer. 250 recommended
}
</script>
<center>
<font color="#FF0000"><b><h1>
<div id="my_div1"></div>
</h1></b></font>
</center>
<!--END COUNTDOWN TIMER SCRIPT-->
Edit: I added a single GET parameter to the AJAX calls, to be used at your convenience.