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

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

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

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

Q&A

解決済

3回答

5305閲覧

nameとvalueが設定された複数のサブミットボタン

lupus_dingo

総合スコア257

HTML

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

0グッド

0クリップ

投稿2015/10/03 13:25

編集2015/10/03 13:31

お世話になっております。
name属性とvalue属性が設定されたサブミットボタンをフォームに複数設置すると
クリックしたボタンのみのnameとvalueが送信されると思いますが
今までそのような実装を見たことがありません。
だいたいsubmitFunc()などのJavascriptを作成しonClick属性で指定して
そこで値をセットしてから送信しています。
サブミットボタンに直接値を設定するような使い方ってあまりしないのでしょうか?
Javascriptを作成するのもその分手間がかかりますし、
Javascript自体をOFFにされたことを考えると
buttonに直接設定する方がいいと思いますがデメリットってなんでしょうか?

<input type="text" name="name" > ←「あああ」
<button type="submit" name="a" value="1">
<button type="submit" name="b" value="2">
<button type="submit" name="c" value="3">
<button type="submit" name="c" value="4"> ←クリック
<button type="submit" name="c" value="5">

結果:
"name":"あああ"
"c":"4"
のみ送信

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

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

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

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

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

guest

回答3

0

ベストアンサー

どうやらIE7のバグが原因で使おうと思っても使えなかったというのが真相のようです。
MDN:butto要素#注記
他にもガラケーのブラウザだとうまく行かないとかもあったようです。(詳細不明)

2016/1/11でIE7のサポートが切れますし、あえてガラケー使っている人がブラウザなんて使うわけ無いので、これからはどんどん使っていくようになっていくと思いますよ。最新ブラウザの使用が前提のHTML5を使っているサイトであれば、使ってはいけない理由はないと思います。

投稿2015/10/03 21:54

編集2015/10/03 21:57
raccy

総合スコア21733

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

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

lupus_dingo

2015/10/04 12:25

回答ありがとうございます。 そんなバグがあったんですね。 本来の使い方とは違うという意見もあるので、これから使うかそれともJavascriptにするかは本人次第という感じでしょうか。
raccy

2015/10/05 09:45

いいえ、本来の使い方としてはHTML5の仕様書で規定されているものであり、まったくもって問題ありません。 http://www.w3.org/TR/html5/forms.html#the-button-element にvalueが送信されること、そして、あるボタンのvalueが送信されるのはそのボタンで送信したときだけであることが書かれています。 問題は、バグがあるIE7以下に対応するのかどうかです。IE7以下は切り捨てるのであれば、積極的に使っても問題が無い、むしろ、JavaScriptでの余計な処理が無い分、使った方がいいと思います。しかし、IE7以下も対応したサイトにどうしてもしたいのであれば、この方法は採用できないと言うことです。
lupus_dingo

2015/10/05 13:24

回答ありがとうございます。 ieは多分最新しか使われないと思うので問題ないです。 この方法でこれから進めていこうと思います。
guest

0

submitを直訳すると「提出する」で、フォームのデータを提出するためのボタンですね。
値を入れてそれを受け取り側でパラメータの1つとして使っても、機能や性能的なデメリットは特に無いと思います。でも出来るからといって本来の目的に沿わない用途で様々な部品を使うと、コードの可読性が落ち人間の方が混乱すると思います。
1~5の値の選択にはinputタグのselectかradioを別途準備するのが普通かと思います。

投稿2015/10/03 17:45

hirohiro

総合スコア2068

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

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

lupus_dingo

2015/10/04 12:19

回答ありがとうございます。 確かに本来の意味とは離れるかもしれないですね。 ただradioボタンを使った場合、結局Javascript使ってonClickで指定しないとsubmitできないと思うのですがなしでもいけるんでしょうか?
hirohiro

2015/10/04 12:44

<form ...> <input ...> <submit ...> </form> こういHTMLでsubmitがクリックされると、特にjavascriptを使わなくてもsubmitが属するformのパラメータがpostで送信されると思うのですが、そちらでは駄目なのでしょうか?
hirohiro

