...

View Full Version : Best way to do this?



markman641
10-03-2012, 10:36 PM
There is a iFrame.. and displayed in that iframe is a certain URL... and outside of that iFrame there is a SKIP/Continue button that is disabled for 10 seconds. After 10 seconds, that button becomes available and when the user clicks it, it changes the webpage displayed in the iFrame to something else, thus disabling the skip button for another 10 seconds. Now, how I have it setup is that the last URL in the array is a script on my site that does an action.. is there an easier way to do this? am i able to POST into my own document using that submit button in order to change a value i have setup?

Here is my code..

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var cnt=0,webpageArray = [
"http://cnn.com/",
"http://rapidcashgpt.com/",
"http://asdfasdf.com"
];

function loadNextPage(dir) {
cnt+=dir;
if (cnt<0) cnt=webpageArray.length-1; // wrap
else if (cnt>= webpageArray.length) {
this.form.action = '';
} // wrap
var iframe = document.getElementById("myframe");
iframe.src = webpageArray[cnt];
return false; // mandatory!
}
</script>
</head>

<body>
<iframe id="myframe" src="http://cnn.com/"></iframe>
<form name="this_form" method="GET" action="">
<input type="submit" name="submit3" value="Submit" onclick="return loadNextPage(1)">

</form>
</body>
</html>

Old Pedant
10-03-2012, 11:24 PM
??? where is all the stuff you talked about?

Where is the 10 second delay, for example?

And you say the last URL is "a script on my site that does an action." But you don't say what action that is and/or show the contents of that last URL.

Not clear why you need the last URL to do what it is doing. Why not just put the equivalent code right in this page, triggered when "Continue" is clicked but there are no more URLs to show?

Old Pedant
10-03-2012, 11:26 PM
Oh...and if you changed from type="submit" to type="button" you wouldn't need to worry about returning any value from the button click.

markman641
10-03-2012, 11:43 PM
I was messing with the code and updated my code above.. everything works, but now I just need to add the 10 second delay!

Old Pedant
10-04-2012, 12:24 AM
Again:


<input type="button" name="submit3" value="Submit" onclick="loadNextPage(1)">


and move your <script> to the *BOTTOM* of the page (just before the </body>) for simplicity and this will then work:


<script type="text/javascript">
var cnt=0,webpageArray = [
"http://cnn.com/",
"http://rapidcashgpt.com/",
"http://asdfasdf.com"
];

function loadNextPage(dir) {
cnt+=dir;
if (cnt<0) cnt=webpageArray.length-1; // wrap
else if (cnt>= webpageArray.length) {
this.form.action = '';
} // wrap
var iframe = document.getElementById("myframe");
iframe.src = webpageArray[cnt];
document.this_form.submit3.disabled = true;
setTimeout( functiion() { document.this_form.submit3.disabled = false; }, 10000 );
}
loadNextPage(0); // actually loads first page
</script>

It doesn't matter, but if you wish you could change the <iframe> to just:


<iframe id="myframe"></iframe>

because now the code will start off by loading the first URL into the iframe.

markman641
10-04-2012, 12:38 AM
Again:


<input type="button" name="submit3" value="Submit" onclick="loadNextPage(1)">


and move your <script> to the *BOTTOM* of the page (just before the </body>) for simplicity and this will then work:


<script type="text/javascript">
var cnt=0,webpageArray = [
"http://cnn.com/",
"http://rapidcashgpt.com/",
"http://asdfasdf.com"
];

function loadNextPage(dir) {
cnt+=dir;
if (cnt<0) cnt=webpageArray.length-1; // wrap
else if (cnt>= webpageArray.length) {
this.form.action = '';
} // wrap
var iframe = document.getElementById("myframe");
iframe.src = webpageArray[cnt];
document.this_form.submit3.disabled = true;
setTimeout( functiion() { document.this_form.submit3.disabled = false; }, 10000 );
}
loadNextPage(0); // actually loads first page
</script>

It doesn't matter, but if you wish you could change the <iframe> to just:


<iframe id="myframe"></iframe>

because now the code will start off by loading the first URL into the iframe.

Unfortunately, this does not work. The page loads, although the continue button is enabled by default and when i click it, it does nothing.

Old Pedant
10-04-2012, 01:12 AM
A typo in my code:


