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

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

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

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

HTML

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

Q&A

解決済

2回答

1048閲覧

jQueryでコメントフォーム送信前の処理が正しく動きません

minminzemkun

総合スコア14

jQuery

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

HTML

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

0グッド

0クリップ

投稿2018/08/22 20:05

編集2018/08/24 00:53

前提・実現したいこと

jQueryでコメントフォーム送信前の処理を作っています。
送信ボタンをクリックしたら、<textarea>に@hanakoと入れてから送信したいと思っています。

発生している問題

下記のソースコードでは、<textarea>に入力してから送信ボタンをクリックしても、@hanakopが入らないという状況です。//問題の箇所が正しく動作しません。
(なぜか読み込み直後で未入力時ならば@hanakoが入ります。)

どのように書けば@hanakopが入るかご教授頂ければと思い質問させて頂きました。
宜しくお願い致します。

該当のソースコード

html

1<div id="new-reply" class="reply-form"> 2 <form id="new-post" name="new-post" method="post" action="http://example.com/thread/testpost/"> 3 <div> 4 <div class="content-wrapper"> 5 <p>返信先:<span id="replyuser">@hanako</span></p> 6 <textarea id="reply_content" class="content" name="reply_content" cols="60" rows="12" tabindex="100" placeholder="コメント"></textarea> 7 </div> 8 <div class="submit-wrapper"> 9 <button type="submit" tabindex="104" id="reply_submit" name="reply_submit" class="button submit">送信</button> 10 </div> 11 </div> 12 <input name="reply_to" id="reply_to" value="1" type="hidden"> 13 </form> 14</div>

jquery

