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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

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

Q&A

解決済

3回答

5146閲覧

JavascriptからHTMLフォームの送信内容を取得したい

nuages

総合スコア40

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

HTML

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

1グッド

1クリップ

投稿2017/09/20 04:05

編集2017/09/20 04:05

HTMLフォームにテキストボックスやラジオボタン、チェックボックスなど様々なタイプの入力欄があり、Javascript + jQuery で name ごとの値を取得したいと考えています。
つまり送信ボタンを押したときの POST や GET のパラメータになる部分を Javascript で取得したいです。

テキストボックスだけであればすべての input[type="text"] の val() で取得すれば済む話ですが、ラジオボタンは prop が checked であるものを探さなければならず、チェックボックスであれば配列になるかもしれません。

すべての input や option:checked を each() で1つ1つ調べて type に応じて取得してみるつもりですが、それで正しいでしょうか? 専用の関数などや簡単なやり方は用意されていないですよね?

DrqYuto👍を押しています

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

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

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

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

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

guest

回答3

0

ベストアンサー

Kosuke_Shibuyaさんのソースを一部拝借します

formDataを使えば、有効データのみ抽出できます

javascript

1$(function () { 2 $("button").on('click', function (e) { 3 var fd=new FormData($(this).closest('form').get(0)); 4 for(item of fd) console.log(item); 5 e.preventDefault(); 6 }); 7});

HTML

1<form> 2<input type="text" name="t1" value="1" /> 3<select name="s1"> 4<option value="1">1</option> 5<option value="2">2</option> 6<option value="3">3</option> 7</select> 8<input type="checkbox" name="c1[]" value="1" /> 9<input type="checkbox" name="c1[]" value="2" /> 10<input type="checkbox" name="c1[]" value="3" /> 11<input type="radio" name="r1" value="1" /> 12<input type="radio" name="r1" value="2" /> 13<input type="radio" name="r1" value="3" /> 14<button type="button">Submit</button> 15</form> 16

投稿2017/09/20 04:49

yambejp

総合スコア114572

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

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

0

参考

serialize()
serializeArray()

サンプル

html

1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>サンプル</title> 6 </head> 7 <body> 8 <form action=""> 9 10 <p> 11 <input type="text" name="textbox" value="1" /> 12 </p> 13 14 <p> 15 <select name="select"> 16 <option value="1">1</option> 17 <option value="2">2</option> 18 <option value="3">3</option> 19 </select> 20 </p> 21 22 <p> 23 <label> 24 <input type="checkbox" name="check[]" value="1" /> 25 </label> 26 <label> 27 <input type="checkbox" name="check[]" value="2" /> 28 </label> 29 <label> 30 <input type="checkbox" name="check[]" value="3" /> 31 </label> 32 </p> 33 34 <p> 35 <button type="button"> 36 Submit 37 </button> 38 </p> 39 </form> 40 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 41 <script type="text/javascript"> 42 $(function () { 43 $("button").on('click', function () { 44 var data = $(this).parents('form').serialize(); 45 alert(data); 46 }); 47 }); 48 </script> 49 </body> 50</html>

投稿2017/09/20 04:33

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

おおむねその認識で正しいと思います。

ですが、一つアドバイスをすると、ラジオボタンはHTMLをしっかり組んでいれば value で取得できそうですね。

ピュアな JavaScript でフォーム(form)系要素の値を取得, 設定する方法一覧 - phiary

上のリンク先はjQueryを使っていても使える技のはずです。

蛇足: 今JavaScriptに関してはものすごいスピードで研磨されている言語です。もしかしたらもっと調べると、最新のブラウザでは使える便利な機能があるかもしれませんね。

投稿2017/09/20 04:22

manzyun

総合スコア2244

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問