form のラジオボタンで選択しただけで値を画面上の違う箇所へ渡したい

php初心者でjavascriptはもっと初心者なのですが、
やはりformでサブミットせずに値を渡すとなるとjavascriptなのでしょうか。

そこで色々試したのですがphpとの連携もよくわからず途方にくれております。

やりたいのは「支払い方法の選択」をラジオボタンで選択すると金額の値を価格欄に渡して、合計金額も計算させるというよくある注文フォームです。

代引き手数料が金額により変わる為、
代引きが入る前の合計金額を前ページから受け取り、注文フォームページでphpのif文で代引き手数用を計算してます

if($_SESSION['price_order_total'] <= 10000 ) {
	$daibiki = 324 ;
} elseif ( $_SESSION['price_order_total'] <= 30000 ) {
	$daibiki = 432 ;
} elseif ( $_SESSION['price_order_total'] <= 100000 ) {
	$daibiki = 648;
}
コード

それで金額も含めて表示したラジオボタンで選択させまして、


<label><input type="radio" name="お支払い方法"  value="銀行振込" />銀行振込</label>
<label><input type="radio" name="お支払い方法"  value="<?php echo $daibiki ;?>" />代引き：<?php echo $daibiki;?>円 </label>

コード

そこで代引きが選択されたら、それだけで同ページの金額欄で反映させたいのです。

商品金額：○○円
送料：○○円
代引き手数料：○○円 // ここをラジオボタンをクリックしたら表示させたい
合計金額：○○円

教えて頂けるとありがたいです、よろしくお願いします。

行動規範の内容に同意します

回答4件

お望みの回答と異なると思いますが、簡単なのは

商品金額：○○円

送料：○○円
代引き手数料：○○円 // ここをラジオボタンをクリックしたら表示させたい
合計金額：○○円
の部分でフォームを支払方法の数だけ生成するようにして

[代引きでのお支払い]
商品金額：○○円
送料：○○円
代引き手数料：○○円 // ここをラジオボタンをクリックしたら表示させたい
合計金額：○○円
<<代引きで支払うボタン>>

[銀行振り込みでのお支払]
商品金額：○○円
送料：○○円
合計金額：○○円
*銀行振り込み手数料はご負担ください
<<銀行振り込みで支払うボタン>>

という感じにするのが間違いが無いかと思います。

金額に関わるところは何よりも間違いが無いことが重要ですので、
ご自身が完全に理解できる方法で実装されることをお勧めします。

投稿2015/08/28 06:50

tanat

総合スコア18713

計算をPHPでしているなら、こういうことですかね？

PHP
1<?php
2$price_order_total = $_SESSION['price_order_total'];    //一応ローカル変数にしとこうかな…
3$daibiki = 0;
4if($price_order_total <= 10000 ) {
5    $daibiki = 324 ;
6} elseif ( $price_order_total <= 30000 ) {
7    $daibiki = 432 ;
8} elseif ( $price_order_total <= 100000 ) {
9    $daibiki = 648;
10}
11?>
12<!doctype html>
13<html lang="ja">
14<head>
15  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
16  <script type="text/javascript">
17    $(function() {
18      $("[name='お支払い方法']").change( function() {
19        var price = parseInt($("#計算用合計").val());
20        var daibiki = 0;
21        if ($(this).get(0) == $("#代引き支払い").get(0)) {
22          daibiki = parseInt($(this).val());
23		  price += parseInt($(this).val());
24		}
25        $("#代引き表示").text(daibiki);
26		$("#合計金額表示").text(price);
27      });
28    });
29  </script>
30</head>
31<body>
32  <form>
33    <label><input type="radio" name="お支払い方法"  value="銀行振込">銀行振込</label>
34    <label><input type="radio" name="お支払い方法" id="代引き支払い" value="<?php echo $daibiki ;?>">代引き：<?php echo $daibiki;?>円 </label>
35    <input type="hidden" id="計算用合計" value="<?php echo $price_order_total; ?>">
36  </form>
37  
38  <div>
39    <p>商品金額：○○円</p>
40    <p>送料：○○円 </p>
41    <p>代引き手数料：<span id="代引き表示">0</span>円</p>
42    <p>合計金額：<span id="合計金額表示"><?php echo $price_order_total; ?></span>円</p>
43  </div>
44</body>
45</html>

代引き手数料：○○円 // ここをラジオボタンをクリックしたら表示させたい

