人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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を使用していますが、デリミタを<{}>に変更しています。
よろしくお願いします。


●質問者: appfb
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

質問者から
<!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>

1 ● Lhankor_Mhy
●33ポイント

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

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

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

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

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


appfbさんのコメント
ご回答ありがとうございます。 返事が遅くなり失礼いたしました。 > バリデーションなどを挟むことができます よくわかりました。 ありがとうございます。

2 ● a-kuma3
●33ポイント ベストアンサー

以下参考ページ等で jQuery で 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>

a-kuma3さんのコメント
おっと、被っちゃったか。 こういうふうに書く人が多いです、と思っていただけたら... (^^;

appfbさんのコメント
いつもご回答ありがとうございます。 返信が遅くなり失礼しました。 示したページを細かく解説いただいてとてもイメージしやすいです。 ありがとうございました。 > こういうふうに書く人が多いです、と思っていただけたら... (^^; 了解しました。 しかし、教えていただいたコードとリファレンスや他の参考ページを、懸命に見比べトライしますがなかなか動きません。 JavaScript含むjQueryは全く初めてなので、何が悪いのか?的が絞れずにいます。 htmlが読まれたタイミングで動くのですよね? 問題解決にはまだまだ時間がかかりそうなので、お礼の返信をまず先に。 しかし、まず答えがあるので暗中模索と違いとても心強いです。 ありがとうございます。

a-kuma3さんのコメント
>> htmlが読まれたタイミングで動くのですよね? << そうです。 >|javascript| $(function() { /* ここに書かれたコードが、ページの読み込みが終わった後に動きます。 */ }); ||< どんな環境(というか、ブラウザ)で試しているでしょう? 最近のブラウザは、デバッグの環境も充実しているので、それを利用した方が良いと思います。 ブレークポイントを仕掛けて、実行を止めて、一行ずつ実行してみる。 エラーが出たときにも、コンソールに何か出力されているはず。 もし、デバッガに慣れていなくても、コンソールに何かを出力しながら、どこまでは実行されている、というのを確認するだけでも、随分違うと思います。 >|javascript| $(function(){ var trycount = '<{$trycount}>'; console.log("trycount=" + trycount); // ★ var cnt = countUp(parseInt(trycount, 10)); console.log("countUp : " + cnt); // ★ // 分解してみる // $("#my_form input[name='trycount']").val(cnt); var inp = $("#my_form input[name='trycount']"); console.log("input : " + inp); // ★ inp.val(cnt); console.log("val() called"); // ★ }); function countUp(val){ return val++; } ||<

appfbさんのコメント
返信ありがとうございます。 ブラウザはie10です。 F12開発ツールの存在を忘れておりました。 教えていただいたことを、早速試してみます。 ありがとうございます!

appfbさんのコメント
こんばんは。 結局 countUp 関数がいけないみたいです。 なぜかは解りませんorz >|javascript| function countUp(val){ return val++; } ||< を通さず >|javascript| $(function(){ var trycount = '<{$trycount}>'; var cnt = parseInt(trycount, 10); cnt++; $("#my_form input[name='trycount']").val(cnt); }); ||< とすると正常にカウントアップします。 なぜ関数化がいけないのか解らず仕舞いですが、疲れたので今回はこれでいいことにします。 console.log() の使い方を教えていただきありがとうございました(*^^)v

a-kuma3さんのコメント
>> なぜ関数化がいけないのか解らず仕舞いですが、疲れたので今回はこれでいいことにします。 << 質問にあったコードだったので、気にせずに、そのまま使ってしまいましたが、確かに期待した通りには動かないかも。 >|javascript| function countUp(val){ return ++val; // ++ を前に置く } ||< とか、 >|javascript| function countUp(val){ val++; // return の前にインクリメントする return val; } ||< というふうにしてみると、期待した通りに動くんじゃないでしょうか。

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

3 ● うぃんど
●34ポイント

(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などでも動かせはするのですが、
のちのちメンテナンスすることになった場合や、
他に流用しようとする場合に、何がなんだか混乱することになりますから…。


うぃんどさんのコメント
被りその2…

appfbさんのコメント
いつもご回答ありがとうございます。 返信が遅くなり失礼しました。 Lhankor_Mhyさまとa-kuma3さまの教えていただいた回答をまず試していました。 > 入力内容のチェック程度はクライアント側で済ませてしまえるので、サーバーとの通信時間やサーバー負荷を削れます。 よくわかりました。 > 非同期通信を併用すれば、画面遷移を必要とせず・・・ Ajaxとかいうやつですか? まさに次には取り掛かりたいところなのですが、jQueryの理解が全然進まずにいますorz > submitが押されたタイミングでカウントアップ&送信であれば・・・ 今回はhtmlが読み込まれたタイミングで計算しようと思っているのですが、教えていただいたコードの理屈は理解できるつもりでいます。 試す前になってしまいましたが、まずお礼を先に申しあげます。 > formやinputなどのタグなどにもidやnameを付けて構造をはっきりさせたほうが良いですよ。 了解しました。 早速、各タグにidを付けていきます。

うぃんどさんのコメント
>htmlが読み込まれたタイミング htmlを完全に読み込む前にスクリプトが動いてしまうこともあったりするので、 ready状態になってから起動するようにしたほうが良いかもしれません。 >|javascript| × $(function(){ ◎ $(document).ready(function(){ ||< http://semooh.jp/jquery/api/events/ready/fn/

appfbさんのコメント
新たな提案ありがとうございます。 ご指導いただいている側から質問するのは恐縮なのですが、頭にはてなマークが飛び交っていますのでお手隙でしたらお付き合いください( ;∀;) 教えていただいたページには以下のような文章があります。 > readyイベントを用いることで、アプリケーションの体感処理速度を大きく向上させることができます。 そうであるならば、皆readyイベントを用いればいいと思うのですが、そうでないサンプルがいくつもあるのはどうしてなのでしょう? readyイベントを用いてはいけない場合などあるのでしょうか?

うぃんどさんのコメント
>体感処理速度を大きく向上させることができます http://semooh.jp/jquery/api/events/ready/fn/ >> DOMの準備が出来たタイミングで処理を実行したいと思いますが、 window.onloadでは画像などのロードが済む時点にタイミングを合わせるブラウザもあります。readyイベントを用いることで、アプリケーションの体感処理速度を大きく向上させることができます。 << 「DOMの準備が出来たタイミング」とは、 ブラウザがHTMLを読み取ってページの構造を理解したタイミングを言います。 window.onloadイベントは構造を理解した段階ではなく、 画像など必要なデータを寄せ集めて準備万端整ってから発生したりするため、 パソコン側で手待ちの時間ができてしまいます。 (ネットの通信速度はパソコン内部の計算速度に比べればウサギとカメですから、 画像読み込みを待ってから動き出すのはもったいないということです) readyイベントは構造を理解した段階で発生するので、 画像の到着を待たずに平行して処理できる。すなわち速いということです。 >readyイベントを用いてはいけない場合 タイミングを合わせる必要がなければ待ち時間が無駄になるので使いません。

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