setTimeout( functiion() { document.this_form.submit3.disabled = false; }, 10000 );

"functiion" should be "function".

This page works for me:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

<iframe id="myframe"></iframe>

<form name="this_form" method="GET" action="">
<input type="button" name="submit3" value="Submit" onclick="loadNextPage(1)">
</form>
<script type="text/javascript">
var cnt=0,webpageArray = [
"http://cnn.com/",
"http://rapidcashgpt.com/",
"http://codingforums.com"
];

function loadNextPage(dir) {
cnt += dir;
// this can never happen: if (cnt<0) cnt=webpageArray.length-1; // wrap

if (cnt>= webpageArray.length) {
alert("we are done");
return;
}
var iframe = document.getElementById("myframe");
iframe.src = webpageArray[cnt];
document.this_form.submit3.disabled = true;
setTimeout( function() { document.this_form.submit3.disabled = false; }, 10000 );
}
loadNextPage(0); // actually loads first page
</script>
</body>
</html>

markman641
10-04-2012, 01:53 AM
Thanks! If anyone is wondering, I changed it up just a bit so that after the last page, it submits the form.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>

<iframe id="myframe"></iframe>

<form name="this_form" method="POST" action="">
<input type="submit" name="submit3" value="Submit" onclick="loadNextPage(1)">
</form>
<script type="text/javascript">
var cnt=0,webpageArray = [
"http://cnn.com/",
"http://rapidcashgpt.com/",
"http://codingforums.com"
];

function loadNextPage(dir) {
cnt += dir;
// this can never happen: if (cnt<0) cnt=webpageArray.length-1; // wrap

if (cnt>= webpageArray.length) {
return;
}
var iframe = document.getElementById("myframe");
iframe.src = webpageArray[cnt];
document.this_form.submit3.disabled = true;
setTimeout( function() { document.this_form.submit3.disabled = false; }, 10000 );
}
loadNextPage(0); // actually loads first page
</script>
</body>
</html>

markman641
10-05-2012, 02:01 AM
So um, I'm really bad with javascript. How do i display the countdown in the Submit button?

Like:

Submit... 10
Submit... 9
Submit... 8
Submit... 7
Submit... 6
Submit... 5
Submit... 4
Submit... 3
Submit... 2
Submit... 1
Submit... 0
Submit!

Old Pedant
10-05-2012, 02:35 AM
Untested.


<script type="text/javascript">
var cnt=0,webpageArray = [
"http://cnn.com/",
"http://rapidcashgpt.com/",
"http://codingforums.com"
];
var countDown;

function doCountDown( )
{
var btn = document.this_form.submit3;
if ( countDown <= 0 )
{
btn.value = "Submit";
btn.disabled = false;
return;
}
btn.value = "Submit... " + countDown;
btn.disabled = true;
--countDown;
setTimeout( doCountDown, 1000 );
}

function loadNextPage(dir) {
cnt += dir;
// this can never happen: if (cnt<0) cnt=webpageArray.length-1; // wrap

if (cnt>= webpageArray.length) {
alert("we are done");
return;
}
var iframe = document.getElementById("myframe");
iframe.src = webpageArray[cnt];
countDown = 10;
doCountDown( );
}
loadNextPage(0); // actually loads first page
</script>

markman641
10-05-2012, 03:15 AM
Works like a charm dude! I can't thank you enough :) You've helped so much.

Here is my fully developed code (added one line to it to automatically scroll back to top after they click submit


Just ONE more thing though. I attempted to put in a code that detects the length of the page in iframe and automatically adjust the iframe to show the full length, however this code did not work. If you are able to update my code below to do that, it would be freakin amazing :)


<iframe id="myframe" width=100% height=1000px></iframe>

<form name="this_form" method="POST" action="">
<input type="submit" name="submit4" value="Submit" onclick="loadNextPage(1)">
</form>
<script type="text/javascript">
var cnt=0,webpageArray = [
"http://cnn.com/",
"http://rapidcashgpt.com/",
"http://codingforums.com"
];
var countDown;

function doCountDown( )
{
var btn = document.this_form.submit4;
if ( countDown <= 0 )
{
btn.value = "Submit";
btn.disabled = false;
return;
}
btn.value = "Submit... " + countDown;
btn.disabled = true;
--countDown;
setTimeout( doCountDown, 1000 );
}

