月別アーカイブ: 2016年5月

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

前回は Click する Button によって Form 内容の送信先を変更しました。
折角なので今回は、もう一つのよくあるパターンも記載しておきたいと思います。
 # 今回の内容は jQuery だけでは完了しませんので番外編となります。

今回の概要としては、一つの URL でいくつかの処理を分岐させて行う場合の処理です。
よくある使い方として「入力画面」「確認画面」「完了画面」を出しわける場合になります。
主に自作のメールフォームなどを作成する場合ですね。
 # 完了画面の場合は送る必要は無いありませんが、その辺は php などで処理して下さい(笑)

上記の場合、基本的には入力フォームの内容は変わらないことが多いです。
そのため、現在の画面状況をデータとして送る必要があります。
今回は「確認画面」での「戻る」「送信」のボタン制御を想定しています。

<!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 mode;
                        mode = $('#formMode');

                    var targetURL;
                    switch ( getID ) {
                        case 'send':
                            mode.val('complete');
                            break;
                        case 'confirm':
                            mode.val('confirm');
                            break;
                        case 'input':
                        default:
                            mode.val('input');
                            break;
                    }

                    targetFrom.submit();

                });

            });


        --></script>

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

            div {
                margin     : 10px;
            }

            dt {
                margin-top : 10px;
            }

        --></style>

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

            <form id="targetForm" action="./sample_1523.html" method="get">
                <input type="hidden" id="formMode" name="mode" value="send">
                <dl>
                    <dt>Name</dt>
                    <dd><input type="text" name="sample1"></dd>
                    <dt>Title</dt>
                    <dd><input type="text" name="sample2"></dd>
                    <dt>Message</dt>
                    <dd><input type="text" name="sample3"></dd>
                </dl>
            </form>

            <div id="button_area">
                <button id="input">Back</button>
                <button id="send">Send Mail</button>
            </div>

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

sample

sample の中には Button が二つありますが、click した Button によって mode を
切り替えています。
 # 実際には php などで mode によって出力内容を作成する必要があります。

メールフォームの場合は「入力画面」に戻る場合も「完了画面」に進む場合にも同じ内容を
入力しないといけません。
間違いが発生することを避けるためにも Form に関しては一つにする必要があります。
その点を考慮すると意外と使用頻度が高いのでは無いかと思いますがいかがでしょうか。

なお、今回はわかりやすいように method を GET にしておりますが、
実際には POST 送信に変更する必要があります。

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

クリックしたボタンによる 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 人がこの 投稿 は役に立ったと言っています。

画像エリアの削除

今回の内容はちょっとした説明用です。
内容は依然に行っていた内容の簡易版ですがご了承ください。

先日社内にて、今度納品するにサイトで「 mac × safari 」の時に画面内の
link や button が動作しないとのご相談を頂きました。
担当さんから頂いたご説明では以下の内容でした。
 「おそらくスプラッシュ用の SVG が邪魔している。」

担当さんの仰る通り、SVG が透過された状態で link や button を
覆ってしまっていることが問題でした。

今まで、fadeIn や fadeOut の処理に関しては jQuery を使用していた為、
Object を消してしまうところまで行いましたが・・・
SVG や CSS の制御で animation が可能になったために起きる問題ですねぇ。

<!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 src="./jquery-2.1.4.min.js"></script>

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

            $(window).load( function() {
                $(this).delay(1000).queue( function(){
                    $('#splash').remove();
                });
            });

        --></script>

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

            div {
                margin : 10px;
            }

        --></style>

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

            <div id="target_area">
                <img id="splash" src="./image_jpeg.jpg">
            </div>

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

sample

sample を見て頂きしばらくすると画像が remove します。
今回の相談内容の様な場合には SVG や CSS の動作にて非表示になっていれば
hide でも十分になるかと思います。

注意事項として
 $(document).ready(function() {
  Or
 $(function() {

ではなく以下のものを使用してすべての内容を読み込んだ後に行うことです。
$(window).load

また、delay は queue(animation の順番)が指定されたもにしか動作しない。
そのため「queue( function(){」の形式で作業する必要があります。

そんなところですね。

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

特定のページ内リンクでの処理の振り分け

先日ちょっとした相談を社内で頂いたので、その内容を記載したいと思います。
以下の状況のため特殊処理の項目だけ ページ内リンクの処理を停止したいとのことです。
 「ページ内リンクを複数設定しているが、そのうちの一つだけ特殊な動きをさせている」

実際は複数の plugin を使用しているうち、一つの処理だけメニュー用に表示を行うため
特定の href が特定のテキストの場合、スクロール用の処理を行いたく無いそうです。

<!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(){
                $('a[href^="#"]').click( function () {
                    var target = $(this).attr("href");
                    switch (target) {
                        case '#m-main':
                            alert('mein menu action');
                            break;
                        case '#m-sub':
                            alert('sub menu action');
                            break;
                        default:
                            alert('default action');
                            break;
                     }
                });
            });

        --></script>

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

            div {
                margin : 10px;
            }

        --></style>

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

            <div id="target_area">
                <a href="/" target="_blank">home</a>
                <a href="#m-main">main menu</a>
                <a href="#m-sub">sub menu</a>
                <a href="#top">default action 1</a>
                <a href="#bottom">default action 2</a>
            </div>

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

sample

sample の説明としては、aタグを click した際に、処理の切り分けを行います。
click した aタグがpage内Link(#)の場合だけ処理を行います。
この分岐内で、発動する処理をそれぞれ個別に記載しておき、function の呼び出しで
競合せずに対応可能です。

最近は凝った menu 用の plugin にも増えてきました。
そういった時に page scroll 系の Plugin に干渉してしまうようであればお試しください。

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