- PR -

JavaScriptのSubmitが出来ない

投稿者投稿内容
mso
ぬし
会議室デビュー日: 2003/12/04
投稿数: 496
お住まい・勤務地: 宮城
投稿日時: 2004-02-26 16:00
ご協力ありがとうございました。
とりあえずは永井さんの方法のreturn false;を入れることで
期待通りの動作をしているようです。
細かい検証はまだこれからやっていきますが、とりあえず現状報告を
しておきます。

まゆりんさん>
提案ありがとうございます。
まゆりんさんの方法も考えたのですが、
すでに別のプログラムで<a href="javascript:void(0)"....>というような
書き方をしていたので悩んでいました。
まゆりんさんの方法でも検証してみて、どっちが良いかを検証してみます。

永井和彦さん>
ありがとうございました。
今のところはまだなぜ"return false"を入れないといけないのか
理解しきっていないのですが、こういうケースもあるとまずは覚えておきます。
#理想は理解して書くことなのですが、
#なかなか理解できないでいます。(反省)

Heさん>
お手数をおかけするのですが、なぜおかしいのか説明して
いただけないでしょうか?
お恥ずかしいことですが、あまり詳しくないまま仕事で
使っています。
これを機にJavaScriptの勉強をしようとしているのですが、
なかなか思うようにできていません。
よろしくお願いします。

まゆりん
ぬし
会議室デビュー日: 2002/08/12
投稿数: 539
お住まい・勤務地: よこはま
投稿日時: 2004-02-26 16:08
引用:

Heさんの書き込み (2004-02-26 15:18) より:
↓以下が、おかしいような気がします。
引用:

msoさんの書き込み (2004-02-26 14:55) より:
<a href="javascript:void(0)" onclick="javascript:a()">test</a>





うーん、特に関係ないと思います。
「この関数はJavaScriptですよ〜」と教えているだけですから。たぶん。


_________________

まゆりん@人生Try and Error!(笑)

[ メッセージ編集済み 編集者: まゆりん 編集日時 2004-02-26 16:08 ]
He
大ベテラン
会議室デビュー日: 2002/12/18
投稿数: 141
投稿日時: 2004-02-26 16:20
すいません。最近忙しくて説明が後回しになってしまいました。
後日、もうちょっと詳細に解説いたしますので、少しお待ちください。
とりあえず、私の最初の投稿をよくごらんいただければ、永井和彦さんと同様の解決策を提示していることがお分かりいただけるかと。
He
大ベテラン
会議室デビュー日: 2002/12/18
投稿数: 141
投稿日時: 2004-03-01 01:46
コード:
<script>

function funcA(){
alert("TEST");
return false;
}
</script>
<a href="A.htm" onclick="funcA()" >A</a>
<a href="B.htm" onclick="return funcA()" >B</a>


上記の例を実際に試していただければおわかりいただけるかと思いますが、
イベントハンドラ自体がfalseを返すことで、そのイベントが本来行う処理をキャンセルできます。
この例でいうと、
 ・Aをクリック → アラート表示 → 画面遷移する
 ・Bをクリック → アラート表示 → 画面遷移しない(A要素本来の処理がキャンセルされた)
となります。
ややこしいのですが、on〜〜がfalseを返す必要があります。
on〜〜から呼び出されるメソッドがfalseを返すだけではダメです。

# 永井和彦さんの説明とかぶりますが、
msoさんが記述した処理が期待通りに動作しなかったのは、
イベントハンドラ内のsubmit()より先に、A要素によるvoid(0)が実行されてしまったためだと思われます。
そこで、onclickからfalseを返してやることによりvoid(0)の実行をキャンセルするわけです。
つまり、hrefの値はvoid(0)でなくてもよいです。(どうせ実行されませんから。)

ついでに、
以下の記述で、SUBMITを確認するダイアログを表示させられるのもこの技術の応用です。
(confirmダイアログで「キャンセル」を選択すると、falseが戻るのでsubmitイベントがキャンセルされます。)
<form … onsubmit="return confirm('OK?')">

さらについでに、
以下の記述で、readonlyっぽいチェックボックスを作れます。
<input type="checkbox" checked onclick="return false">

さらにさらについでに、
以下の記述では、ページの読み込みをキャンセルできませんでした。(できても嬉しくありませんが。)
<body onload="return false">

どのイベントがキャンセルできるかは、MSDNのReferenceで確認できます。


引用:
<a … onclick="javascript:a()">test</a>


onclickの値は、スクリプトの内容を指定します。
上記の記述だと、『javascript:a()』という名前の関数を実行することを指定しています。
ここをご覧になっている多くの方はご存知だと思いますが、
WebブラウザはHTMLの記述にミスがあってもエラーとせず、何とか表示しようとします。
結果、上記の記述を『a()』という関数を実行すると解釈する場合もあるかもしれませんが、
それは仕様で定められた動作ではありません。たまたまそのブラウザがそう解釈しただけなのです。
# ちなみに、手元のIE6とOpere7.23は『a()』を実行しましたが、Firefox0.8では何も起きませんでした。
## 修正:もう一度試してみたら、FirefoxもIEと同様に動作しました。とはいえ、やはり仕様に無いものをわざわざ記述することにメリットは感じないのですが。

『javascript:』の部分はスキームと呼ばれ、
URIで情報の種類を指定するものであり、
on〜〜のなかでスクリプトの言語を指定するものではありません。

蛇足ですが、on〜〜で動作するスクリプトの言語を指定するためには、METAを使用します。
# これもまた、指定がなくてもブラウザが気を利かせてJavaScriptだと解釈してくれたりするわけですが。


# ずいぶん沈んでいたスレッドを上げてしまって恐縮です。
# しかし3日でここまで沈むとは、恐るべしInsider.NET会議室


[ メッセージ編集済み 編集者: He 編集日時 2004-03-02 00:28 ]
まゆりん
ぬし
会議室デビュー日: 2002/08/12
投稿数: 539
お住まい・勤務地: よこはま
投稿日時: 2004-03-05 16:50
こんにちは、最近打ち合わせ漬になっているまゆりんです。
随分と下がってしまったスレッドを上げてしまいました。。。

>Heさん
お忙しい中有難うございます。
確かに閉じタグ忘れてもブラウザ上では正常に表示してくれますね。特にIE。
それで調子に乗って作ってたら先輩に「NNで見ると崩れまくってるよ」とよく言われていたものです。

「javascript:」に関しては、以前参考にさせて頂いておりましたサンプル集で見かけました。
恥ずかしながらおかしい等とは全く思っておりませんでしので、大変良い勉強になりました。
(と同時に、もうちょっと基礎を固めないととも思いました・・・)

>msoさん
ご検討頂き有難うございました。
他の個所でもvoid(0)をお使いならそのままにした方が混乱せずに済みますね。
_________________
まゆりん @ わんくま同盟
Blog る。

スキルアップ/キャリアアップ(JOB@IT)