質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.52%

FORMの入力途中で画面移動の際アラートを出すスクリプトを回避したいです

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,514

Sora-tan

score 622

下記の<TABLE>に配置した<FORM>(計算シート)で 最後の列にあるinput[radio]の一行挿入の処理をしようとして下の(1番目のJS)を書きました。
(※実際のテーブルの行は400行程度ありますが 最後の行を超えた場合の処理はひとまず先送りにしてます)

この際、一度挿入した行にもう一度挿入しようとしても仮想的に作り出した行には反応してくれないことが解かりました。
そこで、挿入が完了した際、一度SUBMITして受け側のPHPで値を代入して元の画面に戻すことにしたのですが、

このフォームには入力途中で画面移動する際警告を出すスクリプトを組み込んであります。(2番目のJS)
(1番目のJS)でsubmitする際に(2番目のJS)の機能を回避したいのですが 方法が解かりません。

宜しくお願い致します。

<form  id="quotation">
<table>
        <tr>
            <th>No</th><th>適用</th><th>数量</th><th>単価</th><th>合計</th><th>操作</th>
        </tr>

        <tr class="quotation">
            <td><input type="number" class="row" value="1"></td>
            <td><input type="text" class="item" name="item[]" value="" /></td>
            <td><input type="number" class="num" name="num[]" value="" /></td>
            <td><input type="number" class="per" name="per[]" value="" /></td>
            <td><input class="subtotal par" id="subtotal1" type="number" disabled="disabled" value="" /></td>
            <td>
                <div class="cogs_inner">
                    <label>一行挿入    <input class="control" type="radio" value="1" /></label>
                    <label>行削除    <input class="control" type="radio" value="2" /></label>
                    <label>操作3    <input class="control" type="radio" value="3" /></label>
                    <label>操作4    <input class="control" type="radio" value="4" /></label>
                </div>
            </td>
        </tr>

        <tr class="quotation">
            <td><input type="number" class="row" value="2"></td>
            <td><input type="text" class="item" name="item[]" value="" /></td>
            <td><input type="number" class="num" name="num[]" value="" /></td>
            <td><input type="number" class="per" name="per[]" value="" /></td>
            <td><input class="subtotal par" id="subtotal2" type="number" disabled="disabled" value="" /></td>
            <td>
                <div class="cogs_inner">
                    <label>一行挿入    <input class="control" type="radio" value="1" /></label>
                    <label>行削除    <input class="control" type="radio" value="2" /></label>
                    <label>操作3    <input class="control" type="radio" value="3" /></label>
                    <label>操作4    <input class="control" type="radio" value="4" /></label>
                </div>
            </td>
        </tr>

        <tr class="quotation">
            <td><input type="number" class="row" value="3"></td>
            <td><input type="text" class="item" name="item[]" value="" /></td>
            <td><input type="number" class="num" name="num[]" value="" /></td>
            <td><input type="number" class="per" name="per[]" value="" /></td>
            <td><input class="subtotal par" id="subtotal3" type="number" disabled="disabled" value="" /></td>
            <td>
                <div>
                    <label>一行挿入    <input class="control" type="radio" value="1" /></label>
                    <label>行削除    <input class="control" type="radio" value="2" /></label>
                    <label>操作3    <input class="control" type="radio" value="3" /></label>
                    <label>操作4    <input class="control" type="radio" value="4" /></label>
                </div>
            </td>
        </tr>
    </table>
    </form >


「計算シートの操作を行うスクリプト」

$( '.control' ).change( function() {

        //ここに入れてみたけどだめでした
        // $(window).off('beforeunload');

        var control = Number(this.value);
        switch(control){
            case 1:
                var this_row = parseInt($(this).closest("tr").find("input.row").val());

                $(".quotation").each(function() {
                    var row = parseInt($( this ).find(".row").val());
                    //操作をかけた行だったら 一先ずesc1に代入して 各inputの値をクリア
                        if(row == this_row){
                            esc1item = $(this).find('.item').val();
                            esc1num = $(this).find('.num').val();
                            esc1per = $(this).find('.per').val();
                            esc1subtotal = $(this).find('.subtotal').val();

                            $(this).find("input.item").val("");
                            $(this).find("input.num").val("");
                            $(this).find("input.per").val("");
                            $(this).find("input.subtotal").val("");
                        }
                    //操作をかけた行の後の行だったら 各inputの値をesc2に代入して 
         //各inputにesc1の値を挿入 そのあとesc2をesc1に入れ替え
                        if(row > this_row){
                            var esc2item = $(this).find('.item').val();
                            var esc2spec = $(this).find('.spec').val();
                            var esc2num = $(this).find('.num').val();
                            var esc2per = $(this).find('.per').val();
                            var esc2subtotal = $(this).find('.subtotal').val();

                            $(this).find("input.item").val(esc1item);
                            $(this).find("input.num").val(esc1num);
                            $(this).find("input.per").val(esc1per);
                            $(this).find("input.subtotal").val(esc1subtotal);

                            esc1item = esc2item;
                            esc1num = esc2num;
                            esc1per = esc2per;
                            esc1subtotal = esc2subtotal;
                        }
                });
                //1行挿入された状態で一度サブミット
                $(document.forms["quotation"]).submit();

                //ここに入れてみたけどだめでした
                // $(window).off('beforeunload');
            ;
            break;
            case 2:
            ;
            break;
            case 3:
            ;
            break;
            case 4:
            ;
            break;
        }
    });


値が変更されたとき(input要素、select要素が変更された場合)に
ブラウザの戻るや更新ボタン、タブを閉じるときに
警告をだすようにする

$(window).ready(function(){

        $('input, textarea, select, radio').on('keyup change', function(){

            $(window).on('beforeunload', function() {
            return "入力途中のデータがあります。このページを離れると、入力したデータが削除されます。本当に移動しますか。";
            });

            $("#cancel").click(function () {
                $(window).on('beforeunload', function() {
                return "入力途中のデータがあります。このページを離れると、入力したデータが削除されます。本当に移動しますか。";
                });
        });
    });

    // 戻るリンクや送信ボタンなどの通常の方法で画面遷移した場合は、
    // 通常通りアラートは表示されずに遷移する
    $('button[type=submit], input[type=submit]').on('click', function(e) {
        $(window).off('beforeunload');
        });
    });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

jsで動的に追加したDOMに関連あるイベント(クリックなど)を
動作させるにはdocumentでイベントの発火を検知する必要があります。
※ 旧バージョンではliveというメソッドがありました。
もしくは、DOMを追加する時にイベントをbindする必要があります。

下記は、documentでイベントを検知する方法です。
もしかしたら、changeイベントを受け取れないかも?
その場合はclickイベントに変更するなど工夫が必要かと思います。

$( '.control' ).change( function() {
  // チェンジした時の処理
});
↓ // 上記を下記に書き換えてみてはどうでしょうか?
$(document).on('change', '.control', function () {
  // チェンジした時の処理
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/01/12 17:45

    ご回答ありがとうございます!
    正直[bind]とかきちんとは理解できていないんですが
    $(document).on('change', '.control', function ()で理想通りの動作になりました。

    時間が出来たらきちんと理解出来るように勉強します!
    本当にありがとうございました

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる