Onclickイベントでデータをcgiに受け渡す方法はありますか?

A 回答 (2件)

<form action="渡したいcgiファイル">を指定して、


onClick=submit();
でもできると思いますけど、functionを別に記述して、
onClick=function名
別なところに
<script language="JavaScript">
funciont function名(){
document.form名.submit();
}
</script>
を書いてあれば、指定のcgiにフォームの内容(値)が渡されますよ。
これじゃダメでしょうか?
    • good
    • 0
この回答へのお礼

<form action="渡したいcgiファイル">を指定して、
onClick=submit();
これで出来ました。有難うございました。

お礼日時:2002/03/28 20:09

formを使わなくてもGET送信でなら受渡し先のURLに直接記述することで送ることが出来ます。


受渡し先のアドレス(ファイル名)の後ろに'?'をつけて"パラメータ名"="値"という形式で記述します。
複数送る場合はその後ろに'&'をつけて"パラメータ名"="値"を記述してください。
例)
hoge.cgiにパラメータ名'data1'の値'aaa'とパラメータ名'data2'の値'bbb'を送る場合。

<~ onClick=function名>

<SCRIPT LANGUAGE="JavaScript">
function function名{
location.href="./hoge.cgi?data1=aaa&data2=bbb";
}
</SCRIPT>
    • good
    • 0
この回答へのお礼

参考にさせて頂きます。有難う御座いました。

お礼日時:2002/03/28 20:10

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qデータを別のhtmlページに受け渡す方法はありますか?

HPビルダー6で制作中なのですが、
アンケートフォームの内容(データ)を別のhtmlページに確認画面として
受け渡しする事は可能でしょうか?どなたか教えて下さい。
ちなみに、自作CGIプログラムはプロバイダーの方では使えない様です。

Aベストアンサー

すみません。土日出かけていたため、回答が遅れました。
No.1に挙げた2の方法で書いたHTMLを載せますので、参考にしてみて下さい。
(行頭の全角スペースは、半角スペースやタブに変換してください。)

■Aページ
※<HEAD>~</HEAD>内に
<SCRIPT language="javascript"><!--
function kakunin(f) {
  var prm = new Array();

  if (f.namae.value) prm[prm.length] = "namae="+escape(f.namae.value);
  if (f.adress.value) prm[prm.length] = "adress="+escape(f.adress.value);
  for (var i=0; i<f.sexy.length; i++)
    if (f.sexy[i].checked) prm[prm.length] = "sexy="+escape(f.sexy[i].value);
  prm[prm.length] = "os="+f.os.options[f.os.selectedIndex].value;
  if (f.akosu.value) prm[prm.length] = "akosu="+f.akosu.value;
  if (f.bkosu.value) prm[prm.length] = "bkosu="+f.bkosu.value;
  if (f.ckosu.value) prm[prm.length] = "ckosu="+f.ckosu.value;
  prm[prm.length] = "siharai="+escape(f.siharai.options[f.siharai.selectedIndex].value);
  for (var i=0; i<f.omake.length; i++)
    if (f.omake[i].checked) prm[prm.length] = "omake="+escape(f.omake[i].value);
  prm[prm.length] = "kansou="+escape(f.kansou.value);

  location.href = "b.html?"+prm.join('&');
  return false;
}
//--></SCRIPT>

※FORMタグにonSubmitを加える。
<FORM method="POST" action="mailto:xxxxx@xxx.xx.xx" enctype="text/plain" onSubmit="return kakunin(this)">

※name属性にnameという値はあまりよくないので、namaeに変更
<INPUT size="30" type="text" maxlength="30" name="namae"></TD>

※確認ボタンをSUBMITに変更
<INPUT type="submit" value="確認">

■Bページ
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>
<SCRIPT language="JavaScript"><!--
var FORM = new Array();

// パラメータ解析
var buffer = location.search.substr(1);
var pairs = buffer.split("&");
for (var i in pairs) {
  var pair = pairs[i].split('=');
  if (FORM[pair[0]]) FORM[pair[0]] += "\0"+unescape(pair[1]);
  else FORM[pair[0]] = unescape(pair[1]);
}

function makeTR(sbj,val) {
  return '<TR><TD width="25%">' + sbj + '</TD><TD width="75%">' + val + '</TD></TR>';
}
function drawHidden() {
  for (var p in FORM) {
    var val = FORM[p].split(/\0/);
    for (var n in val)
      document.writeln('<INPUT type="hidden" name="'+p+'" value="'+val[n]+'">');
  }
}
//--></SCRIPT>
</HEAD>
<BODY bgcolor="#ffffcc">
<P align="center"><B><FONT size="+2">確認してください</FONT></B></P>
<FORM method="GET" action="mailto:xxxxx@xxx.xx.xx" enctype="text/plain" name="fomu">
<TABLE border="1" width="414" align="center">
<SCRIPT language="JavaScript"><!--

