jQuery で submit の質問です。

以下参考ページ等で jQuery で submit の方法が記載されていますが、これはどんなメリットがあるのですか?
HTML で submit するのと違いはなんですか?
http://raining.bear-life.com/jquery/jquery%E3%81%A7submit%EF%BC%88%E3%82%B5%E3%83%96%E3%83%9F%E3%83%83%E3%83%88%EF%BC%89%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95

また以下のコードで、サーバーから渡された trycount を jQuery を使いプラス1カウントアップして input の hidden として渡したいのですがどのように書けばいいですか?
いろいろ検索してみますがなかなか目的にたどり着けません。
Smartyを使用していますが、デリミタを<{}>に変更しています。
よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/09/24 23:40:01
  • 終了:2013/09/28 22:04:17
id:appfb

質問者から

appfb2013/09/25 07:30:18
<!DOCTYPE html>
<html lang="ja">
<head>
	<{$content_type|smarty:nodefaults}>
	<link href="<{$root_surl}>css/master.css" rel="stylesheet" type="text/css">
	<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script>
	//---カウントアップ
	$(function(){
		var trycount = '<{$trycount}>';
		var cnt = countUp(parseInt(trycount, 10));
	});
	function countUp(val){
		return val++;
	}
	</script>
</head>

<body>
<div class="qBox">
	<p>こんにちは(´・ω・`)</p>
	<form action="<{$app_question_url}>" method="post" target="_self">
		<input type="hidden" name="xid" value="<{$xid}>">
		<input type="hidden" name="trycount" value="">
		<input type="submit" value="ボタン">
	</form>
</div>
</body>
</html>

ベストアンサー

id:a-kuma3 No.2

a-kuma3回答回数4470ベストアンサー獲得回数18442013/09/25 00:39:20

ポイント33pt

以下参考ページ等で jQuery で submit の方法が記載されていますが、これはどんなメリットがあるのですか?

そのページには、ふたつのことがごちゃ混ぜに書かれています。

  • type="submit" をクリックしなくても、form を submit する方法
  • form が submit される直前に処理を挟み込む方法

素の javascript だと、全社が form 要素の submit() メソッドを呼ぶこと。
後者が、form の onsubmit イベントを定義する方法に相当します。

前者のメリットは、type="submit" なボタンをクリックしなくても、form の submit ができること。
select タグの onchange や、もっと凝った jQuery プラグインの処理で、form を submit できます。

後者は、入力内容のバリデーションや、値の変更です。
jQuery の .submit() のドキュメントにあるサンプルで言うと、以下のようなコードで入力された値が意にそぐわなかった場合、submit をキャンセルすることができます。

$( "#target" ).submit(function( event ) {
    if (...) {
        alert("Bad Input !");
        event.preventDefault();
    }
});


また以下のコードで、サーバーから渡された trycount を jQuery を使いプラス1カウントアップして input の hidden として渡したいのですがどのように書けばいいですか?

submit のイベントを使っても良いですけど、こんな感じでいけると思います。

<script>
    $(function(){
        var trycount = '<{$trycount}>';
        var cnt = countUp(parseInt(trycount, 10));
        $("#my_form input[name='trycount']").val(cnt);  // ★ form の要素に値を設定する
    });
    function countUp(val){
        return val++;
    }
</script>

<form id="my_form" ...>
    ...
    <input type="hidden" name="trycount" value="">
    ...
</form>
他5件のコメントを見る
id:a-kuma3

なぜ関数化がいけないのか解らず仕舞いですが、疲れたので今回はこれでいいことにします。

質問にあったコードだったので、気にせずに、そのまま使ってしまいましたが、確かに期待した通りには動かないかも。

    function countUp(val){
        return ++val;   // ++ を前に置く
    }

とか、

    function countUp(val){
        val++;      // return の前にインクリメントする
        return val;
    }

というふうにしてみると、期待した通りに動くんじゃないでしょうか。

2013/09/28 18:50:14
id:appfb

只今、希望の動作を確認しました。
全く知りませんでした><
インクリメントに前後があるなんて・・・。
http://www.ajaxtower.jp/js/ope/index7.html

勉強になりました。
ありがとうございます!!

2013/09/28 19:22:05

その他の回答(2件)

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312013/09/25 00:28:49

ポイント33pt

HTML で submit するのと違いはなんですか?

 たとえば、submit 前に入力値のバリデーションなどを挟むことができます。
 

input の hidden として渡したいのですがどのように書けばいいですか?

 こういうことでしょうか。

	$(function(){
		var trycount = '<{$trycount}>';
		var cnt = countUp(parseInt(trycount, 10));
		$('input[name="trycount"]').val(cnt);
	});

id:appfb

ご回答ありがとうございます。
返事が遅くなり失礼いたしました。

> バリデーションなどを挟むことができます
よくわかりました。
ありがとうございます。

2013/09/26 11:45:13
id:a-kuma3 No.2

a-kuma3回答回数4470ベストアンサー獲得回数18442013/09/25 00:39:20ここでベストアンサー

ポイント33pt

以下参考ページ等で jQuery で submit の方法が記載されていますが、これはどんなメリットがあるのですか?

そのページには、ふたつのことがごちゃ混ぜに書かれています。

  • type="submit" をクリックしなくても、form を submit する方法
  • form が submit される直前に処理を挟み込む方法

素の javascript だと、全社が form 要素の submit() メソッドを呼ぶこと。
後者が、form の onsubmit イベントを定義する方法に相当します。

前者のメリットは、type="submit" なボタンをクリックしなくても、form の submit ができること。
select タグの onchange や、もっと凝った jQuery プラグインの処理で、form を submit できます。

後者は、入力内容のバリデーションや、値の変更です。
jQuery の .submit() のドキュメントにあるサンプルで言うと、以下のようなコードで入力された値が意にそぐわなかった場合、submit をキャンセルすることができます。

$( "#target" ).submit(function( event ) {
    if (...) {
        alert("Bad Input !");
        event.preventDefault();
    }
});


また以下のコードで、サーバーから渡された trycount を jQuery を使いプラス1カウントアップして input の hidden として渡したいのですがどのように書けばいいですか?

submit のイベントを使っても良いですけど、こんな感じでいけると思います。

<script>
    $(function(){
        var trycount = '<{$trycount}>';
        var cnt = countUp(parseInt(trycount, 10));
        $("#my_form input[name='trycount']").val(cnt);  // ★ form の要素に値を設定する
    });
    function countUp(val){
        return val++;
    }
</script>

<form id="my_form" ...>
    ...
    <input type="hidden" name="trycount" value="">
    ...
</form>
他5件のコメントを見る
id:a-kuma3

なぜ関数化がいけないのか解らず仕舞いですが、疲れたので今回はこれでいいことにします。

質問にあったコードだったので、気にせずに、そのまま使ってしまいましたが、確かに期待した通りには動かないかも。

    function countUp(val){
        return ++val;   // ++ を前に置く
    }

とか、

    function countUp(val){
        val++;      // return の前にインクリメントする
        return val;
    }

というふうにしてみると、期待した通りに動くんじゃないでしょうか。

2013/09/28 18:50:14
id:appfb

只今、希望の動作を確認しました。
全く知りませんでした><
インクリメントに前後があるなんて・・・。
http://www.ajaxtower.jp/js/ope/index7.html

勉強になりました。
ありがとうございます!!

2013/09/28 19:22:05
id:windofjuly No.3

うぃんど回答回数2625ベストアンサー獲得回数11492013/09/25 00:42:35

ポイント34pt

(1)HTML で submit するのと違いはなんですか?

HTMLフォームからの送信はhttpリクエストです。 

平たく言えば、
条件(値)に応じた結果を返せという要求(リクエスト)をサーバーに送ることで、
サーバーからの返信による画面遷移が伴います。

HTMLフォームから直接発信することをやめて、
クライアントサイドスクリプトに処理を託せば、
入力内容のチェック程度はクライアント側で済ませてしまえるので、
サーバーとの通信時間やサーバー負荷を削れます。

非同期通信を併用すれば、画面遷移を必要とせずに、
サーバーとやりとりしつつ入力内容のチェックや補てん、
結果表示なども行えたりします。


(2) jQuery を使いプラス1カウントアップして input の hidden として渡したい

submitが押されたタイミングでカウントアップ&送信であれば、
$("監視対象").submit(function(){ 処理 } の形でhttpリクエストに介入できます。
介入結果として問題なしとしてsubmitを続けさせる場合は return true; で、
送信を取りやめさせたい場合は return false; です。

$("form").submit(function(){
    $("#trycount").val(cnt);
    return true;
});

余談ですが、
formやinputなどのタグなどにもidやnameを付けて構造をはっきりさせたほうが良いですよ。
一番目のフォームとか、一番目のtrycountなどでも動かせはするのですが、
のちのちメンテナンスすることになった場合や、
他に流用しようとする場合に、何がなんだか混乱することになりますから…。

他4件のコメントを見る
id:windofjuly

>体感処理速度を大きく向上させることができます

http://semooh.jp/jquery/api/events/ready/fn/

DOMの準備が出来たタイミングで処理を実行したいと思いますが、 window.onloadでは画像などのロードが済む時点にタイミングを合わせるブラウザもあります。readyイベントを用いることで、アプリケーションの体感処理速度を大きく向上させることができます。

「DOMの準備が出来たタイミング」とは、
ブラウザがHTMLを読み取ってページの構造を理解したタイミングを言います。

window.onloadイベントは構造を理解した段階ではなく、
画像など必要なデータを寄せ集めて準備万端整ってから発生したりするため、
パソコン側で手待ちの時間ができてしまいます。
(ネットの通信速度はパソコン内部の計算速度に比べればウサギとカメですから、
画像読み込みを待ってから動き出すのはもったいないということです)

readyイベントは構造を理解した段階で発生するので、
画像の到着を待たずに平行して処理できる。すなわち速いということです。


>readyイベントを用いてはいけない場合

タイミングを合わせる必要がなければ待ち時間が無駄になるので使いません。

2013/09/27 21:17:31
id:appfb

丁寧なご回答ありがとうございます。
よくわかりました。
今後、どのタイミングで発生させたいのか?readyイベントを使い分けていきたいと思ういます。
ありがとうございました!

2013/09/28 00:54:01

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません