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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

Q&A

解決済

2回答

657閲覧

複数のボタンの中からどれか一つ(or複数)を選択し、送信ボタンを押すことで、送信先のページで選択されたボタンがどのボタンなのかを確認する方法について

paras

総合スコア18

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2018/08/25 07:39

編集2018/08/25 13:51

前提・実現したいこと

私は、webページ上で簡易的な座席予約システムを作成したいと考えています。
作成にあたり、
座席に見立てたボタンの配列の中で、希望の座席(ボタン)を選択し、決定ボタンを押すことで、リンク先のページで選択された座席(ボタン)を確認できるようにしたいと考えています。

イメージとしては

・ボタンを複数並べ、そのうち一つを選択し、決定ボタンを押す
例:( □ □ □ ■ □ [決定])

・決定ボタンを押すことで、選択されたボタンを確認するページを表示する
例:( 選択したボタンは4番ですか? [確認] )

・確認ページを表示する
例:( 4番選択ありがとうございます )

という感じです。

現在、
1.ボタンを複数並べる
2.ボタン一つ一つに名前(value)をつける
3.そのボタンが選択されているかどうかがわかる(ボタンの色が変わる)

が完了している状況です。

お聞きしたいプログラムの内容としましては、上記の現在完了している1,2,3に加えて、
【ボタンが選択されている状態で[決定]ボタンを押すことで、選択されているボタンの情報(名前)がリンク先のページに表示されるようなプログラムについて】
です。

お問い合わせフォームのような指定された場所に文章を打ち込み、その内容を転送する方法は心得ております。
しかし、ボタンで行おうとするとうまくいきません。

使用しているのはhtml,php,javascriptです。
長文、並びにわかりづらい文章で申し訳ありません、お知恵をお貸しください。
よろしくお願いいたします。

発生している問題

選択されたボタンを判別し、そのデータを送信する方法、次のページで受け取る方法がわかりません。 よろしくお願いいたします。

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

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

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

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

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

m.ts10806

2018/08/25 09:23

タイトルはもう少し要件に寄せてください。この質問内容であればそれに近いことを聞いている質問が幾つかありますよ。例えば「一覧ページの削除ボタンを押した時にどのレコードのボタンを押したか取得する」とか。探せば結構出てくるので、まずは探してみてください。既に指摘が入っている通り丸投げです。
paras

2018/08/25 10:31

わざわざご指摘ありがとうございます。いただいたご指摘を参考に質問内容を編集いたします。また、過去の投稿も見直してみます。
kei344

2018/08/26 09:53

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
yukihisa

2018/08/27 01:14 編集

実際にやりたい仕様を考えると「複数座席も」という感じなのでチェックボックスでの実装の方が向いているように感じます。
guest

回答2

0

ベストアンサー

ラジオボタンで処理すればよいのでは?
たとえばこう

HTML

1<input type="radio" name="r" id="r1" value="1"><input type="button" value="1" onclick="document.querySelector('#r1').checked=true"></label> 2<input type="radio" name="r" id="r2" value="2"><input type="button" value="2" onclick="document.querySelector('#r2').checked=true"></label> 3<input type="radio" name="r" id="r3" value="3"><input type="button" value="3" onclick="document.querySelector('#r3').checked=true"></label> 4<input type="radio" name="r" id="r4" value="4"><input type="button" value="4" onclick="document.querySelector('#r4').checked=true"></label> 5<input type="radio" name="r" id="r5" value="5"><input type="button" value="5" onclick="document.querySelector('#r5').checked=true"></label>

チェックボックスバージョン

html

1<input type="checkbox" name="c" id="c1" value="1"><input type="button" value="1" onclick="document.querySelector('#c1').checked=!document.querySelector('#c1').checked"> 2<input type="checkbox" name="c" id="c2" value="2"><input type="button" value="2" onclick="document.querySelector('#c2').checked=!document.querySelector('#c2').checked"> 3<input type="checkbox" name="c" id="c3" value="3"><input type="button" value="3" onclick="document.querySelector('#c3').checked=!document.querySelector('#c3').checked"> 4<input type="checkbox" name="c" id="c4" value="4"><input type="button" value="4" onclick="document.querySelector('#c4').checked=!document.querySelector('#c4').checked"> 5<input type="checkbox" name="c" id="c5" value="5"><input type="button" value="5" onclick="document.querySelector('#c5').checked=!document.querySelector('#c5').checked">

※不要なjavascriptの表記があったので削除しました

フルバージョン

CSS

1[name="c[]"]{display:none;} 2[name="c[]"]:checked + .cx{background-Color:red;}

javacript

