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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

Q&A

解決済

1回答

485閲覧

jqueryからのpost形式での送信

GoGobuchiking

総合スコア33

PHP

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

0グッド

0クリップ

投稿2019/03/09 15:12

計算機的なものを作っておりますが、jquery側で定義した変数$selectedを<?php /略/ ?>で計算処理させたいのですがうまく行きません。何かいい方法はありますでしょうか?

PHP

1<?php 2 3require_once(__DIR__ . '/functions.php'); 4 5$text1 =''; 6$text2=''; 7 8if ($_SERVER['REQUEST_METHOD'] === 'POST'){ 9 $text1 = $_POST['text1']; 10 $text2 = $_POST['text2']; 11} 12switch ($selected){ 13 case "plus"; 14 $result = $text1 + $text2; 15 break; 16 case "mainasu"; 17 $result = $text1 - $text2; 18 break; 19 case "kakeru"; 20 $result = $text1 * $text2; 21 break; 22 case "waru"; 23 $result = $text1 / $text2; 24 break; 25} 26 ?> 27 28<!DOCTYPE html> 29<html lang = "ja"> 30<head> 31 <meta charset = "utf-8"> 32 <title>calculator</title> 33 <link rel="stylesheet" href="styles.css"> 34</head> 35<body> 36<div id ="container"> 37 <h1>計算</h1> 38 <form action="" method="POST"> 39 <div id="container-1"> 40 <input type="text" id="text1" name="text1" placeholder="text1" value="<?= h($text1); ?>" onKeyup="this.value=this.value.replace(/[^0-9]+/,'')"> 41 <ul> 42 <li data-id="plus" class="btn">+</li> 43 <li data-id="mainasu" class="btn"></li> 44 <li data-id="kakeru" class="btn">×</li> 45 <li data-id="waru" class="btn">÷</li> 46 <input type="hidden" id="answer" name="answer" value=""> 47 </ul> 48 <input type="text" id="text2" name="text2" placeholder="text2" value="<?= h($text2); ?>" onKeyup="this.value=this.value.replace(/[^0-9]+/,'')"> 49 </div> 50 <div id="result">result</div> 51 <div id="cal_result"><?= h($result); ?></div> 52</form> 53</div> 54<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 55<script> 56$(function(){ 57 'use strict'; 58 var $selected; 59 $('.btn').on('click', function(){ 60 $('.btn').removeClass('selected'); 61 $(this).addClass('selected'); 62 63 $selected = $('#answer').val($(this).data('id')); 64 console.log($selected); 65 66 }); 67 $('#result').on('click', function(){ 68 if ($('#text1').val() === '' || $('#text2').val() === ''){ 69 alert('Choose One!'); 70 } else { 71 $('form').submit(); 72 } 73 }); 74}); 75</script> 76</body> 77</html>

css

1body { 2 font-size: 16px; 3 font-family: Arial, sans-serif; 4} 5 6#container { 7 text-align: center; 8 width: 500px; 9 margin: 15px auto; 10} 11h1{ 12 font-size: 20px; 13 line-height:50px; 14 padding: 10px; 15} 16h1 ,ul > li { 17 border: 1px solid #ddd; 18 border-radius: 5px; 19} 20#container-1{ 21 display: flex; 22} 23ul{ 24margin:auto; 25 list-style: none; 26 padding: 0; 27} 28li{ 29 width:20px; 30 margin: auto; 31 cursor: pointer; 32} 33#text1{ 34 height: 10px; 35 margin-top: 25px; 36} 37#text2{ 38 height: 10px; 39 margin-top: 25px; 40} 41#result{ 42 margin-top: 0px; 43 float:right; 44 cursor: pointer; 45 box-shadow: 0 4px 0 #0088cc; 46 border-radius: 5px; 47 background: #00aaff; 48 width: 100px; 49 color: #fff; 50} 51#cal_result{ 52 float:right; 53 margin-top: 30px; 54} 55.btn{ 56 opacity: 0.5; 57 font-weight: bold; 58} 59.btn + .btn{ 60 margin-top: 5px; 61} 62.selected{ 63 opacity: 1.0; 64} 65