if (FORM["namae"]) document.writeln(makeTR('名前', FORM["namae"]));
if (FORM["adress"]) document.writeln(makeTR('住所', FORM["adress"]));
if (FORM["sexy"]) document.writeln(makeTR('性別', FORM["sexy"]));
if (FORM["os"]) document.writeln(makeTR('OS', FORM["os"]));
var sh = new Array();
if (FORM["akosu"]) sh[sh.length] = '01:' + FORM["akosu"] + "個";
if (FORM["bkosu"]) sh[sh.length] = '02:' + FORM["bkosu"] + "個";
if (FORM["ckosu"]) sh[sh.length] = '03:' + FORM["ckosu"] + "個";
if (sh.length) document.writeln(makeTR('商品', sh.join(' ')));
if (FORM["siharai"]) document.writeln(makeTR('購入方法', FORM["siharai"]));
if (FORM["omake"]) {
  var omk = FORM["omake"].split(/\0/);
  if (omk.length) document.writeln(makeTR('おまけ', omk.join(' ')));
}
if (FORM["kansou"]) {
  if (FORM["kansou"]) document.writeln(makeTR('感想', FORM["kansou"].replace(/\r\n|\r|\n/g, "<BR>")));
}
drawHidden();
//-->
</SCRIPT>
</TABLE>
<CENTER><INPUT type="submit" value="送信"></CENTER>
</FORM>
</BODY>
</HTML>

正常に確認ページが表示され、その内容で送信できることは確認しましたが、actionにメールアドレスをいれてうまくいくかは分かりません。
どこかのフォームでコードサービスを利用した方が楽かもしれませんよ。

すみません。土日出かけていたため、回答が遅れました。
No.1に挙げた2の方法で書いたHTMLを載せますので、参考にしてみて下さい。
(行頭の全角スペースは、半角スペースやタブに変換してください。)

