Q&A
補足願います。
> 注文ページにある「掛け算する」ボタンを消したい。
とありますが、
> 注文ページにある「掛け算する」ボタンを押すと「確認画面」へジャンプしてします。
> 「送信する」クリックで「確認画面」へジャンプさせたい。
ともあります。
消したボタンの動作は不要かと思うのですが、これはどちらかが間違っていますか？
実現したいこと
注文フォームを作成しています。
実現したいこと
1）注文ページから製品の注文数を取得する。
2）５つの製品注文数とは別に、各製品毎に数値を与えてその合計だけを受信フォームで受けたい。
3）各製品毎に数値を与えた合計は見せる必要がない為、非表示にする。
発生している問題・分からないこと
注文フォームでどうしてもできないこと。
1）注文ページにある「掛け算する」ボタンを消したい。
2）注文ページにある「掛け算する」ボタンを押すと「確認画面」へジャンプしてします。
「送信する」クリックで「確認画面」へジャンプさせたい。
3）「合計: ○○○」は非表示にしたい。
4）受信フォームで「合計:」を受け取りたい。
宜しくお願いいたします。
該当のソースコード
HTML 注文ページ
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 6<title>ご注文フォーム</title> 7<script> 8 function multiplyNumbers() { 9 var num1 = parseFloat(document.getElementById('num1').value*0.2); 10 var num2 = parseFloat(document.getElementById('num2').value*0.82); 11 var num3 = parseFloat(document.getElementById('num3').value*0.6); 12 var num4 = parseFloat(document.getElementById('num4').value*0.11); 13 var num5 = parseFloat(document.getElementById('num5').value*0.7); 14 var product = num1 + num2 + num3 + num4 + num5; 15 document.getElementById('result').innerHTML = '合計: ' + product; 16 } 17</script> 18</head> 19 20<body> 21<div id="body"> 22 23<form action="./postmail.cgi" method="post"> 24<input type="hidden" name="need" value="製品A 製品B 製品C 製品D 製品E"> 25<input type="hidden" name="sort" value="製品A 製品B 製品C 製品D 製品E"> 26<br><br> 27 28製品A<input type="number" id="num1" data-type="number" name="製品A" size="3" value="0">台<br> 29製品B<input type="number" id="num2" data-type="number" name="製品B" size="3" value="0">台<br> 30製品C<input type="number" id="num3" data-type="number" name="製品C" size="3" value="0">台<br> 31製品D<input type="number" id="num4" data-type="number" name="製品D" size="3" value="0">台<br> 32製品E<input type="number" id="num5" data-type="number" name="製品E" size="3" value="0">台<br> 33 34<button onclick="multiplyNumbers()">掛け算する</button> 35<p id="result"></p> 36 37 38<p class="btn"> 39 <input type="submit" value="送信する"> 40 <input type="reset" value="リセット"> 41</p> 42 43</form> 44 45</body> 46</html>
HTML エラーページ
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 6<link href="style.css" rel="stylesheet"> 7<title>ご注文フォーム : エラー</title> 8 9<script> 10 function multiplyNumbers() { 11 var num1 = parseFloat(document.getElementById('num1').value*0.2); 12 var num2 = parseFloat(document.getElementById('num2').value*0.82); 13 var num3 = parseFloat(document.getElementById('num3').value*0.6); 14 var num4 = parseFloat(document.getElementById('num4').value*0.11); 15 var num5 = parseFloat(document.getElementById('num5').value*0.7); 16 var product = num1 + num2 + num3 + num4 + num5; 17 document.getElementById('result').innerHTML = '合計: ' + product; 18 } 19</script> 20</head> 21 22<body> 23<div id="head"> 24 <div id="head-in"><h1>CONTACT - postmail</h1></div> 25</div> 26<div id="body"> 27 28<h2>お問い合わせフォーム > エラー</h2> 29<ul> 30<li class="msg">前画面に戻って正しく入力してください。</li> 31</ul> 32<div id="form-tbl"> 33<table id="form"> 34<!-- cell --> 35<tr> 36 <th>!key!</th> 37 <td>!val!</td> 38</tr> 39<!-- /cell --> 40</table> 41<p class="btn"><input type="button" value="< 前画面に戻る" onclick="history.back()"></p> 42</div> 43</div> 44</body> 45</html>
HTML 確認画面
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 6<link href="style.css" rel="stylesheet"> 7<title>ご注文フォーム : 確認画面</title> 8 9<script> 10 function multiplyNumbers() { 11 var num1 = parseFloat(document.getElementById('num1').value*0.2); 12 var num2 = parseFloat(document.getElementById('num2').value*0.82); 13 var num3 = parseFloat(document.getElementById('num3').value*0.6); 14 var num4 = parseFloat(document.getElementById('num4').value*0.11); 15 var num5 = parseFloat(document.getElementById('num5').value*0.7); 16 var product = num1 + num2 + num3 + num4 + num5; 17 document.getElementById('result').innerHTML = '合計: ' + product; 18 } 19</script> 20</head> 21 22<body> 23<div id="head"> 24 <div id="head-in"><h1>CONTACT - postmail</h1></div> 25</div> 26<div id="body"> 27<h2>お問い合わせフォーム > 確認画面</h2> 28<ul> 29<li>以下の内容でよろしければ「送信する」ボタンを押して下さい。</li> 30</ul> 31<div id="form-tbl"> 32<table id="form"> 33<!-- cell --> 34<tr> 35 <th>!key!</th> 36 <td>!val!</td> 37</tr> 38<!-- /cell --> 39</table> 40<form action="!mail_cgi!" method="post"> 41<!-- hidden --> 42<p class="btn"> 43 <input type="button" value="< 前に戻る" onclick="history.back()"> 44 <input type="submit" value="送信する >"> 45</p> 46</form> 47</div> 48</div> 49</body> 50</html>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
6日間、Googleで検索しデモページで試した結果がここまでです。
宜しくお願いいたします。
補足
CGIフォームは下記UPLの製品を購入予定です。
https://www.kent-web.com/mail/postmail.html
回答1件
0
ベストアンサー
一応サーバーサイドをPHPとしておきます
PHP
1<?PHP 2print_r($_POST); 3?> 4<script> 5document.addEventListener('formdata',e=>{ 6 const list={"A":0.2,"B":0.82,"C":0.6,"D":0.11,"E":0.7}; 7 const result=Object.entries(list).reduce((x,y)=>x+(document.querySelector(`[name="${y[0]}"]`).value??0)*y[1],0); 8 e.formData.set('result',result); 9 console.log(result); 10}); 11</script> 12<form method="post"> 13製品A<input type="number" name="A" size="3" min="0">台<br> 14製品B<input type="number" name="B" size="3" min="0">台<br> 15製品C<input type="number" name="C" size="3" min="0">台<br> 16製品D<input type="number" name="D" size="3" min="0">台<br> 17製品E<input type="number" name="E" size="3" min="0">台<br> 18<p> 19<input type="submit" value="送信する"> 20<input type="reset" value="リセット"> 21</p> 22</form>
課題
注文ページにある「掛け算する」ボタンを押すと「確認画面」へジャンプしてします。
<button>タグをformに設置するとsubmitになります。submitしたくなければ明示的にbottonを指示してください
html
1<button type="button">計算</button>
受信フォームで「合計:」を受け取りたい。
そもそもユーザーが計算したデータをサーバーサイドが「正しい値」として認識するのは間違いです。A-Eの個数を元にサーバーサイドでも再計算してください
追記
今回の解決策はPHPでないと無理でしょうか
サーバーにデータを送ったことが確認できればなんでもいいです。
PHPは素人でも一番カンタンに環境がつくれるのでおすすめですが、別にPHPが必須というわけではありません
submitしたくなければ明示的にbottonを指示してください
html
1<form> 2<button>btn</button> 3</form>
↑↑↑
これはボタンを押すと次のページにデータを送ろうとする（サブミットする）ということ
こうするとボタンが送信ボタンから単なるボタンに属性が変わります
↓↓↓
html
1<form> 2<button type="button">btn</button> 3</form>
投稿2024/08/10 08:46
編集2024/08/19 08:38
総合スコア118098
yambejp様
回答いただきまして、ありがとうございます。
今回の解決策はPHPでないと無理でしょうか。
私はCGIもあまり理解できておりませんので、PHPになると未経験です。
いただきましたPHPのタグをそのままHTMLページに貼り付けて試しましたが
「送信する」を押すとリセットと同じ状況に見えます。
この内容も↓私には理解できません。
--------------------------------------------------
<button>タグをformに設置するとsubmitになります。
submitしたくなければ明示的にbottonを指示してください
--------------------------------------------------
申し訳ございません。
分かりづらそうなので追記しておきました
yambejp様
できました！
ありがとうございます。
作成中のプログラム箇所とHTMLの箇所に、いただいたソースを入れ替えたところ送信できました。
受信フォームも問題なく確認できました。
ベストアンサーに選ばせていただきす。
あなたの回答
tips
プレビュー
