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

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

ただいまの
回答率

90.50%

  • PHP

    24082questions

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

  • JavaScript

    20440questions

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

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

受付中

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 3,245

yoyoyoyogi

score 20

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>

コード

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

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



教えて頂けるとありがたいです、よろしくお願いします。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

0

料金計算を PHP 任せにするなら XMLHttpRequest で ./calc-charge.php?price_order_total=10000 をリクエストして計算結果を得る方法になると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>Ajax</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
  $("#r2").on("click",function()
  {
    var js_price = Number($(".yen").val());
    var sendurl  = './payplan.php?price='+js_price;
    $.ajax({
      type    : "GET",
      url     : sendurl,
      cache   : false
    }).done(function(data, status, xhr)
    {
      $(".price").text(data);
    }).fail(function(data)
    {
      alert('error!!!');
    });
  });
});
</script>
<style type="text/css">
.yen {
  padding:6px;
  font-size:12px;
  text-align: right;
}
</style>
</head>
<body>
<div>
  <p>AjaxでPHP処理後取得<p>
  <p>クロスドメイン等のセキュリティ対策が必須になってくる<p>
  <p><input type="text" class="yen" />&nbsp;円</p>
  <label for="r1">
    <input id="r1" type="radio" name="pay" value="銀行振込" checked="checked" />銀行振込
  </label>
  <label for="r2">
    <input id="r2" type="radio" name="pay" value="0" />代引き:<span class="price">0</span>円
  </label>
</div>
</body>
</html>

<?php
$price   = ( isset($_GET['price']) ) ? $_GET['price']: 0;
$daibiki = 0;
if( 0 < $price && $price <= 10000 )
{
  $daibiki = 324;
}
elseif( 0 < $price && $price <= 30000 )
{
  $daibiki = 432;
}
elseif( 0 < $price && $price <= 100000 )
{
  $daibiki = 648;
}
else
{
  $daibiki = 0;
}
echo $daibiki;

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

<?php
$price_order_total = $_SESSION['price_order_total'];    //一応ローカル変数にしとこうかな…
$daibiki = 0;
if($price_order_total <= 10000 ) {
    $daibiki = 324 ;
} elseif ( $price_order_total <= 30000 ) {
    $daibiki = 432 ;
} elseif ( $price_order_total <= 100000 ) {
    $daibiki = 648;
}
?>
<!doctype html>
<html lang="ja">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $("[name='お支払い方法']").change( function() {
        var price = parseInt($("#計算用合計").val());
        var daibiki = 0;
        if ($(this).get(0) == $("#代引き支払い").get(0)) {
          daibiki = parseInt($(this).val());
          price += parseInt($(this).val());
        }
        $("#代引き表示").text(daibiki);
        $("#合計金額表示").text(price);
      });
    });
  </script>
</head>
<body>
  <form>
    <label><input type="radio" name="お支払い方法"  value="銀行振込">銀行振込</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>
  
  <div>
    <p>商品金額:○○円</p>
    <p>送料:○○円 </p>
    <p>代引き手数料:<span id="代引き表示">0</span>円</p>
    <p>合計金額:<span id="合計金額表示"><?php echo $price_order_total; ?></span>円</p>
  </div>
</body>
</html>

代引き手数料:○○円 // ここをラジオボタンをクリックしたら表示させたい 
これが0円から$daibiki円なのか、代引き手数料という領域すべてなのかにもよりますが。
(というか、jqueryの記述で回答になっているのでしょうか。)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/03 14:03

    回答ありがとうございました。
    色々手間取ってしまい、コメントが遅くなって申し訳ありません。

    教えて頂いたコードで期待通りの表示ができました、有りがとうございます。

    ただ、やはりjavascriptの理解が足りないので、submitしたりして別ページに値を渡すのが困難でした。

    できれば、javascriptで取得した値をphpへ渡してphpで値を管理する方式を取りたいです,、恐らく非効率なのだとは思うのですが、今の私の知識だと一番良い気がしています。

    phpで代引き金額を決めて表示してますので、
    ラジオボタンをクリックでjavascriptで値を取得&htmlへ表示しますよね。

    それをsubmit時にphpの変数へ入れる事は出来ないでしょうか。
    イメージとしてましては

    $daibiki = var daibiki

    みたいな感じでやれると大変わかり易いのです。

    または、私のレベルからすると目からうろこ的な、「それだったらこういうやり方だよ」みたいなやり方はありますでしょうか?

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

    キャンセル

  • 2015/09/03 15:06 編集

    別ページに値を渡すのは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の取り扱いについては、いろいろ調べてみてください。

    #コメントはフォーマット効かないのですね…失礼しました。

    キャンセル

0

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • PHP

    24082questions

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

  • JavaScript

    20440questions

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