2015/10/04 12:52

上記の構造の場合、input text のフィールドでenterを押すと送信されてしまったり submitボタンの連続押しで2重投稿されたりする場合があるので、対応が煩わしいからsubmitは使わずに全てonclickでというのはあるかも知れませんが、とりあえず今回のケースには関係なさそうかも?
lupus_dingo

2015/10/04 23:18

回答ありがとうございます。 わかりにくくてすみません。 まず、そもそもサブミットボタンに直接パラメータを指定するような実装を見たことなかったんでjavascriptで実装するのが正しいのかなと思い質問しました。 要するに、 サブミットボタンがクリックされた時に他のサブミットボタンのname、valueは送信したくないんです。javascriptを使用すれば簡単にできますが使わずにそのようなことをする方法はあるかということを知りたいんです。
hirohiro

2015/10/05 00:29 編集

>>サブミットボタンがクリックされた時に他のサブミットボタンのname、valueは送信したくないんです。 送信されませんよ? 押したボタンのname/valueのみだったと思います。 ※そもそも、form内に複数のsubmitボタンが存在すること自体がすこし変ではあります。 <form name="aaa"> <input type="text" name="name" > ←「あああ」 <button type="submit" name="a" value="1"> <- ここくりっく <button type="submit" name="b" value="2"> </form> これだと name=a,value=1とname=name,value=あああ のみで name=b,value=2 は送信されないはず…だとおもうのですが でも普通はこんな風にすると思います <form name="aaa"> <input type="text" name="name" > ←「あああ」 <input type="radio" name="a" value="1" checked="checked"> <input type="radio" name="a" value="2"> <button type="submit" name="submit" value="送信"> <- ここくりっく </form> IE6だと全て送信されるみたいです。↓ http://www.akatsukinishisu.net/itazuragaki/html/multiple_submit_buttons.html
lupus_dingo

2015/10/05 13:17

回答ありがとうございます。 すみません。間違いました。 伝えたかったのは、フォームの中に送信したくない値があり、ラジオボタンを使ってサブミットするにはonclickでjavascriptを呼ぶ必要があると思ったからです。サブミットボタンを複数並べると直接サブミットでき、クリックしたボタンのnameとその他のinputのみ送信されます。
hirohiro

2015/10/05 13:51 編集

なるほど? 一つ前に例示した二つのうち 一つ目だと、(javascriptを使わなくても)「"a":1, "name":"あああ"」だけが送信されます。 二つ目だと、「"a":1, "name":"あああ", "submit":"送信"」だけが送信されます。 この無駄な「"submit":"送信"」を何とか省きたく、且つjavascriptは使いたくない。ということでしたら確かにsubmitをラジオボタンのように使えばできますね。 この方法だとsubmitの各選択肢は異なるnameになってしまいますが、それさえも目的であれば他の方法で対応するのは確かに難しいと思います。 あまり見ないのは、どうなんでしょう。submitボタンの値が来ては困るというケースが少ないから?もしくはそういう場合は他にも制約があってどちらにせよjavascriptで整形せざるを得ないから。とかでしょうか?
lupus_dingo

2015/10/12 04:23

回答ありがとうございます。 サブミットボタンを複数並べて送信する値を制限するのは間違いではないようなのでこれからはこの方法を使って行こうと思います。
guest

0

submitボタンに値は乗せません。
ボタン表示名を載せるのみです。

また、submitボタンは1個か0かのどちらかで、
ボタンが複数欲しい場合は、buttonを実装します。

submit以外の入力フォームで、enterキーを押下した際に画面更新をしたい場合は、
submitボタンを準備します。

enterで更新されたくない場合は、buttonを定義し、
onclickイベントで、formをサブミットします。

この際、JavaScriptオフのユーザーのことは考えません、

投稿2015/10/03 13:43

TetsujiMiwa

総合スコア1124

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

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

lupus_dingo

2015/10/04 12:14

回答ありがとうございます。 でもちょっと回答内容の意味が分からないです。 すみません。 試しましたが、submitボタンに値は乗せられました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問