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

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

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

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

5回答

5359閲覧

post送信の方法を教えて頂けませんか

milkif

総合スコア16

CakePHP

CakePHPは、PHPで書かれたWebアプリケーション開発用のフレームワークです。 Ruby on Railsの考え方を多く取り入れており、Railsの高速性とPHPの機動性を兼ね備えています。 MVCやORMなどを「規約優先の考え方」で利用するため、コードを書く手間を省くことができます。 外部のライブラリに依存しないので、単体での利用が可能です。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/05/18 13:43

編集2016/05/18 18:51

###前提・実現したいこと
複数選択可能なチェックボックスにおいて、未チェックなら送信ボタンをクリックできないようjqeryで制御し、チェックが付いたらpost送信と同時にindexの値を一つプラスしたい。

未チェック時のjqueryの制御は正しく動作していますが、submitボタンの書き方や制御がわからず上手く反映されません。 <input type="submit" id="submit" value="Submit">では、 post通信は確認できましたが、indexの値は、リロードしてしまい?一瞬反映され元の値に戻ってしまいます。 <input type="button" id="submit" value="Submit">では、 indexの値はconsole.log(index)に反映されていますが、post通信されません。

###該当のソースコード
test.ctp

<?php if (!empty($_POST)){ $answer = $_POST["answer"]; print_r ($answer); } ?>

// id="hoge"を追記