php

1<?php 2 3function h($s){ 4 return htmlspecialchars($s, ENT_QUOTES, 'UTF-8'); 5} 6

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

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

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

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

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

guest

回答1

0

ベストアンサー

jQuery、というかJavaScriptの変数の頭に$をつけたからって、あくまで変数に使える文字列のひとつでしかないので、phpの変数と全く意味が異なります。

サーバーサイドであるphpにとってはクライアントサイドで起きている出来事は何も知らないのでクライアントサイドから送信されていなければ(今回はPOSTですかね)、未定義のものに他なりません。

「うまくいきません」は今後はなるべく控えられた方が良い表現ですね。他人には何も伝わらない表現です。あなたが何を目的に何を作ろうとしていて何が起きているか誰も知らないわけですから。

phpのエラーが表示されていませんか?
されていないのでしたら、必ずエラー設定をonにしておいてください。
つまり「うまくいかない」のではなく、「○○しようとして××してみたが△△という現象が起きる」という部分で、必ずエラーが出ているはずです(変数未定義なのでNoticeかな)

ではどうするか。
サーバーサイドであるphpに情報を届けるのであれば、form送信すれば良いです。
$('#answer').val($(this).data('id'))ということはhidden#answerに値を設定してるはずなので、$_POSTでそのhiddenのname属性で受けとればいいですね。受け取った値をswitchに設置します。


蛇足。
今のところ初期時点では$selectedは未定義なので問題が起きてないように見えますが、POSTの時しか計算させないはずなので、switchもREQUEST_METHODの中に入れた方が良いです。
$resultも初期値必要ですね。

switchに設置する値もform送信するので、caseで判定しようとしている値以外が送られる可能性もあります。
現に、選択せずに送信できませんか?そうでなくてもブラウザデベロッパーツールを使えば値を改竄して送信できます。
switchにdefault:を設置して想定以外の場合の処理を追加してください。

今回は四則演算を行わせるようですが、必ず数値が送られるとは限りません。
JavaScriptだけの空のチェックではなく、必ずサーバーサイドであるphpで数値かどうかまでチェックするようにしてください。
placeholderがtext1とかだと更に数値が送られる保証は下がりますしね。

投稿2019/03/09 17:24

m.ts10806

総合スコア80765

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

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

GoGobuchiking

2019/03/10 04:43

御回答有難うございます。ご指摘頂いた点も今後は気をつけます。 php側で変数の初期値設定と $selected = $_POST['answer'];としたところ、うまくいきました。 またswitchもREQUEST_METHODの中に入れました。 switchにdefault:を設置して想定以外の場合の処理を追加してください。 この点ですが、サーバー側ではなく、javascriptで制御したいと考えております。 今後、検討します。 今回は四則演算を行わせるようですが、必ず数値が送られるとは限りません。 JavaScriptだけの空のチェックではなく、必ずサーバーサイドであるphpで数値かどうかまでチェックするようにしてください。 この点に関してはonKeyup="this.value=this.value.replace(/[^0-9]+/,'' で制御しております。
m.ts10806

2019/03/10 05:01

サーバーサイドでのチェックはセキュリティ上、省略はできませんよ。 回html、css、JavaScriptの記述は回答にも書きましたが、ブラウザデベロッパーツールで書き換えが可能です。
GoGobuchiking

2019/03/10 12:58

そうですか。では、JSでなくサーバー側で制御するコードを考えたいと思います。 デベロッパーツールはデザインの参考になるのでよく使うのですが、コードを書き換えることができるとは知りませんでした。
m.ts10806

2019/03/10 13:15

もちろん本来の使い方はコードを画面上で疑似的に調整して確認したうえで実際のコードに反映させるというものですが、悪用も可能という意味です。 システム側(今回はPHPですかね)はどんな値が送信されるかは知らないという大前提があります。 HTMLから送信されているということすら知らないので、サーバー側での対応は必須ということになります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問