この問題は古く、JavaScriptで解くものと思っていた。
別の言語でもCGIを使えば出来るだろうか。
先駆者は多々いらっしゃって
http://www.searchdesk.com/
http://benri999.web.fc2.com/
今回は、少し変態的に解いてみる。
テキスト送付先情報
GoogleとYahooの絞って考えてみる。少し戸惑ったが、通信（テキスト送付）先パスは次の通り。
Google http://www.google.co.jp/search
Yahoo http://search.yahoo.co.jp/search
ポイントは、Googleのテキストボックスのnameはqであり、Yahooはpであること。
なので、単純にボタンへのaction割り付けを分岐させるだけでは、両立しない。
ひとつづつのForm
<form method=get action="http://www.google.co.jp/search" target="_blank"> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="hidden" name="hl" value="ja" /> <!-- <input type="hidden" name="ie" value=UTF-8 /> --> <!-- <input type="hidden" name="oe" value=UTF-8 /> --> <input type="submit" name="btnG" value="Google 検索" /> </form>
Yahoo。(Y)とする。
<form method=get action="http://search.yahoo.co.jp/search" target="_blank"> <input type="text" name="p" size="31" maxlength="255" value="" /> <input type="submit" name="btnY" value="Yahoo 検索" /> </form>
これらを横に並べる
tableとCSSの機能を使う。
<table style="float:left;"><tr><td> (G) </td></tr></table><table><tr><td> (Y) </td></tr></table>
行先毎にテキストを入力し直さないといけないのは面倒。
片方の入力値をJavascriptで他方にコピーする
参考にしたページ http://www.blinderhidden.com/textbox-input-mozi-area-display-355.html
そのままでは動かないので、コピー先をID指定にする。
ヘッダ内のJavascript
<script type="text/javascript">
<!--
function incopies(frmObj){
document.getElementById("YahooForm").elements["p"].value=frmObj.elements["q"].value; //name（q）で入力した文字をid(YahooForm)のname（p）にコピー
}
// -->
</script>(G)の修正
<input type="text" name="q" size="31" maxlength="255" value="" /> ↓ <input type="text" name="q" size="31" maxlength="255" value="" onMouseOut="incopies(this.form)" onMouseOver="incopies(this.form)" onkeydown="incopies(this.form)" onkeyup="incopies(this.form)" />
(B)の修正
<form method=get action="http://search.yahoo.co.jp/search" target="_blank"> ↓ <form method=get action="http://search.yahoo.co.jp/search" target="_blank" id="YahooForm"> <input type="text" name="p" size="31" maxlength="255" value="" /> ↓ <input type="text" name="p" size="31" maxlength="255" value="" readonly="readonly" />
これでゴールが見えた。
複数の入力窓の非表示
このままでもコピーされていく様が見れて面白いですが、多少ごちゃごちゃするので、
コピー先(Y)のinputボックスのtypeをtextからhiddenに変えて、隠してしまいます。
<input type="text" name="p" size="31" maxlength="255" value="" readonly="readonly" /> ↓ <input type="hidden" name="p" size="31" maxlength="255" value="" readonly="readonly" />
これでスッキリして、当初のイメージ通りのものが出来ました。