function loadNextPage(dir) {
cnt += dir;
// this can never happen: if (cnt<0) cnt=webpageArray.length-1; // wrap

if (cnt>= webpageArray.length) {
return;
}
var iframe = document.getElementById("myframe");
iframe.src = webpageArray[cnt];
countDown = 10;
doCountDown( );
$('html, body').animate({ scrollTop: 0 }, 'fast');
}
loadNextPage(0); // actually loads first page
</script>

Old Pedant
10-05-2012, 06:57 PM
??? I don't see any code in there that attempts to do what you said.

I'm not even sure that it is possible, when the contents of an <iframe> are coming from a foreign site. I think the rules that prevent cross-domain scripting prevent it.

markman641
10-06-2012, 10:08 PM
??? I don't see any code in there that attempts to do what you said.

I'm not even sure that it is possible, when the contents of an <iframe> are coming from a foreign site. I think the rules that prevent cross-domain scripting prevent it.

No, i deleted the code because it didnt work. And yes, I'm pretty sure it's possible

markman641
10-27-2012, 09:57 PM
Alright I ran into a problem.. this isn't working with Firefox but it works fine in Chrome..

Old Pedant
10-29-2012, 12:35 AM
Which code isn't working in FF? Exactly what is in your post #11 or something different?

markman641
10-29-2012, 03:00 AM
Which code isn't working in FF? Exactly what is in your post #11 or something different?

I'll get you the code. Firefox is reloading the page. You can see it here: http://www.QuizBonanza.com/campaigns/iframe.php



<iframe id="myframe" width=100% height=1000px></iframe>

<form name="this_form" method="POST" action="">
<input type="submit" name="submit4" value="Submit" onclick="loadNextPage(1)"></button>
</form>
<?
$link = mysql_connect('localhost', 'ad20_ad20', 'xxxxxxxx');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
$db_selected = mysql_select_db('xxxxxxx', $link);
if (!$db_selected) {
die ('Can\'t use foo : ' . mysql_error());
}
?>
<script type="text/javascript">
var cnt=0,webpageArray = [<?php
$query = "SELECT URL FROM path where campaigns LIKE '%$currentFile%'";
$result = mysql_query($query) or die( mysql_error() );
$delimiter = "";
while ( $row = mysql_fetch_array($result) )
{
echo $delimiter . '"' . $row[0]. 'UNIQUEID' . '"' ;
$delimiter = ",\n";
}
?>];
var countDown;

function doCountDown( )
{
var btn = document.this_form.submit4;
if ( countDown <= 0 )
{
btn.value = "Submit";
btn.disabled = false;
return;
}
btn.value = "Submit... " + countDown;
btn.disabled = true;
--countDown;
setTimeout( doCountDown, 1000 );
}

function loadNextPage(dir) {
cnt += dir;
// this can never happen: if (cnt<0) cnt=webpageArray.length-1; // wrap

if (cnt>= webpageArray.length) {
return;
}
var iframe = document.getElementById("myframe");
iframe.src = webpageArray[cnt];
countDown = 10;
doCountDown( );
$('html, body').animate({ scrollTop: 0 }, 'fast');
}
loadNextPage(0); // actually loads first page
</script>

Old Pedant
10-30-2012, 02:17 AM
You messed up.



<form name="this_form" method="POST" action="">
<input type="submit" name="submit4" value="Submit" onclick="loadNextPage(1)"></button>
</form>

First of all, that is ILLEGAL HTML. So who knows what the various browsers will do with illegal html?

You have a </button> tag but *NO* matching <button> tag.

But more than that...

Because that button is a SUBMIT BUTTON, when the loadNextPage function returns, the button GOES AHEAD AND SUBMITS THE <FORM>!!!!
FireFox is doing the *right* thing. I have no idea why Chrome doesn't act the same way.

**********

Two simple answers:

(1) Make sure you return false from the onclick:


<form name="this_form" method="get" action=""><!-- or omit the method -->
<input type="submit" name="submit4" value="Submit" onclick="loadNextPage(1);return false">
</form>

Simpler answer: Don't use a submit button:


