Как добавить цель в конец цитаты src

Question

Поэтому я хотел бы знать, как вы добавили бы цель в этом примере "google-iframe" в ссылку на источник в iframe.

Вот текущий код у меня есть:

<!-- 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>

Я хотел бы, чтобы это было так:

 <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>

изменение было, что это говорит

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

то, что когда-либо определено как "google-iframe", будет вставлено в конце src, например, вот так

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

Answer 1

1. Вам нужно использовать name атрибут для нацеливания на iframe а не id
2. Вам необходимо установить действие form быть URL, который будет загружен в iframe
3. Вам нужно назвать (используя атрибут name еще раз) элемент ввода с ключевыми словами как q как это то, что ожидает Google.

Так как то так

<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>

Демо на http://jsfiddle.net/gaby/4bAjT/1/

---

Обновление после комментариев
учитывать несколько iframes с разными правилами для отправки 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>

и 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;
}