カテゴリー別アーカイブ: Javascript

クリックしたボタンによる Form の内容変更

先日、同じ送信内容を「送信」「戻る」で違う URL に対して送れないかと聞かれました。
とりあえずは口頭で私がよく使う方法を伝えましたが念のため
念のため備忘録として記載しておきます。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

        <script type="text/javascript"><!--

            $(function(){

                $('button').click( function() {

                    var getID;
                        getID = $(this).attr('id');

                    var targetFrom;
                        targetFrom = $('#targetForm');

                    var targetURL;
                    switch ( getID ) {
                        case 'google':
                            targetURL = 'https://www.google.co.jp';
                            break;
                        case 'yahoo':
                            targetURL = 'http://www.yahoo.co.jp';
                            break;
                        default:
                            break;
                    }

                    targetFrom.attr( 'action', targetURL ).submit();

                });

            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin : 10px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <form id="targetForm" action="" method="get">
                <input type="text" name="sample1">
                <input type="text" name="sample2">
                <input type="text" name="sample3">
            </form>

            <div id="button_area">
                <button id="google">google</button>
                <button id="yahoo">yahoo</button>
            </div>

        </div>
    </body>
</html>

sample

sample の button を click すると、それぞれのサイトに移動します。
実際の処理では action の内容を変更することで、「戻る」「送信」に
振り分ける形になります。

正直な話、同一の内容を From を2個作ってしまうのも手なのですが、
すでに CSS が設定済みの場合には、CSSを直す必要がないほうが
良いので今回みたいな方法を良く行います。

意外と便利なんですがどうでしょうか・・・

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

strict モード

当Blogを休止してから前々回の再開まで、おおよそ一年は経っていないと思います。
ですが、さすが日進月歩の世界です。
いろいろと状況が変わっているようですね。
 #jQuery 3.0 のベータ版も公開されているようです。

ということで、改めて調べ直しましたが、色々変わっているようですね。
今回から暫くは調べた内容を記載して行こうかなと思います。
実際には忘備録的な内容ですね。

ということで今回に関しては「strict モード」についてです。
Javascript は非常に緩い言語として認識されていると思っています。
「厳格」とはかけ離れた言語ですが、それが良い点でもあり悪い点でもあります。

しかし、実際のところ良くない書き方もそのまま通ってしまうのはあまり良いことではありません。
できれば「new」の忘れや「undefined」に対して扱いについて、jQueryでエラーが出力されると
有り難いのになと思います。

今回はその部分に対して「厳格」に判断してエラーを表示させる方法です。

'use strict';

意外なことに上記の一文を入れるだけで良いようです。
ただし、自分で記載した内容のみであれば問題ありませんが、他にもプラグインなども使用する場合や、
GoogleMap などの場合には問題が発生しそうです。

そのため、実際には以下のような名前空間内での使用となりそうです。

$(function() {
    'use strict';
});

なお、今回の記事は実際には記載内容が無いため、Sampleソースはありません(笑)

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。