1 $('body').on("click",'#reply_submit',function(){ 2 3 //#reply_toのvalueが0以外のときは以下の処理をしてから送信 4 var targetid = $('#reply_to').val(); 5 if (targetid !== 0){ 6 var replyuser = $('#replyuser').text(); 7 $("#reply_content").prepend(replyuser); //問題の箇所 8 $("#new-post").submit(); 9 10 //#reply_toのvalueが0のときは普通に送信 11 } else { 12 $("#new-post").submit(); 13 } 14 15});

###解決
その後ご回答を頂戴し解決いたしました。
preventDefault()を用いることと、そしてprepend()で挿入するのではなくval()を改変する。という2つの方法による次のソースコードです。

jquery

1$('body').on("click",'#reply_submit',function(e){ 2 3 //いったん処理を止める 4 e.preventDefault(); 5 6 //targetidが0以外の場合は「val()」を改変してから「submit()」する。 7 var targetid = $('#reply_to').val(); 8 if (targetid != 0){ 9 var replyuser = $('#replyuser').text(); 10 var replytext = $("#reply_content").val(); 11 $("#reply_content").val(replyuser + $("#reply_content").val()); 12 $("#new-post").submit(); 13 14 //targetidが0の場合は普通に「submit()」する。 15 } else { 16 $("#new-post").submit(); 17 } 18 19});

x_x様、mts10806様、改めましてどうもありがとうございました。

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

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

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

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

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

guest

回答2

0

ベストアンサー

submitはボタンを押された時点の情報を送信するものなので、
ボタンタイプがsubmitであれば実は後から追記したりsubmit()は意味がなかったりします。
つまり勝手に送信してしまうと同義とも言えるので、タイプはbuttonにしましょう。
それかclickイベント冒頭をevent.preventDefaultでSUBMITを止めておくとか。

投稿2018/08/22 21:50

m.ts10806

総合スコア80765

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

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

minminzemkun

2018/08/23 09:37

ありがとうございます。送信処理云々というより、「.prepend(replyuser)」が起こらないのが不思議ですね。
m.ts10806

2018/08/23 10:07

起こってないのではなく、SUBMITされるため起こっていないように見えるだけだと思います。 Promiseなど待機処理を入れない限りはどんどん実行されていくので。
minminzemkun

2018/08/23 10:31

なるほど。仰るとおりかもしれません。質問に「preventDefault追加版」を載せておいたので、よろしければご査収頂ければ幸いでございます。
minminzemkun

2018/08/23 10:31

プロの方からすると「setTimeout」はダサイでしょうか…。
m.ts10806

2018/08/23 10:37 編集

preventDefaultを入れるのでしたらreply_submitのclick時点で入れないと意味がないかと思います。 pという変数もいきなり出てきているので未定義か何かのエラー出そうです。 > プロの方からすると「setTimeout」はダサイでしょうか…。 ダサいと判断されたのがなぜかわかりませんが、必要に応じて利用するので特にダサいとは思いませんよ。
minminzemkun

2018/08/23 12:14

何度も申し訳ございません。質問文のコードを仰るように書き直してみたのですが、何かヒントを頂戴できませんでしょうか?
m.ts10806

2018/08/23 12:28

結果、想定通りに動作したのでしょうか。「うまくいかない」だけでは起きている現象がわかりませんので、動作の結果、エラーの確認などしてください。 それによって進んでいるかどうかがわかります。 ところで今更かもしれませんが、setTimeOutってなぜ入れているんでしたっけ。
minminzemkun

2018/08/23 12:35

「$("#new-post").submit();」での送信が実行される前に@hanakoを挿入したいので、挿入されるまでは送信は実行しないでほしいという意図でsetTimeOutを入れました。 しかしひょっとして、preventDefaultがあれば送信の実行はそもそも止まっているので、setTimeOutは不要かもしれませんね。混乱してきました。もう一度考え直しておきます。失礼致しました。
m.ts10806

2018/08/23 12:41

そうですね。preventDefault()を入れることでSUBMITは止まっているので、よほど重たい処理を行わない限りは大丈夫かと思います。 心配でしたら、prependのコールバックを使ってみてはいかがでしょう? http://stacktrace.jp/jquery/api/manipulation/prepend(fn).html ※未検証ですが理論上はいけそうに思います。
minminzemkun

2018/08/23 15:03

どうもありがとうございます。できました。
m.ts10806

2018/08/23 20:38

解決できたようで何よりです。 差し支えなければ最終的にどのようになったか教えていただけますか?
minminzemkun

2018/08/24 00:54

失礼致しました。質問文に解決したコードを記載させて頂きました。お世話になりました。
m.ts10806

2018/08/24 01:03

私はコードを提示したわけではないのでどのようになったのか気になって確認しました。 おおよそ想定した通りになったと思います。解決の糸口になってよかったです。
guest

0

jQuery

1$("#reply_content").val(replyuser + $("#reply_content").val());

送信しない場合に再度付与してしまうとか、スクリプト無効時に働かないとかいう問題があるので別途@hanakoを送信したほうがいいとは思います。


それにしてもいつの間に言語にjQuery選べるようになったのかな?

投稿2018/08/23 01:20

x_x

総合スコア13749

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

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

bwz61366

2018/08/23 04:51

>それにしてもいつの間に言語にjQuery選べるようになったのかな? jQueryどころか、任意の英数字をコードの言語名として使えるみたいですな
kei344

2018/08/23 04:57 編集

To: x_xさん いつからかはわかりませんが8月時点ですでに増えていたようです。(追記:すみません、リンク先リストにjQueryは無かったのでこのコメントは無視してください) 【このサイトのMarkdown記法のコードブロックで使える言語一覧(7119)|teratail】 https://teratail.com/questions/7119 > 追記: 2018-08-08
minminzemkun

2018/08/23 09:38

ありがとうございます。参考にさせて頂きます。
minminzemkun

2018/08/23 09:50 編集

すみなせん。<textarea>に入力した値はvalの値として送信されるものなんですか!?
x_x

2018/08/24 00:35

「未入力時ならば」とのことでの回答なのですが、なぜかもう解決されたようですね
minminzemkun

2018/08/24 00:56

はい。x_x様のご助言だけでなく、mts10806様のご助言もあり、今回は解決できました。改めて御礼申し上げます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問