fill iframe form

Discussion in 'JavaScript' started by dramiditis, Aug 15, 2009.

  1. #1
    Hi,
    I would like to auto fill form from other page in my iframe from predefinated values. Something like:

    document.form.formelement.value = "Text here";

    * On this way I auto fill forms in my page, but I would like to do to iframe page.

    Any suggestions ?

    Thanks
     
    dramiditis, Aug 15, 2009 IP
  2. neocoder

    neocoder Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi,
    You need to get the document of an iframe element and work with it like with global one.

    
    
    var ifrm = document.getElementById('myIFrame');
    
         ifrm.document.forms[0].someFormElement.value = 'test';
    
    
    Code (markup):
     
    neocoder, Aug 15, 2009 IP
  3. dramiditis

    dramiditis Peon

    Messages:
    87
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm not very god with js, I know the form name, and elements id, but I don't know how to write javascript function.
    Can you give me some exmple?
    THANKS
     
    dramiditis, Aug 15, 2009 IP
  4. neocoder

    neocoder Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Your site page
    
    <html>
    <head></head>
    <body>
    <iframe id="myiframe" width="400" height="300" src="http://localhost/1.html"></iframe>
    <button id="btnTest">Fill the form</button>
      <script>     
         function load() {
         	var btn = document.getElementById('btnTest');
    		btn.onclick = function(){
    		var ifrm = document.getElementById('myiframe');
    		ifrm.contentWindow.document.forms['myform'].testfield.value = 'Hello world!';
         };     
       }
       window.onload = load;
      </script>
    </body>
    </html>
    
    Code (markup):
    iframe page (1.html)
    
    <html>
    <head></head>
    <body>
    <form name="myform">
    <input name="testfield" type="text" />
    <input type="submit" value="submit form" />
    </form>
    </body>
    </html>
    
    Code (markup):
     
    neocoder, Aug 15, 2009 IP
  5. dramiditis

    dramiditis Peon

    Messages:
    87
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks neocoder,

    That was perfect, it's working. I have only one thing:
    Is it possible this function to be set "onload" when page loads it will automaticly fill the form.
    Thanks
     
    dramiditis, Aug 15, 2009 IP
  6. kblessinggr

    kblessinggr Peon

    Messages:
    539
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Technically it already is due to that window.onload , though I personally would have done the same thing above but in Jquery and used the $(document).ready() function to load it. Especially since JQuery works accross browsers where as hand coded javascript code might work on IE but not Firefox/safari and so forth.
     
    kblessinggr, Aug 15, 2009 IP
  7. dramiditis

    dramiditis Peon

    Messages:
    87
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    One more thing,
    When I'm using my page with iframe on my domain it work, but if I want to populate forum from other domain it doesn't work. Why, it is because cross domain security or what?
     
    dramiditis, Aug 16, 2009 IP
  8. neocoder

    neocoder Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    dramiditis,
    to do that you need to place onclick function directly into onload.
    
         function load() {
    	var ifrm = document.getElementById('myiframe');
    	ifrm.contentWindow.document.forms['myform'].testfield.value = 'Hello world!';
       }
    
    Code (markup):
    kblessinggr is pretty much right. If you'll use one of Javascript frameworks and attach this function to the DOMReady event it will work a bit faster and it will be more correct way. But I really don't think that you need to load additional 50kb javascript just to fill the form.

    I've tested my code in all major browsers (IE7-8, Firefox, Chrome, Safari) so you don't need to worry about cross browser comparability.
     
    neocoder, Aug 16, 2009 IP
  9. neocoder

    neocoder Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Yes. You can access the documentElement of an iframe only form the same domain.

    I don't know what are trying to code, but if you need to fill the forms from other domains you need to write firefox extension or windows application with embedded IE.
     
    neocoder, Aug 16, 2009 IP