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

Question

###前提・実現したいこと
複数選択可能なチェックボックスにおいて、未チェックなら送信ボタンをクリックできないよう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">チェック１<br> <input type="checkbox" id="check2" name="answer[]" value="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

Answer 1

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

Comments

[milkif]

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

Answer 2

change イベント

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

• input[type=checkbox] のチェックオンで input[type=submit] を有効化 - JSFiddle

<script>
'use stirct';
jQuery(function(jQuery) {
  function filterfn (i, element) {
    return element.checked;
  }

  function handleChange (event) {
    var elements = event.target.form.elements,
        inputs = jQuery(elements['answer[]']);

    elements['submit'].disabled = inputs.filter(filterfn).length === 0;
  }

  function handleSubmit (event) {
    event.target.elements['index'] = ++event.data.index;
    console.log(event.data.index);
    event.preventDefault();
  }

  function main () {
    var form = jQuery('#sample'),
        data = {index: 0};

    jQuery('#submit').prop('disabled', true);
    jQuery('input[name="answer[]"]', form).on('change', handleChange);
    form.on('submit', data, handleSubmit);
  }

  main();
});
</script>

<form id="sample" method="post" action="">
  <input type="hidden" name="index" value="0" />
  <input type="checkbox" id="check1" name="answer[]" value="1">チェック１<br>
  <input type="checkbox" id="check2" name="answer[]" value="2">チェック２<br>
    <input type="submit" id="submit" value="Submit">
    <!-- <input type="button" id="submit" value="Submit"> -->
 </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 さん

Comments

[milkif]

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

[think49]

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

[milkif]

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

Answer 3

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の理解を深めるためにも、それで対応してみてはいかがでしょうか。

Comments

[milkif]

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

Answer 4

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

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

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

Comments

[milkif]

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

Answer 5

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

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

とfomrにidをつけて

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

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

Comments

[milkif]

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

[退会済みユーザー]

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

[milkif]

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