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

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

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

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

JavaScript

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

HTML

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

Q&A

解決済

1回答

1450閲覧

javascriptよりも先にphpの処理を終わらせてから実行したい

rms398

総合スコア50

PHP

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

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2018/11/15 04:36

編集2018/11/21 12:40

PHPで人が描かれているボタンを押すと値段が変わるシステムを作っています。
人が描かれているボタンを押すと背景を青色にして現在選択されているケースを表したいのですが
押すと一瞬だけ青色に変わってすぐに元通りになってしまいます。

自己で調べてみてわかったこと

しらべてみてわかったことは先にjavascriptの処理がされてからphpの処理がされているようで
echoで表示したhtmlの設定に戻されているようです
どうやらphpの処理を先にしてしまえば、この問題を解決できそうなのですがどうやったら、javascriptよりもさきにphpの処理を終わらせてjavascriptを動かせばよいのでしょうか

該当のソースコード(一部省略)

php

1 2 if(!isset($_SESSION)){ 3 session_start(); 4 } 5 if(isset($_SESSION['id'])){ 6 $DBManager = new DBManager(); 7 $Data = $DBManager->getUserInfoTblByUserID($_SESSION['id']); 8 if(isset($_POST['logout'])){ 9 logout(); 10 } 11?> 12<html> 13<head> 14 <meta http-equiv="Content -Type" content="text/html;charset=UTF-8"> 15 <title>完了画面</title> 16 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 17 <script type="text/javascript" src="js/main.js"></script> 18 <link rel="stylesheet" href="css/main.css"> 19</head> 20<body> 21 <form method="post" action="main.php"> 22 <table id="pr"> 23 <?php 24 for($i = 1; $i <= 5; $i++){ 25 echo "<tr id='line" . $i . "'>"; 26 echo "<td id='people" . $i . "' class='people'><button type='submit' id='select' name='rate' value='" . ($i-1) . "'><img src='" . $imgsrc[$i-1] . "'></button></td>"; 27 for($j = 1; $j <= 5; $j++){ 28 $index = ($i-1) * 5 + $j; 29 if(isset($_POST['rate'])){ 30 switch($_POST['rate']){ 31 case 0: 32 $sumprice[$index-1] = $price[$index-1]; 33 $ticket = 1; 34 break; 35 case 1: 36 $sumprice[$index-1] = $price[$index-1] * 2; 37 $ticket = 2; 38 break; 39 case 2: 40 $sumprice[$index-1] = $price[$index-1] * 3; 41 $ticket = 3; 42 break; 43 case 3: 44 $sumprice[$index-1] = $price[$index-1] + floor($price[$index-1] / 20) * 10; 45 $ticket = 2; 46 break; 47 case 4: 48 $sumprice[$index-1] = $price[$index-1] * 2 + floor($price[$index-1] / 20) * 10; 49 $ticket = 3; 50 break; 51 case 5: 52 $sumprice[$index-1] = $price[$index-1] + floor($price[$index-1] / 20) * 10 * 2; 53 $ticket = 3; 54 break; 55 case 6: 56 $sumprice[$index-1] = floor($price[$index-1] / 20) * 10; 57 $ticket = 1; 58 break; 59 case 7: 60 $sumprice[$index-1] = floor($price[$index-1] / 20) * 10 * 2; 61 $ticket = 1; 62 break; 63 default: 64 $sumprice[$index-1] = 333; 65 $ticket = 1; 66 break; 67 } 68 }else{ 69 $sumprice[$index-1] = $price[$index-1]; 70 $ticket = 1; 71 } 72 echo "<td id='price" . $index . "' class='price'><button type='button'>" . $sumprice[$index-1] . "</button></td>"; 73 } 74 echo "</tr>"; 75 } 76 ?> 77 </table> 78 </form> 79 </div> 80</body> 81</html> 82<?php 83 }else{ 84 header('Location: login.php'); 85 } 86?>

javascript

