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

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

ただいまの
回答率

88.34%

javascript onsubmitの使い方を教えて頂けませんか

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 3,362

milkif

score 16

前提・実現したいこと

onsubmit="return check();"を使い、チェックボックスにチェックが付いていることを確認し、ポスト送信完了時にチェックボックスを表示しているモーダルを閉じて次の動画を表示させたい。

発生している問題・エラーメッセージ

前回も同等の質問をし解決出来たと思っていましたが上手く動作せず、再度お願い致します。

onsubmit="return check();"を使い、チェックボックスの入力未入力、post送信のデータの受信までは動作確認はできましたが、jsファイルのcheck()関数内にモーダルを閉じて次の動画を表示するためのコードを含めるとpost送信ができなくなってしまいます。return falseが原因?

function check()内でpost送信と同時に別の動作(モーダルを閉じる、次の動画を読み込む)をさせることは可能でしょうか?

出来ない場合、post送信完了後、次の関数を呼び出して次の動作(モーダルを閉じる、次の動画を読み込む)をさせることは可能でしょうか?
その場合、どのように書いていいのかネットで調べているのですがわからなかったのでどのように書くか教えて頂けませんか。

該当のソースコード

このコードだとpost送信は成功する
function check() {
    var check_count = $("[name='check[]']:checked").length;
    if (check_count == 0 ){
        alert('何もチェックされていません');
        return false;
    }else{
        var checks=[];
        $("[name='check[]']:checked").each(function(){
                checks.push(this.value);
        });
    }
};
このコードだとモーダルを閉じて、次の動画の取得はできるがpost送信が失敗してしまう。
function check() {
    var check_count = $("[name='check[]']:checked").length;
    if (check_count == 0 ){
        alert('何もチェックされていません');
        return false;
    }else{
        var checks=[];
        $("[name='check[]']:checked").each(function(){
                checks.push(this.value);
        });
        $('#myModal').modal('hide');
        if(index < videos.length-1){
        index++;
        ytId = videos[index].Video.v_ytid;
      }
        return false; //trueだとモーダルも動画も動作しない
    }
};
前回ajaxで試した時のコード。(今回は使っていません)
    $('.send').click(function(){
            var check_count = $("[name='check[]']:checked").length;
            if (check_count == 0 ){
        return false;
        }else{
            var checks=[];
            $("[name='check[]']:checked").each(function(){
                    checks.push(this.value);
            });

            $.ajax({
                    type: "POST",
                    url: "",
                    dataType: "json",
                    data: {"checks":checks},
                    success: function(){
                            $('#myModal').modal('hide');
                            if(index < videos.length-1){
                                index++;
                                getElements();
                            }
                    }
            });
            return false;
        }
  });

補足情報(言語/FW/ツール等のバージョンなど)

XAMPP 5.6.14-0 
cakephp-2.7.8 
jquery 1.11.0

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • milkif

    2016/05/25 03:41

    こちらこそ有難うございます。ネットで調べながらやっていますが、cakephpでajaxの値を受ける方法が理解できていない事と、調べきれていないだけです。

    キャンセル

  • kei344

    2016/05/25 03:47

    使わないと解決できない案件なので、cakephp のコードを含めての質問にされてはいかがでしょうか。

    キャンセル

  • milkif

    2016/05/25 03:50

    ajax使わないと出来ないんですね。ありがとうございました。

    キャンセル

回答 2

checkベストアンサー

+1

まず、モーダル(子ウィンドウ)あたりの基本的なことを身に着けた方が良いです。
ajax抜きに説明します。

onsubmit="return check();"を使い、チェックボックスにチェックが付いていることを確認し、ポスト送信完了時にチェックボックスを表示しているモーダルを閉じて次の動画を表示させたい。

モーダルは、子ウインドウの事で、親ウィンドウが必ずあります。
それが、 onsubmit="return check();"を実装している画面です。
しかし、親画面が切り替わってしまった時点で子ウィンドウとのヒモ付は切れます。
つまり、やりたいことの実現は難しいということです。

そこで基本的な勉強ですが、
子ウィンドウはwindow.openを使います。
また戻り値を変数にハンドリングさせることで、親画面から操作可能です。

window.openについては、ここがかなりわかりやすく説明してくれてます。

また、子ウィンドウの操作については、このへん見るとわかりやすいかと思います。

どちらもjQueryを使用してません。
基本を勉強するのにjQueryは不要ということです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/25 05:31

    ご丁寧に参考サイトまで有難うございます。
    モーダルですが、動作的には親ウインドウの動画が終了すると、モーダルの子ウインドウが表示され、その子ウインドウ内に質問のチェックボックスと送信ボタンが表示され、子ウインドウの送信ボタンを押すことで、post通信とその子ウインドウを閉じ、次の動画が用意される仕組みです。なのでonsubmit="return check();"を実装しているのは小ウインドウ画面になるという解釈でいいのでしょうか?

    キャンセル

  • 2016/05/25 08:54

    onsubmitについて質問の意図を汲まずに回答すると、子でも親でもどちらでも実装可能です。
    どちらか迷うようであれば、子ウィンドウを使わずに親画面だけで実装を試みてください。
    最初は、わからないことだらけで突き進んだと思いますが、躓いてどうにもならなくなったら、1つ1つの課題をきっちりと洗い出しながら、丁寧に解決していった方が、「理解」が増えて、スムーズに対応できてきます。

    キャンセル

  • 2016/05/27 07:47

    回答有り難うございました。初心者のくせにネットで上辺だけさらって開発をしているので仰るとおり1つ1つの課題をきっちりと洗い出しながら、基本から積み上げて行った方が近道なのかもしれません。今回はajaxをとことん見直して何とか実装できました。
    いろいろアドバイス有難うござました。

    キャンセル

0

ajaxでしか対応できないとのコメントを頂き再度挑戦してみました。
error: functionを付加することにより分かったのが、dataTypeが原因だったようです。”json”だと引っかかってや”text”で動きました。色々アドバイスを下さった方有難うございました。

$(".send").on("click",function(){
        var check_count = $("[name='check[]']:checked").length;
        if (check_count == 0 ){
        return false;
        }else{
    var checked=[];
    $("[name='check[]']:checked").each(function(){
        checked.push(this.value);
    });
    $.ajax({
            type: "POST",
            url: "",
                dataType: "text",
                data: {
            "checked":checked
        },
                success: function() {
                        alert(checked);
                        $('#myModal').modal('hide');
                        if(index < videos.length-1){
                            index++;
                            getElements();
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert('Error : ' + errorThrown);
                    }
        });
        }
        return false;
});

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

同じタグがついた質問を見る