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

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

ただいまの
回答率

89.99%

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

解決済

回答 5

投稿 編集

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

milkif

score 14

前提・実現したいこと

複数選択可能なチェックボックスにおいて、未チェックなら送信ボタンをクリックできないよう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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 5

+2

 change イベント

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

<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">チェック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>

 更新履歴

  • 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/19 03:35

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

    キャンセル

  • 2016/05/19 04:40 編集

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

    キャンセル

  • 2016/05/20 16:05

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

    キャンセル

+2

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/19 03:42

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

    キャンセル

checkベストアンサー

+1

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/19 07:24

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

    キャンセル

+1

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

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


とfomrにidをつけて

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


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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/18 23:44

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

    キャンセル

  • 2016/05/19 06:11

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

    キャンセル

  • 2016/05/20 16:12

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

    キャンセル

+1

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

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/05/19 03:49

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

    キャンセル

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

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