1$(function(){ 2 //クリックした時 3 $('#select').click(function(){ 4 $(this).addClass('active'); 5 }); 6});

css

1.active { 2 background-color: blue; 3}

追記*phpとjavascriptは同じファイルに書き込まれています(一部省略)

php

1<?php 2for($i = 1; $i <= 5; $i++){ 3 echo "<tr id='line" . $i . "'>"; 4 echo "<td id='people" . $i . "' class='people'><button type='button' class='select active' name='rate' value='" . ($i-1) . "' onclick='ratechange(" . ($i-1) . ")'><img src='" . $imgsrc[$i-1] . "'></button></td>"; 5 for($j = 1; $j <= 5; $j++){ 6 if(){ 7 switch(){値段計算のため省略} 8 }else{} 9 echo "<td id='price" . $index . "' class='price'><input type='button' id='prva" . $index . "' value='" . $sumprice[$index-1] . "'></td>"; 10 } 11} 12 13?> 14

javascript

1$(function(){ 2 //クリックした時 3 var price = <?php echo json_encode($price); ?>; 4 var sumprice = <?php echo json_encode($sumprice); ?>; 5 var img = $('.select'); 6 function ratechange(rc){ 7 console.log('通った' + rc); 8 for(var i=0; i<25; i++){ 9 switch(rc){ 10 case 0: 11 sumprice[i] = price[i] * 1; 12 break; 13 case 1: 14 sumprice[i] = price[i] * 2; 15 break; 16 case 2: 17 sumprice[i] = price[i] * 3; 18 break; 19 case 3: 20 sumprice[i] = price[i] * 1 + Math.floor(price[i] / 20) * 10; 21 break; 22 case 4: 23 sumprice[i] = price[i] * 2 + Math.floor(price[i] / 20) * 10; 24 break; 25 case 5: 26 sumprice[i] = price[i] * 1 + Math.floor(price[i] / 20) * 10 * 2; 27 break; 28 case 6: 29 sumprice[i] = Math.floor(price[i] / 20) * 10; 30 break; 31 case 7: 32 sumprice[i] = Math.floor(price[i] / 20) * 10 * 2; 33 break; 34 default: 35 sumprice[i] = 666; 36 37 break; 38 } 39 40 $("#prva" + i + "").val = sumprice[i]; 41 } 42 img.removeClass('active'); 43 $(this).addClass('active'); 44 } 45 46});

エラー

ReferenceError: ratechange is not defined at HTMLButtonElement.onclick

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

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

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

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

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

guest

回答1

0

ベストアンサー

javascriptよりも先にphpの処理を終わらせてから実行したい

PHPはサーバーサイド
JavaScriptはクライアントサイド

なので、例えばJavaScriptから非同期でPHPが呼び出されるなどでない限り
どのように組んでもPHPの処理が先に行われます。
土俵が違う話なので「先に」というのは正確ではありませんが。

buttonのtype=submitはフォームを送信します。
つまり「一瞬だけかわって元に戻る」のではなく、フォーム情報が自分自身の画面に対して送信されたため、
再描画されただけ、ということになります。
フォームを送信しないボタンであればtype=buttonに変更してください。

追記。
もう1点。
forで回してテーブルを組んでいて、その中にbuttonがあるということは
id=selectのボタンが何個も出来上がっていることになります。
同じIDは画面内に1つというルールがありますし、1つになっていないとJavaScriptから正しく操作できません。
別IDをつけるか、同じような挙動するのであればclassにしてイベントを取得してください。

投稿2018/11/15 04:55

編集2018/11/15 04:58
m.ts10806

総合スコア80765

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

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

rms398

2018/11/15 07:06

再描画されるってことは結局のところjavascript実行後にphpが動いているってことなんでしょうか それとsubmitがないと値段を変えるためのpost変数を渡すことができません type=buttonでpost変数に代わるものがあるってことでしょうか
m.ts10806

2018/11/15 07:16

>javascript実行後にphpが動いている 「再描画」という表現で惑わせてしまったようで申し訳ないですが、そこは回答の冒頭に書いた通りです。 画面が再描画されるということは、そのJavaScriptが実行された状態との連動性は切れています。後と先とかなくなります。 action未指定なら自身の画面にpostします。 formをsubmitした情報だけactionに指定された先に送信されて、「最初から」はじまります。 つまりサーバーサイドの処理から、ですね。 >submitがないと値段を変えるためのpost変数を渡すことができません ちょっと意味が分かりません。 見た目値段?を変えたいだけなら送信せずともval()取得してhtmlの該当箇所を書き換えれば良いと思うのですが、違うのでしょうか?
rms398

2018/11/15 09:26

再描画の意味理解できました。 では、再描画の後にjavascriptを実行できればいいんでしょうか? >見た目値段?を変えたいだけなら送信せずともval()取得してhtmlの該当箇所を書き換えれば良いと思うのですが、違うのでしょうか? for文の中で$_POST(submitのvalue)のスイッチ分岐で値段を変えて行っているという意味です。 val()のことなんですが、これを利用して$ajaxで書き換えられるということでしょうか?
m.ts10806

2018/11/15 09:31

> では、再描画の後にjavascriptを実行できればいいんでしょうか? コメントで書いた通り、連動制は切れているためやり方が違います。 またAjax関係ないです。 まずはtype=buttonにしてIDを一意なものにしてください。 そのあと、 $(this).addClass('active'); のあとにでも $(this).val() とすればbuttonに埋め込まれたvalueが取得できます。 あとはPHPで計算を行っている部分をJavaScriptで計算するように変更して、 price" . $indexボタンのvalueに設定するようにすれば良いだけです。
rms398

2018/11/16 03:12

なるほど、valueに設定するということは<button type=submit>を<input type=button>にしてvalueを描画の対象にして、計算したものを設定させるということで大丈夫でしょうか?
m.ts10806

2018/11/16 04:37

日本語説明だと伝わりづらい部分もあるかと思いますので、まず思ったようにコードに起こしていただいて、動作させてみてもらって良いですか? そのコードを質問本文に追記いただければそこから判断します。
rms398

2018/11/21 12:42

返信遅れて申し訳ありません 追記しておきました onclickでratechangeを読んでその引数によって、計算の処理が変わるというロジックです エラーがでていますが、こういうロジックでやろうかと思ってます
papinianus

2018/11/28 03:04

そのエラーは、ratechangeの定義場所(function ratechangeと書いてある場所)が悪いことに起因します。 関数はスコープを持ちますし、jQueryの即時関数で評価されて終わるので。 具体的な対処としては、とりあえず、htmlにスクリプトタグをかいて、そこで定義するのが近道だと思います。
rms398

2018/11/29 03:57

クリックした画像に青色がつき、値段が変わり、無事動きました!
m.ts10806

2018/11/29 04:12

papinianusさん 補足ありがとうございます。 rmsequalmarxさん 解決されたようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問