■Aページ
※<HEAD>~</HEAD>内に
<SCRIPT language="javascript"><!--
function kakunin(f) {
  var prm = new Array();

  if (f.namae.value) prm[prm.length] = "namae="+escape(f.namae.value);
  if (f.adress.value) prm[prm.length] = "adress="+escape(f.adress.value);
  for (v...続きを読む

Qonclickで複数のボタンで対応したCGIにデータを送りたいのですが。

下記のような感じで、

1.画像追加ボタンを押すと別ページ(b.cgi)に飛んで登録が終わったらまたこちらに戻ってきて、登録が押されるとそのまま登録処理(a.cgi)になる。
2.画像追加がされていなくても登録が押されるとそのまま登録処理をする。

(1.2.ともform内の情報はhiddenですべて送ります。)
こんな動きをさせたいのですが、参考サイトなどをみてもこういう動作をしているところがなくて丸3日悩んでいます。

onclick=submit の記述とJavascriptの書き方が問題だとは思うのですが煮詰まってしまいました。
皆様には初歩的な質問かもしれませんがどうぞよろしくお願いします。

<form method="post" enctype="multipart/form-data">

<input type="text" name="Title" value="" size="140">
<input type="text" name="Body1" value="" size="140" style="ime-mode: active;">

<input type="button" value="画像追加" onclick="submit(document.gazouform)">
<input type="button" value="登録" onclick="submit(document.tourokuform)">

<form action="a.cgi" method="post" enctype="multipart/form-data" id="tourokuform">

</form>
<form action="b.cgi" method="post" enctype="multipart/form-data" id="gazouform">

</form>

下記のような感じで、

1.画像追加ボタンを押すと別ページ(b.cgi)に飛んで登録が終わったらまたこちらに戻ってきて、登録が押されるとそのまま登録処理(a.cgi)になる。
2.画像追加がされていなくても登録が押されるとそのまま登録処理をする。

(1.2.ともform内の情報はhiddenですべて送ります。)
こんな動きをさせたいのですが、参考サイトなどをみてもこういう動作をしているところがなくて丸3日悩んでいます。

onclick=submit の記述とJavascriptの書き方が問題だとは思うのですが煮詰ま...続きを読む

Aベストアンサー

ANo1です。

submit(document.gazouform)でid="gazouform"のformをsubmitしようとしているのであれば、
 onclick="document.forms['gazouform'].submit()"
などとしてあげればよろしいかと…
でもそれだけだと、データがセットされていないので、目論んでおられるようにはならないでしょう。そのフォーム内のhiddenタグに値をセットしてあげる必要があります。

なお、送る内容が同じTitleとBody1であるのなら、No.1でも書きましたが、action先を指定してsubmitするようにすれば、formは1つだけですみます。

ボタンのイベントで onclick="hoge(1)" などとしておいて、
function hoge(a){
var act=(a==1)?'a.cgi':'b.cgi';
var frm=document.getElementById('f1');
frm.action=act;
frm.submit();
}

さらには、同じ内容を扱うので、a.cgiとb.cgiに共通する部分が多そうなので、処理aと処理bをこなせるようにまとめておく案もありそう。
フォームにはhiddenの項目を追加しておいて、その値で処理の種類を制御してあげればよろしいかと。
<input type="hidden" name="syori" id="syori" value="">
に対して、
onClick="document.getElementById('syori').value='a';submit()"
みたいな感じ。

ANo1です。

submit(document.gazouform)でid="gazouform"のformをsubmitしようとしているのであれば、
 onclick="document.forms['gazouform'].submit()"
などとしてあげればよろしいかと…
でもそれだけだと、データがセットされていないので、目論んでおられるようにはならないでしょう。そのフォーム内のhiddenタグに値をセットしてあげる必要があります。

なお、送る内容が同じTitleとBody1であるのなら、No.1でも書きましたが、action先を指定してsubmitするようにすれば、formは1つだけですみます...続きを読む

QonClickイベントの変更方法

JavaScriptのonclickイベントについてですが、

 <form name="fm">
 <input type="button" name="bt" value="開始" onclick="Change(1)">

という感じのフォームで、ボタンを押すとChange関数の方で、

 if(f == 1) {
   document.fm.bt.value="停止";
   document.fm.bt.onclick="Change(0)"; //(A)

として、onclickイベントの内容を変更したいのですが、
実際には上のような(A)の文では、
エラーは出ませんが、イベントの実行はできません。
onclickイベントの変更方法をご教授下さい。

ちなみに、プログラム自体は別の方法で対処しましたので、
「もっといい方法がある」というご回答は結構です。

それと、もう一つ教えていただきたいのですが、上の例で、

 document.writeln(document.fm.bt.onClick);

と実行すると"undefined"と表示されますが、

 document.writeln(document.fm.bt.onclick); //(onClickのCが小文字)

と実行すると"function anonymous() { Change(1) } "と表示されます。

大文字と小文字で、なぜ動作が変わるのでしょうか?
ご教授下さい。

JavaScriptのonclickイベントについてですが、

 <form name="fm">
 <input type="button" name="bt" value="開始" onclick="Change(1)">

という感じのフォームで、ボタンを押すとChange関数の方で、

 if(f == 1) {
   document.fm.bt.value="停止";
   document.fm.bt.onclick="Change(0)"; //(A)

として、onclickイベントの内容を変更したいのですが、
実際には上のような(A)の文では、
エラーは出ませんが、イベントの実行はできません。
onclickイベントの変更方法をご教授下...続きを読む

Aベストアンサー

document.fm.bt.onclick = new Function("Change(0);");
としてみてください。

私もわからなくて色々試してこうなりました。
勉強になりました。

別の方法ってinnerHTMLですかね?

Qonclickイベントでの二重送信防止に関して

onclickイベントでフォームの二重送信の防止をしたいと考えています。

<input "type="submit">が一つしかないページでは、
<input "type="submit" onclick="this.disabled=true;this.value='送信中';this.form.submit();" value="送信">
でうまくいったのですが、
2つ以上あるページだと、クリックすると空白のページに飛んでしまい、フォームが送信できませんでした。

どのようにすれば、<input "type="submit">が2つ以上あるページでも、この方法で二重送信防止を作動させることができるでしょうか。

ご教授よろしくお願いいたします。

Aベストアンサー

document.getElementByIdでも使って対象input要素を取得し、disabled = trueにすればいいのでは。
まずは、onClick()内に直接JavaScriptを書くのをやめればいいと思います。

https://developer.mozilla.org/ja/docs/Web/API/document.getElementById

Qonclickを使わずにイベント処理をする方法について。

onclickを使わずにイベント処理をする方法について。

【<h1>をクリックすると同じ<div>を親に持つ<p>が表示/非表示】
されるようにしたいのですが、IEで動作せず、困っています。

下記は現在のコードです。
--------------------------------------------------------------------------
var divs = document.getElementsByTagName('div');

var listener = function(ev){
if(/(?:^|\s)text(?:$|\s)/.test(ev.target.className)){

var next = ev.target.nextSibling.nextSibling;
if(next.style.display != "none"){
next.style.display = "none";
}else{
next.style.removeProperty("display");
}
}
};
if (document.addEventListener) {
document.addEventListener('click', listener, false);// IE以外
} else {
document.attachEvent("onclick", listener);// IE
}
--------------------------------------------------------------------------
<div>
<h1 class="text">見出し</h1>
<p>本文</p>
</div>
<div>
<h1 class="text">見出し</h1>
<p>本文</p>
</div>
<div>
<h1 class="text">見出し</h1>
<p>本文</p>
</div>
--------------------------------------------------------------------------

ev.target.classNameあたりが怪しく…
window.event.srcElement.classNameに変更してみましたが動作しませんでした。

html側の制約があり、出来れば上記のようなclassのみのhtmlで、
更にわがままを言うと

<div class="text">
<h1>見出し</h1>
<p>本文</p>
</div>

のようにdivにclassを振った形で実現したいです。

なお、現在のコードは複数のサンプルコードを参考に試行錯誤したものですので
不要なコードが混ざっているかもしれません。

動作確認環境はIE7、IE8、Firefox、Safari(Windows)です。

納期が迫り大変困っています。アドバイスを頂けますと嬉しいです。
宜しくお願い致します。

onclickを使わずにイベント処理をする方法について。

【<h1>をクリックすると同じ<div>を親に持つ<p>が表示/非表示】
されるようにしたいのですが、IEで動作せず、困っています。

下記は現在のコードです。
--------------------------------------------------------------------------
var divs = document.getElementsByTagName('div');

var listener = function(ev){
if(/(?:^|\s)text(?:$|\s)/.test(ev.target.className)){

var next = ev.target.nextSibling.nextSibling;
if(next.style.display != "no...続きを読む

Aベストアンサー

>> #9 yuu_xさん

なるほど…。スタイルシートのルールを書き換えればいいんですね!

質問者さんの動作確認環境はIE7以上だから、兄弟セレクタが使える、と。
(全角空白を半角空白に置換してください)

<script type="text/javascript"><!--
(function(){
 var styleSheets = this.document.styleSheets;
 var lastStyleSheet = styleSheets[styleSheets.length - 1];

 try{
  lastStyleSheet.insertRule('.text + p { display: none; }', lastStyleSheet.cssRules.length);
 } catch(e){
  lastStyleSheet.addRule('.text + p', 'display: none;', -1);
 }
})();
//--></script>

stylesheet.insertRule - MDC
https://developer.mozilla.org/En/DOM/Stylesheet.insertRule
document.styleSheets
https://developer.mozilla.org/ja/DOM/document.styleSheets

CSSStyleSheet Prototype (style)
http://msdn.microsoft.com/en-us/library/dd347054%28v=VS.85%29.aspx
addRule Method (styleSheet, CSSStyleSheet Constructor)
http://msdn.microsoft.com/ja-jp/library/aa358796%28v=VS.85%29.aspx

Javascript cssRules - とみぞーノート
http://wiki.bit-hive.com/tomizoo/pg/Javascript%20cssRules

# 最後に質問者さんにアドバイス。
質問当初に知らないことがあるのは別にいいんですが、回答をもらってそこかしこにある知らないキーワードをGoogle検索してみたり、MDCの資料に目を通したり、Firebugで検証したり…、といろいろやった方が自分のためになると思います。
それから再質問すれば、質問が具体的になって回答も寄せられやすくなると思いますよ。

実際、私も調べながら回答しています。(このスレッドが立つ前から、ここに書いたことを全部知っていたわけではありません)

>> #9 yuu_xさん

なるほど…。スタイルシートのルールを書き換えればいいんですね!

質問者さんの動作確認環境はIE7以上だから、兄弟セレクタが使える、と。
(全角空白を半角空白に置換してください)

<script type="text/javascript"><!--
(function(){
 var styleSheets = this.document.styleSheets;
 var lastStyleSheet = styleSheets[styleSheets.length - 1];

 try{
  lastStyleSheet.insertRule('.text + p { display: none; }', lastStyleSheet.cssRules.length);
 } catch(e){
  lastStyleShe...続きを読む


人気Q&Aランキング

おすすめ情報