これが0円から$daibiki円なのか、代引き手数料という領域すべてなのかにもよりますが。
（というか、jqueryの記述で回答になっているのでしょうか。）

投稿2015/08/28 05:53

編集2015/08/28 06:04

r_ym

総合スコア79

yoyoyoyogi

2015/09/03 05:03

回答ありがとうございました。色々手間取ってしまい、コメントが遅くなって申し訳ありません。教えて頂いたコードで期待通りの表示ができました、有りがとうございます。ただ、やはりjavascriptの理解が足りないので、submitしたりして別ページに値を渡すのが困難でした。できれば、javascriptで取得した値をphpへ渡してphpで値を管理する方式を取りたいです,、恐らく非効率なのだとは思うのですが、今の私の知識だと一番良い気がしています。 phpで代引き金額を決めて表示してますので、ラジオボタンをクリックでjavascriptで値を取得＆htmlへ表示しますよね。それをsubmit時にphpの変数へ入れる事は出来ないでしょうか。イメージとしてましては $daibiki = var daibiki みたいな感じでやれると大変わかり易いのです。または、私のレベルからすると目からうろこ的な、「それだったらこういうやり方だよ」みたいなやり方はありますでしょうか？教えて頂けると大変ありがたいです。よろしくお願いします。

r_ym

2015/09/03 06:08 編集

別ページに値を渡すのはHTMLの役割ですかね。受け取るのはPHPです。 submitするということは、POSTするということとして、formに少し設定をします。 ```PHP <form method="post" action="submitして値を渡したいページのURL"> <label><input type="radio" name="お支払い方法" value="0">銀行振込</label> <label><input type="radio" name="お支払い方法" id="代引き支払い" value="<?php echo $daibiki ;?>">代引き：<?php echo $daibiki;?>円 </label> <input type="hidden" id="計算用合計" value="<?php echo $price_order_total; ?>"> </form> ``` 銀行振り込みの方のラジオのvalueを0にしてやって、どちらのラジオが選択されても、お支払方法の値は数字が返ってくるようにしてやります。あとはPHPでPOSTされたお支払い方法を取得してやれば、金額が取れるのではないでしょうか。 ```PHP <?php //submitして値を渡したいページ $price_order_total = $_SESSION['price_order_total']; /* お支払方法が銀行振り込みの場合、value="0"なので、0。お支払方法が代引きの場合、value="<?php echo $daibiki ;?>"なので、$daibikiが入ります。*/ $daibiki = $_POST["お支払方法"]; $total = $price_order_total + $daibiki; ?> ``` $_POSTの取り扱いについては、いろいろ調べてみてください。 #コメントはフォーマット効かないのですね…失礼しました。

行動規範の内容に同意します

下記で参考になればと思います。

html
1<!DOCTYPE>
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
3<head>
4<title>Ajax</title>
5<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
6<script type="text/javascript">
7$(function()
8{
9  $("#r2").on("click",function()
10  {
11    var js_price = Number($(".yen").val());
12    var sendurl  = './payplan.php?price='+js_price;
13    $.ajax({
14      type    : "GET",
15      url     : sendurl,
16      cache   : false
17    }).done(function(data, status, xhr)
18    {
19      $(".price").text(data);
20    }).fail(function(data)
21    {
22      alert('error!!!');
23    });
24  });
25});
26</script>
27<style type="text/css">
28.yen {
29  padding:6px;
30  font-size:12px;
31  text-align: right;
32}
33</style>
34</head>
35<body>
36<div>
37  <p>AjaxでPHP処理後取得<p>
38  <p>クロスドメイン等のセキュリティ対策が必須になってくる<p>
39  <p><input type="text" class="yen" />&nbsp;円</p>
40  <label for="r1">
41    <input id="r1" type="radio" name="pay" value="銀行振込" checked="checked" />銀行振込
42  </label>
43  <label for="r2">
44    <input id="r2" type="radio" name="pay" value="0" />代引き：<span class="price">0</span>円
45  </label>
46</div>
47</body>
48</html>

php
1<?php
2$price   = ( isset($_GET['price']) ) ? $_GET['price']: 0;
3$daibiki = 0;
4if( 0 < $price && $price <= 10000 )
5{
6  $daibiki = 324;
7}
8elseif( 0 < $price && $price <= 30000 )
9{
10  $daibiki = 432;
11}
12elseif( 0 < $price && $price <= 100000 )
13{
14  $daibiki = 648;
15}
16else
17{
18  $daibiki = 0;
19}
20echo $daibiki;