Form filling from a dynamic iframe

tommyb · 03-07-2011, 11:03 PM

Hi all!

Im trying to work out a way of entering the contents of a div (which changes regularly) into a form field when it is focused on.
The issue is that the div containing the text value is in an iframe of a php file (gallery.php). The div (#lbBottom) text contents that I need to use is the caption of the current photo open with a light-box style jquery plugin (slimbox). The gallery is formed using the php and needs to be in an iframe to align the lightbox correctly. #lbBottom is generated by title=\"Code: $alttag1\" and give a result of Code: +the current photo number. Ideally it is just the photo number (last 2 characters) that I need but the contents of the div will do!

Would appreciate any help or advice anyone can give loads!
As you will see with the mywrite function, im getting a bit tangled!

GAME HTML

Code:

<!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=utf-8" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

<script> 

function mywrite() {
	$.get("gallery.php", function(data){
  	//alert("Data Loaded: " + data);
  	document.getElementById('#lbBottom').text = myVar;
	var addanswer = data;
	});
document.quiz.q1.value.focus();
document.quiz.q1.value = addanswer
alert("done");
}
</script>

</head>

<body>

    <div id="leftcol">
        <form id="quiz" name="quiz"> 
            <p><label for="q1"><img src="images/q1.jpg" alt="Question1"/><span class="photoquestion">1.</span></label><input id="q1" type="text" value="" onfocus="mywrite()" name="q1" /></p> 
            <p><label for="q2"><span>2.</span>We’ll go that extra mile!</label><input id="q2" type="text" onfocus="mywrite()" value="" name="q2" /></p> 
            <p><label for="q3"><span>3.</span>Question 3</label><input id="q3" onfocus="mywrite()" type="text"  value="" name="q3"/></p>
            <p><label for="q4"><img src="images/q4.jpg" alt="Question4"/><span class="photoquestion">4.</span></label><input id="q4" onfocus="mywrite()" type="text"  value="" name="q4"/></p>
           <input class="submit" type="submit" name="submit" value="Check Answers" />
        </form> 
    </div>

	<iframe id="gallery_cont" src="gallery.php" name="iframe" scrolling="no">   
    </iframe>
    
</body>
</html>

GALLERY PHP

PHP Code:


			
<!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>

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lightbox.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div id="gallery">
        <?php
        $cleanup = array(".jpg", ".","_");
        
        $dir1 = "./adverts/";
        $imageset1 = opendir($dir1);
        
        while(false != ($file1 = readdir($imageset1)))
        {
        if(($file1 != ".") and ($file1 != "..") and ($file1 != ".DS_Store") and ($file1 != "thumbs"))
        {
        $alttag1 = str_replace($cleanup," ",$file1);
        echo("<a href=\"./adverts/$file1\" title=\"Code: $alttag1\" rel=\"lightbox-group\" ><img src=\"./adverts/thumbs/$file1\" alt=\"$alttag1\" /></a>\n");
        }
        }
        ?>
        </div>
</body>
</html>

tommyb · 03-08-2011, 01:51 AM

SOLVED IT!
-Just incase it helps anyone else-

Code:

$('#q1, #q2, #q3, #q4').focus(function() {
			var currentad = $('#gallery_cont').contents().find('#lbCaption').html();
			this.value = currentad;
		});