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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

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

Q&A

解決済

1回答

6290閲覧

HTMLに設置した複数のボタンから、押されたボタンに対応する値を送信したい

ringomilk

総合スコア22

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2018/07/20 02:01

編集2018/07/20 02:18

前提・実現したいこと

HTMLにボタンを3つ設置し、それぞれに異なる値を持たせる。
どれか一つが押されたときに、そのボタンに付与された値をサーバーに送信する。

該当のソースコード

<form name="form" action="<URL>" method="post"> <input type="hidden" name="test"> <input type="button" value="ボタン1" onclick="form.test.values=1;form.submit();"> <input type="button" value="ボタン2" onclick="form.test.values=2;form.submit();"> <input type="button" value="ボタン3" onclick="form.test.values=3;form.submit();"> </form>

試したこと

サーバー側では受けとった値によって処理を分岐させているのですが、
テスト実行したところ該当ページから遷移しませんでした。

上記のソースで間違っている部分がありますでしょうか。
ご指摘いただければ幸いです。
よろしくお願いいたします。

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

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

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

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

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

m.ts10806

2018/07/20 02:14

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入(エラーメッセージの場合は不要)の手順で「コードハイライト化」してください。(質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください)
m.ts10806

2018/07/20 02:15

「遷移しない」現象が再現しません。必ずactionに指定した先にpostされます。
ringomilk

2018/07/20 02:19

大変失礼いたしました。内容、更新いたしました。”「遷移しない」現象が再現しません。”というのは、上記のコードは誤りがなく、うまくいくということでしょうか。
m.ts10806

2018/07/20 02:21

2文目→ 必ずactionに指定した先にpostされます。
m.ts10806

2018/07/20 02:25

試してもらいたいこともあるので回答に書きます。
guest

回答1

0

ベストアンサー

「test」というキーで押したボタンによって別の値で送信したい
ということでしたら下記のような方法もあります。

php

1<form name="form" action="<URL>" method="post"> 2 <button type="submit" name="test" value="1">ボタン1</button> 3 <button type="submit" name="test" value="2">ボタン2</button> 4 <button type="submit" name="test" value="3">ボタン3</button> 5</form>

同じnameのsubmitボタンを用意してvalueを変える。
※ただしinputタグではなくbuttonタグ


いずれにしても提示コードでは「該当ページから遷移しません」という現象は起きませんでした。
URLが間違っていたとしてもそこに向けて送信されます。
もう少し実行環境など詳細を提示されてはいかがでしょうか。
再現しない以上は環境が何か影響している可能性はあります。
私はChrome最新で実行しています。フォーム送信はローカル実行(file:///)、ローカルサーバー実行(http://localhost)いずれも成功しました。

ただし、testは空で送信されます。入力コントロールに値を設定したい場合はvaluesではなくvalueです。

投稿2018/07/20 02:31

編集2018/07/20 02:33
m.ts10806

総合スコア80850

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

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

ringomilk

2018/07/20 02:58

ご回答ありがとうございます。 結果から申し上げますと、無事ページ遷移ができるようになりました。 原因は、受け取り側(サーバー側)の記述の不備でございました。 大変失礼いたしました。 また、回答していただいたHTMLのほうがよりシンプルで分かりやすく感じましたので、こちらに変更させていただきました。 ありがとうございました。
m.ts10806

2018/07/20 03:56

>原因は、受け取り側(サーバー側)の記述の不備でございました。 なるほど、そういうこともあるのですね。 「送信はされていたが正しく受け取るような記述ではなかった」ということでしょうか。 ひとまず、解決されたようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問