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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

4834閲覧

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

milkif

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/05/24 16:57

編集2016/05/26 23:03

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

###発生している問題・エラーメッセージ
前回も同等の質問をし解決出来たと思っていましたが上手く動作せず、再度お願い致します。

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

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

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

###該当のソースコード

javascript

1このコードだとpost送信は成功する 2function check() { 3 var check_count = $("[name='check[]']:checked").length; 4 if (check_count == 0 ){ 5 alert('何もチェックされていません'); 6 return false; 7 }else{ 8 var checks=[]; 9 $("[name='check[]']:checked").each(function(){ 10 checks.push(this.value); 11 }); 12 } 13};

javascript

1このコードだとモーダルを閉じて、次の動画の取得はできるがpost送信が失敗してしまう。 2function check() { 3 var check_count = $("[name='check[]']:checked").length; 4 if (check_count == 0 ){ 5 alert('何もチェックされていません'); 6 return false; 7 }else{ 8 var checks=[]; 9 $("[name='check[]']:checked").each(function(){ 10 checks.push(this.value); 11 }); 12 $('#myModal').modal('hide'); 13 if(index < videos.length-1){ 14 index++; 15 ytId = videos[index].Video.v_ytid; 16 } 17 return false; //trueだとモーダルも動画も動作しない 18 } 19}; 20

javascript

1前回ajaxで試した時のコード。(今回は使っていません) 2 $('.send').click(function(){ 3 var check_count = $("[name='check[]']:checked").length; 4 if (check_count == 0 ){ 5 return false; 6 }else{ 7 var checks=[]; 8 $("[name='check[]']:checked").each(function(){ 9 checks.push(this.value); 10 }); 11 12 $.ajax({ 13 type: "POST", 14 url: "", 15 dataType: "json", 16 data: {"checks":checks}, 17 success: function(){ 18 $('#myModal').modal('hide'); 19 if(index < videos.length-1){ 20 index++; 21 getElements(); 22 } 23 } 24 }); 25 return false; 26 } 27 });

###補足情報(言語/FW/ツール等のバージョンなど)
XAMPP 5.6.14-0
cakephp-2.7.8
jquery 1.11.0

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/05/24 17:07

二つ目のコードもコードブロックで囲んでいただけませんか?
kei344

2016/05/24 17:11

前回「ajaxを使って何とか期待通りの動作ができました」と書かれていましたが今回そのコードがありません。今回希望されている動作にはほぼ必須かと思いますが、まったく別の内容なのでしょうか。
kei344

2016/05/24 18:30

編集ありがとうございます。ちなみに今回ajaxを使っていないことの理由などありますか?
milkif

2016/05/24 18:41

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

2016/05/24 18:47

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

2016/05/24 18:50

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

回答2

0

ベストアンサー

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

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

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

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

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

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

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

投稿2016/05/24 20:04

TetsujiMiwa

総合スコア1124

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

milkif

2016/05/24 20:31

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

2016/05/24 23:54

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

2016/05/26 22:47

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

0

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

javascript

1$(".send").on("click",function(){ 2 var check_count = $("[name='check[]']:checked").length; 3 if (check_count == 0 ){ 4 return false; 5 }else{ 6 var checked=[]; 7 $("[name='check[]']:checked").each(function(){ 8 checked.push(this.value); 9 }); 10 $.ajax({ 11 type: "POST", 12 url: "", 13 dataType: "text", 14 data: { 15 "checked":checked 16 }, 17 success: function() { 18 alert(checked); 19 $('#myModal').modal('hide'); 20 if(index < videos.length-1){ 21 index++; 22 getElements(); 23 } 24 }, 25 error: function(XMLHttpRequest, textStatus, errorThrown) { 26 alert('Error : ' + errorThrown); 27 } 28 }); 29 } 30 return false; 31});

投稿2016/05/26 22:59

編集2016/05/27 01:00
milkif

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問