<form method="post" action="" id="hoge"> <input type="checkbox" id="check1" name="answer[]" value="1">チェック1<br> <input type="checkbox" id="check2" name="answer[]" value="2">チェック2<br> <input type="submit" id="submit" value="Submit"> <!-- <input type="button" id="submit" value="Submit"> --> </form> ``` test.js //未チェック時の制御 $(function() { $('#submit').attr('disabled', 'disabled'); $('#check1,#check2).click(function() { if ($(this).prop('checked') == false) { $('#submit').attr('disabled', 'disabled'); } else { $('#submit').removeAttr('disabled'); } }); });

//送信時の制御 $('#submit').click(function()を下記に修正
var index = 0;
$('#hoge').submit(function() {
index++;
console.log(index);
});

###試したこと 主にctpファイルのinputの書き方をネットで調べていろいろ書き換えてみましたが、どれも上手く行きませんでした。 ###補足情報(言語/FW/ツール等のバージョンなど) XAMPP 5.6.14-0 cakephp-2.7.8 jquery 1.11.0

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

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

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

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

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

guest

回答5

0

このフォームはajaxを使用していなので、POSTされたらページ遷移が起こります。
リロードと感じているところは同一のURLのページへ移動しているところですね。
そのため移動前のページのjavascriptの変数であるindexは消えてなくなります。
indexの値が戻るのではなく、増えたけど別ページに移動してしまって変数自体が消えてしまい、新たに同名の変数ができたという流れです。
修正案としてはフォームでindexの値も送信して、PHPでtest.jsの読み込みより後にindexの値を上書きするようなjavascriptを書くことでしょうか。
別案でcookieを使うとかWeb Storageを使うとかフォームのアクションのURLの後ろにちょこっと追加してGETでindexの情報を送るとかでもできそうです。

投稿2016/05/18 14:39

編集2016/05/18 14:42
oskbt

総合スコア1895

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

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

milkif

2016/05/18 18:42

わかりやすい説明有難うございます。修正案ですが、勉強不足でどのように書いていいかわからないので、ネットで知らべながら挑戦してみます。どうしてもわからない時にはアドバイスをお願い致します。
guest

0

change イベント

change イベントを監視すれば input[type=submit] の有効化機能を実装可能ですが、submit したらページ遷移するので ++index の結果は常に 1 になります。
(下記コードではわかりやすいように event.preventDefault() してます。)

HTML

1<script> 2'use stirct'; 3jQuery(function(jQuery) { 4 function filterfn (i, element) { 5 return element.checked; 6 } 7 8 function handleChange (event) { 9 var elements = event.target.form.elements, 10 inputs = jQuery(elements['answer[]']); 11 12 elements['submit'].disabled = inputs.filter(filterfn).length === 0; 13 } 14 15 function handleSubmit (event) { 16 event.target.elements['index'] = ++event.data.index; 17 console.log(event.data.index); 18 event.preventDefault(); 19 } 20 21 function main () { 22 var form = jQuery('#sample'), 23 data = {index: 0}; 24 25 jQuery('#submit').prop('disabled', true); 26 jQuery('input[name="answer[]"]', form).on('change', handleChange); 27 form.on('submit', data, handleSubmit); 28 } 29 30 main(); 31}); 32</script> 33 34<form id="sample" method="post" action=""> 35 <input type="hidden" name="index" value="0" /> 36 <input type="checkbox" id="check1" name="answer[]" value="1">チェック1<br> 37 <input type="checkbox" id="check2" name="answer[]" value="2">チェック2<br> 38 <input type="submit" id="submit" value="Submit"> 39 <!-- <input type="button" id="submit" value="Submit"> --> 40 </form>

更新履歴

  • 2016/05/19 00:04 input[type=checkbox] のチェックオフで input[type=submit] が無効化されるように修正
  • 2016/05/19 04:34 input[type=checkbox] のいずれかがチェックオンで input[type=submit] が活性化するように、index 値をフォームに埋め込むように修正

Re: milkif さん

投稿2016/05/18 14:32

編集2016/05/18 19:37
think49

総合スコア18156

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

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

milkif

2016/05/18 18:35

修正までしてくださり有難うございます。とても勉強になる書き方で感謝いたします。 チェックボックス両方にチェックを入れないと送信ボタンが無効化のままになってしまいました。indexの値は加算されていますが、$answer = $_POST["answer"];に値が来てくれません。Jqueryは<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> を使用しています。 他の方が回答して下さったajaxの方法も勉強して試してみます。 本当に有難うございました。
think49

2016/05/18 19:41 編集

全チェックが活性化条件だと思っていましたので一部チェックで活性化するように親記事を修正しました。 index 値は JavaScript 上の値なのでフォームで送信されません。<input type="hidden" name="index" value="0" /> で送信するようにしました。 が、何度も言いますが、初期値が0でインクリメントされるだけで、「送信される index 値は必ず1」になります。 「何の値を期待しているのか」をはっきりさせてください。 $_POST["answer"] なら既にサーバに送信されている値ですのでPHPで処理すればいいと思うのですが、何かサーバサイドでは取得できない値があるのでしょうか。
milkif

2016/05/20 07:05

活性化条件を明確にしていなくて済みませんでした。期待値は送信ボタンをクリックした時にpostでチェクボックスの値をデータベースに書き込む(ctpファイルにチェックボックスの値がpostできているか確認)と同時に別の動作として次のチェックボックスのグループを呼び出す為にindexの値を1つづつ加算させることでした。 <?php if (!empty($_POST)){ $answer = $_POST["answer"]; print_r ($answer); } ?> にチェックボックスの値が入って来なかったために再度質問させていただきました。 ajaxを使って何とか期待通りの動作ができました。回答いただいたコードはとても勉強になりました。本当に有難うございます。
guest

0

ベストアンサー

formがリクエストが発生する条件は、

1.送信系のボタンを押した時。
→type属性が、submitまたはimage
2.フォームの部品上で、ENTERをおした時。
3.JavaScriptでformをハンドリングして、submit()メソッドを呼び出した時。

となっています。
また、この際、onsubmitイベントが発生します。

<from onsubmit="return check();" ...

みたいな感じで実装できて、

<script> function check() { ... return false; } </script>

という風に関数を定義できます。
この際、例の通り、戻り値をfalseにするとリクエストが中断されます。

この基本が理解できていれば、
jQueryとPHPを使わずに実装できることがわかると思います。
一度、formの理解を深めるためにも、それで対応してみてはいかがでしょうか。

投稿2016/05/18 22:13

TetsujiMiwa

総合スコア1124

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

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

milkif

2016/05/18 22:24

回答有り難うございます。現在ajaxを調べながら調整していますが、頂いた回答もじっくり考えて、この機会にformの理解を深めて見たいと思います。有難うございます。
guest

0

基本的にWebブラウザを使ったWebアプリケーションは、サーバと通信し処理結果を得るにはページをリロードする必要があります。例えばリンクをクリックするとサーバと通信してページが遷移(リロード)されるのと同じです。

Ajaxという非同期通信の仕組みがありますので、今回の場合こちらを利用するのが手っ取り早いかと思います。
jQueryを使っているのであればAjax用のAPIもあります。使用例も大量にあるので探してみると良いです。

Ajaxを使えばページリロードを伴わないインタラクティブなページを作ったり、大きな画像を遅延ロードしてレスポンスを速めたりといった使い方も可能になります。

投稿2016/05/18 14:44

romiogaku

総合スコア546

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

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

milkif

2016/05/18 18:49

わかりやすい説明有難うございます。ajaxはとても便利そうですね。使用例も大量にあるのは心強いです。これから探して試してみます。つまずいたらまたよろしくお願いいたします。
guest

0

フォームの送信時であればclickではなく

html

1<form method="post" action="" id="hoge">

とfomrにidをつけて

javascript

1$('#hoge').submit(function(){ 2index++; 3});

を使ったほうがいいかと思います。

投稿2016/05/18 14:00

編集2016/05/18 14:01
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

milkif

2016/05/18 14:44

回答有り難うございました。早速、formにidを付与しjsファイルでこのidを呼び出してみましたが、上記と同じ現象になってしまいました。 ctpファイルのinputの書き方が悪いのでしょうか?
退会済みユーザー

退会済みユーザー

2016/05/18 21:11

すみません回答で提示したのはフォームの送信時に処理を行いたい時はclickじゃなくたsubmitを使ったほうがよいという点だけで、その上で他の方の回答にあるように処理部分も修正する必要があります。
milkif

2016/05/20 07:12

フォームの送信時に処理を行いたい時はclickじゃなくたsubmitを使ったほうがよいという事も知らなかったので助かりました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問