Hello. I have this files : demo.html <html> <head> <title>Quick Simple Light Box</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <style type="text/css"> #lightbox-background{ display:none; background:#000000; opacity:0.9; filter:alpha(opacity=90); position:absolute; top:0px; left:0px; min-width:100%; min-height:100%; z-index:1000; } /* Lightbox panel with some content */ #lightbox-panel { display:none; position:fixed; top:100px; left:50%; right:50%; margin-left:-400px; width:800px; height: 300px; background:#FFFFFF; padding:10px 15px 10px 15px; border:2px solid #CCCCCC; z-index:1001; } </style> <script type="text/javascript"> function test(){ $('#lightbox-panel').fadeIn(300).load('test.html'); $('#lightbox-background').fadeIn(300); $('#name').val = 'test'; // Prob <----- } </script> </head> <body> <a href="#" onClick="test()" >Click me!</a> <!-- LightBox --> <div id="lightbox-panel"></div> <div id="lightbox-background"></div> </body> </html> HTML: and test.html <!DOCTYPE html> <html> <head> </head> <body> <input type="text" id="name"/> </body> </html> HTML: As you can see demo.html after click me loads into the lightbox the test.html file that has an input tag. After this i want to add some value in this text input with the .val attribute but doesn't seem to work. Is there any way to achieve something like this ? Thanks in advance!
function test(){ $('#lightbox-panel').fadeIn(300).load('test.html', function() { $('#name').val('foo'); // Prob <----- }); $('#lightbox-background').fadeIn(300); } Code (markup):