1window.addEventListener('DOMContentLoaded', function(e){ 2 document.querySelector('#f1').addEventListener('submit',function(e){ 3 var c=[].map.call(document.querySelectorAll('[name="c[]"]:checked'),function(x){ 4 return x.value; 5 }).join(","); 6 if(c===""){ 7 alert("not checked"); 8 e.preventDefault(); 9 }else{ 10 if(!confirm(c+" checked. OK?")){ 11 e.preventDefault(); 12 } 13 } 14 }); 15 [].forEach.call(document.querySelectorAll('.cx'),function(x){ 16 x.addEventListener('click',function(e){ 17 var t=e.target; 18 var n=document.querySelector('#c'+t.value); 19 n.checked=!n.checked; 20 }); 21 }); 22});

PHP

1 2<?PHP 3$c=filter_input(INPUT_GET,"c",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY); 4if(!is_null($c)){ 5 print "checked:".implode(",",$c)."<br>"; 6} 7?> 8<form method="get" id="f1"> 9<input type="checkbox" name="c[]" id="c1" value="1"><input type="button" value="1" class="cx"> 10<input type="checkbox" name="c[]" id="c2" value="2"><input type="button" value="2" class="cx"> 11<input type="checkbox" name="c[]" id="c3" value="3"><input type="button" value="3" class="cx"> 12<input type="checkbox" name="c[]" id="c4" value="4"><input type="button" value="4" class="cx"> 13<input type="checkbox" name="c[]" id="c5" value="5"><input type="button" value="5" class="cx"><br> 14<input type="submit" value="go"> 15</form>

投稿2018/08/27 01:09

編集2018/08/27 02:34
yambejp

総合スコア114505

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

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

yukihisa

2018/08/27 01:15

(or複数)とのことなのでチェックボックスのほうがよさそうですね。
yambejp

2018/08/27 01:24 編集

あ、ほんとだ、チェックボックスがいいですね 追記しておきました
yukihisa

2018/08/27 02:07

質問者様がやりたい仕様をエスパーすると、チェックボックスのデザインが嫌でボタンにした・・・ような可能性があるので、これに+「チェックボックスを画像(cssデザイン可)で表示する」が必要かもですねー
yambejp

2018/08/27 02:35

一連の流れを踏まえたフルバージョンを上げときました
paras

2018/08/27 13:18 編集

yambejpさん、わざわざありがとうございます!すごく良いです! 理想以上でした!本当にありがとうございます! yukihisaさんもエスパーありがとうございます。言葉足らずで申し訳ありません。 そうですね、できればチェックボックス消してボタンだけにしたいですね。
paras

2018/08/27 13:19

また、 <?PHP $c=filter_input(INPUT_GET,"c",FILTER_DEFAULT,FILTER_REQUIRE_ARRAY); if(!is_null($c)){ print "checked:".implode(",",$c)."<br>"; } ?> で表示された値(例:checked,1,2)を別のページに送信する方法をおたずねしてもよろしいでしょうか? よろしくお願いいたします。
yambejp

2018/08/27 13:26

> 別のページに送信する方法 例では自分自信に送信していますが 単純にformのactionに好きなページ(確認ページ?)を 指定すればよいのでは? さらに確認ページから登録ページにデータを引き継ぎながら移るには セッションを利用するとよいでしょう
paras

2018/08/27 13:40

ありがとうございます! 別ページに確認画面を表示することができました! ちなみになのですが、チェックボックスを使用しないとこのプログラムは作成できないのでしょうか? おそらく、すでに回答なされているかもしれませんが、現在私は、チェックボックスを消すことができずにいます。 ご回答のほど何卒よろしくお願いいたします。
yambejp

2018/08/27 13:43 編集

> チェックボックスを消すことができずにいます。 CSSを提示してありますが消えませんか? (CSSの使い方がわからない?もしくは指定しているけど反映されない?) 具体的には <style> [name="c[]"]{display:none;} [name="c[]"]:checked + .cx{background-Color:red;} </style> (ちゃんとやるならもう少し細かく書く必要がある) とか、linkタグで外部化するとか
paras

2018/08/27 13:57

何度も何度もすみません、そしてありがとうございます。 無事にチェックボックスを消すことができました。 自分がcssのことをしっかりと理解していなかったようです。 本当にありがとうございます。
guest

0

過去に私が回答した中からあくまでひとつのやり方としてヒントを。
同nameで別valueのsubmitボタンを同form内に設置してそのボタンを押して送信すると、受け取り先のphp側では押したボタンのvalueが取得できます。

投稿2018/08/25 23:05

m.ts10806

総合スコア80731

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問