<form name="this_form" method="get" action=""><!-- or omit the method -->
<input type="button" value="Submit" onclick="loadNextPage(1);">
</form>

markman641
10-30-2012, 10:59 PM
You messed up.



<form name="this_form" method="POST" action="">
<input type="submit" name="submit4" value="Submit" onclick="loadNextPage(1)"></button>
</form>

First of all, that is ILLEGAL HTML. So who knows what the various browsers will do with illegal html?

You have a </button> tag but *NO* matching <button> tag.

But more than that...

Because that button is a SUBMIT BUTTON, when the loadNextPage function returns, the button GOES AHEAD AND SUBMITS THE <FORM>!!!!
FireFox is doing the *right* thing. I have no idea why Chrome doesn't act the same way.

**********

Two simple answers:

(1) Make sure you return false from the onclick:


<form name="this_form" method="get" action=""><!-- or omit the method -->
<input type="submit" name="submit4" value="Submit" onclick="loadNextPage(1);return false">
</form>

Simpler answer: Don't use a submit button:


<form name="this_form" method="get" action=""><!-- or omit the method -->
<input type="button" value="Submit" onclick="loadNextPage(1);">
</form>


It's SUPPOSED to submit the form after the last one. Also doing that completely breaks the 10 seconds disabled thing.

Old Pedant
10-30-2012, 11:07 PM
What does "after the last one" mean?

If you submit the <form>, it *WILL* rebuild the ENTIRE page, and so any change to the <iframe> *WILL* be lost. You have no choice on that.

markman641
10-31-2012, 01:18 AM
What does "after the last one" mean?

If you submit the <form>, it *WILL* rebuild the ENTIRE page, and so any change to the <iframe> *WILL* be lost. You have no choice on that.

What I mean by "after the last one" is that it shows the x amount of websites in the iframe, and then when the user gets to the last one and clicks continue it ACTUALLY submits for form. It's supposed to do this so that I can move the user on to the next part of the registration process. This is exactly what chrome does.

Old Pedant
10-31-2012, 04:48 PM
Well, you have zero code in there doing that, so far as I can see. So I haven't the foggiest idea why it works in Chrome.

You could, however, easily fix the code:


function loadNextPage(dir) {
cnt += dir;
// this can never happen: if (cnt<0) cnt=webpageArray.length-1; // wrap

if (cnt>= webpageArray.length) {
return true;
}
var iframe = document.getElementById("myframe");
iframe.src = webpageArray[cnt];
countDown = 10;
doCountDown( );
$('html, body').animate({ scrollTop: 0 }, 'fast');
return false;
}

And then:


<input type="submit" name="submit4" value="Submit" onclick="return loadNextPage(1);">

markman641
11-01-2012, 01:32 AM
Well, you have zero code in there doing that, so far as I can see. So I haven't the foggiest idea why it works in Chrome.

You could, however, easily fix the code:


function loadNextPage(dir) {
cnt += dir;
// this can never happen: if (cnt<0) cnt=webpageArray.length-1; // wrap

if (cnt>= webpageArray.length) {
return true;
}
var iframe = document.getElementById("myframe");
iframe.src = webpageArray[cnt];
countDown = 10;
doCountDown( );
$('html, body').animate({ scrollTop: 0 }, 'fast');
return false;
}

And then:


<input type="submit" name="submit4" value="Submit" onclick="return loadNextPage(1);">


Unfortunately firefox is still refreshing the page. Works in chrome still though.

Old Pedant
11-01-2012, 07:48 PM
*SIGH*

You know why?

Because your code ends with:


$('html, body').animate({ scrollTop: 0 }, 'fast');
return false;
}

That is, you are invoking a jQuery function to do the animate, right?

BUT YOU DO NOT HAVE THE jQUERY LIBRARY LOADED on that page!!!!!!!!!

So the animate line gets an *ERROR* and the function exits on the error.
And when it exits on error there is only 1 chance in 4 billion that it will return false.

So it is returning true, because of the error, and thus allowing the submit to proceed.

Old Pedant
11-01-2012, 07:50 PM
When I cloned your code and simply commented out the animate line, it worked in FF as you wanted.

markman641
11-03-2012, 02:52 AM
Thanks so much dude! I called the jQuery script and it worked like a charm! :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum