How to add a target into the end of src quotes

Question

so I would like to know how you would add a target in this example "google-iframe" into the source link of the iframe.

Here is the current code I have:

<!-- CSS -->
<style>
        body {
    color: purple;
    background-color: #663300 }
    </style>

<form target="google-iframe">
       <input id="search" type="text"/>
      <input type="image" onclick="google-iframe" src="Searchbutton.png" alt="Search Button" height="20" width="20">
      <iframe id="google-iframe" src="http://www.google.com/custom?q=" width="250" height="600" onmouseover="width=400" onmouseout="width=250" onclick="window.location='http://www.google.com/custom?q=Test&btnG=Search'"></iframe>
</form>

I would like to have it be like this:

 <iframe id="google-iframe" src="http://www.google.com/custom?q=" + "google-iframe" width="250" height="600" onmouseover="width=400" onmouseout="width=250" onclick="window.location='http://www.google.com/custom?q=Test&btnG=Search'"></iframe>

the change was that were it says

src=http://www.google.com/custome?q= 

what ever is defined as "google-iframe" would be inserted at the end of the src for like this for example

src=http://www.google.com/custome?q=WhatEverIsEntedInTheGoogle-Iframe

Answer 1

1. You need to use the name attribute for targeting to an iframe and not the id
2. You need to set the action of the form to be the url that will be loaded in the iframe
3. You need to name (using the attribute name again) the input element with the keywords as q as that is what google expects.

So something like this

<form action="http://www.google.com/custom" target="google-iframe" method="get">
    <input name="q" type="text" />
    <input type="image" onclick="google-iframe" src="Searchbutton.png" alt="Search Button" height="20" width="20"/>
</form>

<iframe name="google-iframe" src="http://www.google.com/custom" width="250" height="600" onmouseover="width=400" onmouseout="width=250" onclick="window.location='http://www.google.com/custom?q=Test&btnG=Search'"></iframe>

Demo at http://jsfiddle.net/gaby/4bAjT/1/

---

Update after comments
to account for multiple iframes with different rules for the submitting url

Html

<form onsubmit="return virtualSubmit(this)";>
    <input name="searchtext" type="text" />
    <input type="image" src="Searchbutton.png" alt="Search Button" height="20" width="20"/>
</form>

<iframe src="http://www.google.com/custom"
        data-url="http://www.google.com/custom?q="
        width="250"
        height="600"></iframe>

<iframe src="http://en.wikipedia.org/wiki"
        data-url="http://en.wikipedia.org/wiki/"
        width="250"
        height="600"></iframe>

and javascript

function virtualSubmit(form){
    var text = form.searchtext.value;
    var targets = document.getElementsByTagName('iframe'),
        items = targets.length;

    for(var i = 0; i<items; i++){
        var target = targets[i],
            url = target.getAttribute('data-url');
        target.src = url + text;
    }

    return false;
}