AJAX/DHTML/LIGHT BOXES

Question

here is my js code

<script type='text/javascript'>

  // Browser safe opacity handling function

  function setOpacity( value ) {
   document.getElementById("popup").style.opacity = value / 10;
   document.getElementById("popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
  }

  function fadeInMyPopup() {
   for( var i = 0 ; i <= 100 ; i++ )
    setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
  }

  function fadeOutMyPopup() {
   for( var i = 0 ; i <= 100 ; i++ ) {
    setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
   }

   setTimeout('closeMyPopup()', 800 );
  }

  function closeMyPopup() {
   document.getElementById("popup").style.display = "none"
  }

  function fireMyPopup() {
   setOpacity( 0 );
   document.getElementById("popup").style.display = "block";
   fadeInMyPopup();
  }
  </script>

this code works fine. i am using this code to pop-up a light box for emailing friends. what i am stuck with, once i submit the i will like to say thank you on the same pop-up. right now here is how i am saying thank you: this goes to a new window. but i want it on the same light box window.

<SCRIPT language="JavaScript">
<!--
window.location="thanks.php";
//-->
</SCRIPT>

here is how i call my light box in my other code:

<div id="popup" name="popup"><?php include ("email.php"); ?></div>

any ideas on achieving this. many thanks.

Answer 1

I'd strongly recommend checking out the jQuery framework. It makes doing things like this very painless.

You could also use the innerHTML property in Javascript to update the text:

document.getElementById("popup").innerHTML = "Thanks, yo"

Answer 2

ok here is more explanation

I have 3 events that i want ro call for one form:

in my form, i am using an image for the submit button. so to pass the value of the submit, here is what i do and it works fine in all browsers:

< input type="image" onclick="this.form.select.value = this.value" >

now i want to call another events, after the form has been submitted.

< input type="image" onclick="this.form.select.value = this.value; javascript:thanks()" >

now when i put the second event in, my form doesnt validate or submit the values.

and when i placed that event in the form tag, it doesnt work either.

here is my js function for thanks(): function thanks() { setOpacity( 0 ); document.getElementById("popup").innerHTML = "Thank You!!" closeMyPopup();

    }

i am using the code from this link: http://dhtmlpopups.webarticles.org/fade-effects.php; i have a registration form for the fade effects, and once the form get submitted, i want a thank-you to appear, but it doesnt seem to be working well.