CODEWITHSUNDEEP
jqueryurlsearchiframeappend
JV10
JV10

Reputation: 891

Append search query to iframe src URL

I have a form on my home page for visitors to search for their postcode. When the submit button is clicked the home page redirects to another internal page that has an iframe. I want the search query string appended to the iframe src URL.

e.g. A search for postcode 3000 will append "?postcode=3000" to the iframe src URL

<iframe src="https://www.externalwebsite.com?postcode=3000" class="auto-height" scrolling="no" frameborder="0"></iframe>

This is the code I'm using for the search on the home page:

<input type="text" onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value='Submit Postcode...';" value="Submit Postcode..." id="postcodesearchQuery" maxlength="4"/>
<input name="searchbutton" value="" type="button" onClick="location.href='postcode.aspx?postcode=' + $('#postcodesearchQuery').attr('value')" id="postcodesearchbutton" />

This of course adds the search result to the URL of the "postcode.aspx" page. e.g. www.mywebsite.com/postcode.aspx?postcode=3000

Is it possible to use jQuery append to add the ?postcode=' + $('#postcodesearchQuery').attr('value') to the iframe URL src?

EDIT

If I add the following to my head tag, it doesn't work:

<script type="text/javascript">    
    $('.myiframe' + iFrameID).attr('src', url);
    url += '?postcode=' + postcodeValue;

    function setIFrameSrc(iFrameID, postcodeValue)
{
    var myFrame = $('.myiframe' + iFrameID);
    var url = $(myFrame).attr('src') + '?postcode=' + postcodeValue;
    $(myFrame).attr('src', url);

}
</script>

iframe code:

 <iframe src="www.externalwebsite.com" class="myiframe" width="100%" height="750px" scrolling="no" frameborder="0"></iframe>

Upvotes: 2

Views: 6078

Answers (2)

Lajos Arpad
Lajos Arpad

Reputation: 76757

You can set it with jQuery, using the attr function:

$('#' + iFrameID).attr('src', url);

Of course you must set the url first, like this:

url += '?postcode=' + postcodeValue;

Putting these into a function we get:

function setIFrameSrc(iFrameID, postcodeValue)
{
    var myFrame = $('#' + iFrameID);
    var url = $(myFrame).attr('src') + '?postcode=' + postcodeValue;
    $(myFrame).attr('src', url);

}

Upvotes: 2

Chris Li
Chris Li

Reputation: 3725

You may not need jquery, like this:

window.frames["postcodesearchQuery"].href += ?postcode=' + ...

Upvotes: 1

Related Questions