Results 1 to 3 of 3

Thread: populate a field in an iframe with query string

  1. #1
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default populate a field in an iframe with query string

    Is it possible to target a text field that is in a iframe.

    Here is my code so far. Just cant seem to target the field inside the iframe.

    thanks in advance any suggestions.



    Code:
    function getqueryString(){ 
     
    var url=location.href; 
     
    if(url.split('?email=')[1]!=undefined) { 
     var qs=url.split('?email=')[1]; 
     
    String.prototype.splitqueryString=function() { 
     return this.split(/[=+&]/); 
     } 
     
    
    top.frames["ifrm"].document.getElementById('EMAIL_FIELD').value=qs.splitqueryString();;
    
     } 
     } 
     window.addEventListener?email= 
     window.addEventListener('load',getqueryString,false): 
     window.attachEvent('onload',getqueryString); 
    </script>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Messy. And I should first say that both pages must be on the same domain. If you even have one with www. in its location/src and the other without the www. part, it will not work. So best to use the relative path for the src attribute/location for the iframe. The query string is location.search, so a way to get it is:

    Code:
    function getQval(n) {
    	if(typeof n !== 'string'){
    		return null;
    	}
    	var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
    	return (m = r.exec(m))? unescape(m[1]) : null;
    }
    That will get you a named value from it if it exists. So if you have a URL like:

    http://www.somedomain.com/somepage.htm?iframefield=How+are+you%3F
    and do:

    Code:
    var iframefield = getQval('iframefield');
    if(iframefield){
    	function populatefield(val){
    		val = val.replace(/+/g, ' ');
    		top.frames["ifrm"].document.getElementById('EMAIL_FIELD').value=val;
    	}
    	if (window.addEventListener){
    		window.addEventListener('load', function(){populatefield(iframefield);}, false);
    	}
    	else if (window.attachEvent){
    		window.attachEvent('onload', function(){populatefield(iframefield);});
    	}
    }
    That might do it. But is the top.frames["ifrm"] frame loaded? It might be, it might not.

    You would be better off putting this code before the closing </body> tag on the top page:

    Code:
    <script type="text/javascript">
    function getQval(n) {
    	if(typeof n !== 'string'){
    		return null;
    	}
    	var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
    	return (m = r.exec(m))? unescape(m[1]) : null;
    }
    
    var iframefield = getQval('iframefield');
    if(iframefield){
    	function populatefield(val){
    		val = val.replace(/\+/g, ' ');
    		top.frames["ifrm"].document.getElementById('EMAIL_FIELD').value=val;
    	}
    	if (window.addEventListener){
    		document.getElementsByName('ifrm')[0].addEventListener('load', function(){populatefield(iframefield);}, false);
    	}
    	else if (window.attachEvent){
    		document.getElementsByName('ifrm')[0].addEventListener('load', function(){populatefield(iframefield);}, false);
    	}
    }
    </script>
    Still no guarantee, but the chances are better, most likely will work, assuming I've made no typos and the name of the iframe is correct and unique. Only problem is that the iframe might have already loaded before we get to this code. So we could do:

    Code:
    <script type="text/javascript">
    function getQval(n) {
    	if(typeof n !== 'string'){
    		return null;
    	}
    	var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
    	return (m = r.exec(m))? unescape(m[1]) : null;
    }
    
    var iframefield = getQval('iframefield');
    if(iframefield){
    	function populatefield(val){
    		val = val.replace(/\+/g, ' ');
    		try{top.frames["ifrm"].document.getElementById('EMAIL_FIELD').value = val;}
    		catch(e){}
    	}
    	populatefield(iframefield);
    	if (window.addEventListener){
    		document.getElementsByName('ifrm')[0].addEventListener('load', function(){populatefield(iframefield);}, false);
    	}
    	else if (window.attachEvent){
    		document.getElementsByName('ifrm')[0].addEventListener('load', function(){populatefield(iframefield);}, false);
    	}
    }
    </script>
    Just in case. But try/catch is not guaranteed to recover from all errors, especially ones involving multiple frames, so -

    Still better would be to handle this from the page in the iframe:

    Code:
    <script type="text/javascript">
    function getTopQval(n) {
    	if(typeof n !== 'string'){
    		return null;
    	}
    	var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = top.location.search;
    	return (m = r.exec(m))? unescape(m[1]) : null;
    }
    
    var iframefield = getTopQval('iframefield');
    if(iframefield){
    	function populatefield(val){
    		val = val.replace(/\+/g, ' ');
    		document.getElementById('EMAIL_FIELD').value = val;
    	}
    	populatefield(iframefield);
    	if (window.addEventListener){
    		window.addEventListener('load', function(){populatefield(iframefield);}, false);
    	}
    	else if (window.attachEvent){
    		window.addEventListener('load', function(){populatefield(iframefield);}, false);
    	}
    }
    </script>
    That code can go in the head of the page in the iframe.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,999
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    12

    Default

    I haven't tried but it looks like you can do it with jQuery's contents() method http://api.jquery.com/contents/

    A tutorial http://www.tutorialspoint.com/jquery...l-contents.htm - you can find more if you search.

    Note, you can only do this if the Iframed page is on the same domain.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Replies: 2
    Last Post: 02-28-2012, 02:55 PM
  2. Populate a Text field via MYSQL Drop Down
    By xChAMaRx in forum JavaScript
    Replies: 0
    Last Post: 02-16-2009, 11:04 AM
  3. Replies: 2
    Last Post: 03-15-2008, 01:09 PM
  4. How to populate the text field in a button click.
    By sowjanya in forum JavaScript
    Replies: 2
    Last Post: 11-13-2007, 01:22 PM
  5. using url like a php query string
    By Agrajag in forum JavaScript
    Replies: 8
    Last Post: 05-27-2006, 06:15 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •