Best way to do this?

[markman641]

Originally Posted by Old Pedant

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]

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]

Originally Posted by Old Pedant

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]

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]

Originally Posted by Old Pedant

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]

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]

Originally Posted by Old Pedant

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]

*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]

When I cloned your code and simply commented out the animate line, it worked in FF as you wanted.

[markman641]

Thanks so much dude! I called the jQuery script and it worked like a charm!