プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
HTML、onsubmit時に処理を中断しようとしてよくやる失敗。
うっかりミスの類なのですけどね。
ついつい間が空くと忘れて繰り返しちゃうのでメモっておきます。

「onsubmit」内にも「return」を書いて「onsubmit="return hoge();"」のようにすること。

例えば

onsubmit時に入力チェックをしてエラーだったらsubmitしない



onsubmit時に確認ダイアログを出して「キャンセル」だったらsubmitしない

のようなことをしたい場合があります。

そんなとき、ついついこんなコードを書いちゃうのですよねφ(--)

<html>
<head>
<script type="text/javascript">
<!--
    function do_submit(){
        if(window.confirm('送信して良いですか?')){
            return true;
        }else{
            return false;
        }
    }
// -->
</script>
</head>
<body>
    <form action="./aaa.html" onsubmit="do_submit()">
        <input type="submit" value="送信">
    </form>
</body>
</html>

実際に動かしてみると分かりますが、
このコードだと「OK」でも「キャンセル」でもsubmitされちゃうのです。

正解はこちらですφ(--)

<html>
<head>
<script type="text/javascript">
<!--
    function do_submit(){
        if(window.confirm('送信して良いですか?')){
            return true;
        }else{
            return false;
        }
    }
// -->
</script>
</head>
<body>
    <form action="./aaa.html" onsubmit="return do_submit()">
        <input type="submit" value="送信">
    </form>
</body>
</html>

そうです。
onsubmit内にも「return」を書いてあげないと駄目なのです。

なんで(--?

私も一瞬戸惑いましたが、考えてみれば当たり前でした。

最初のコード(間違っているコード)はこれとほぼ一緒じゃないですかφ(--)

<html>
<head>
</script>
</head>
<body>
    <form action="./aaa.html" onsubmit="false;">
        <input type="submit" value="送信">
    </form>
</body>
</html>

実際にやってみると分かりますが「onsubmit="false;"」の場合、
送信ボタンを押すとsubmitされます。

一方、後者のコードはこれと似たようなものですφ(--)

<html>
<head>
</head>
<body>
    <form action="./aaa.html" onsubmit="return false;">
        <input type="submit" value="送信">
    </form>
</body>
</html>

「onsubmit="return false;"」の場合は送信ボタンを押してもsubmitされます。

これがonsubmit内にreturnが必要な理由です。

完了\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:パソコンな日々 - genre:コンピュータ  Posted by ササキマコト 

  関連記事