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

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

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

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

JavaScript

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

Q&A

解決済

6回答

2010閲覧

javascriptの変数の値をフォームを使ってPHPの変数にsubmitボタンを使わずに代入したいです。

gomatan1258

総合スコア67

PHP

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

JavaScript

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

0グッド

1クリップ

投稿2017/07/25 06:35

編集2017/07/25 07:08

php

1<?php 2if(isset($_POST['number'])) { 3 echo "正常に実行されています。"; 4 $num = $_POST['number']; 5 echo $num; 6}else { 7 echo "実行されていません。"; 8} 9?> 10 11<!DOCTYPE html> 12<html lang="ja"> 13<head> 14<meta charset="utf-8"> 15<title>テスト</title> 16</head> 17<body> 18 19 <form action="" method="post"> 20 number : <input type="hidden" name="number" value="0" id="num"> 21 <input type="submit" value="投稿"> 22 </form> 23 24 <div id="hogehoge">ここをクリック</div> 25 26 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 27 <script src="javascript.js"></script> 28</body> 29</html>

javascript

1$(function() { 2 $(document).on('click', '#hogehoge', function() { 3 var test = Math.floor( Math.random() * 51 ); 4 $('#num').val(test); 5 }); 6});

いつもお世話になっています。
この書き方でなんとか動くのですが、<input type="submit" value="投稿">を付けず、submitを使わずに「ここをクリック」をクリックしただけで、javascriptのtestの変数の数値をPHPのnumに代入することはできますでしょうか?
「ここをクリック」を押したら、0から50までの数値がランダムで表示されるようにしたいです。
今回例として乱数をつかっていますので紛らわしいですがここは気に留めないでください。
phpは特に初心者なのでわからないところが多くて申し訳ございません。

追記いたします。
当方がやりたいことは、フォームを使ってjavascriptの変数のtestをsubmitボタンを使わずにPHPの$numに代入し、そして出力をしたいことです。順番としたらまずtestが決まって、フォームに渡され、そしてPHPの$numにtestが渡ってくるといった感じです。

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

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

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

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

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

m.ts10806

2017/07/25 07:21

何のためにそうしたいか、目的をきちんと書いたほうがいいかもしれません。やりたいことと実際やっていることが最適でないことも多々あります。
gomatan1258

2017/07/25 07:30

なるほど、ご指摘ありがとうございます。実はまだPHPのまったくの初心者なのですが、ちょっとしたタイピングソフトを作って、ぽんこつですがベストスコアーが表示されるのですが、ブラウザを閉じてしまうとスコアが消えてしまいます。それをzamppなどのローカルでブラウザを閉じてもベストスコアーを維持させておきたいというのが真の目的です。そのときのベストスコアーがここで言うjavasciptの変数です。
gomatan1258

2017/07/25 07:32

あと、ベストスコアーはdatファイルのようなものに、書き込まれるようにしておこうと思っています。
m.ts10806

2017/07/25 07:32

であればphpの使い方が違っています。スコアを保存する仕組みを作るべきですね。
m.ts10806

2017/07/25 07:40 編集

ベストスコアが出る(javascript)→情報をdatに書き込む(HTML(javascript)で送信→PHP)→datからベストスコアを取得する(PHP)→取得した値を表示(PHPでechoしてブラウザ表示(HTML)) という形です。質問するときは目的部分をきちんと書いておかないと本当に得たい回答が得られないので、質問するときには注意してください。質問が部品によりすぎていては回答も端的になってしまい質問者・回答者ともに無駄な時間を浪費してしまう(質問者の目的が達成できない)ことになります。
m.ts10806

2017/07/25 08:18

質問にきちんと追記しておかないと埋もれるのでどんどん目的から離れてしまいますよ。
gomatan1258

2017/07/25 10:56

申し訳ありません、帰宅途中でした。
guest

回答6

0

ベストアンサー

javascriptでform submitする記述を追加します。

追記:
下記のような記述だと誤解を招きますのでご注意ください。

javascriptのtestの変数の数値をPHPのnumに代入することはできますでしょうか?

この文章をそのまま解釈すると回答は「できません」となります。

  • PHPはサーバーサイドの言語。画面を表示するため(前)に動作する。
  • javascriptはクライアントサイドの言語。画面が表示されてから動作する。

動く場所が違うので並行して実行はできません。
javascriptからphpを呼び出すajaxという仕組みはありますが、
これもGETなりPOSTなりでjavascriptから非同期で値を送信しているだけです。

「javascriptで任意の値をinputタグにセットしてサーバーにPOST送信した結果、サーバー側でPHPが送信された結果を受け取る」ということになります。

コメントを受けての追記

「ブラウザを閉じても任意の値を維持しておきたい」という目的があるのでしたら、今回やろうとしていることでは実現できません。
POSTはブラウザを閉じてしまうと値は維持しません。
維持するためには下記のいずれかで対応することになると思います。

  • PHPを利用しDBに任意の値を保存する方法(これがベスト)
  • PHPを利用し任意のファイル(datなど)に保存しておく方法(ブラウザから参照できない場所にすること)
  • PHPを利用しセッションに保存する(しばらく経つと消えるのであまり推奨しない)
  • Webstorage(LocalStorage,SessionStorage)を利用する方法(javascriptのみで対応可能でPHP不要)

いずれもロジックは同じです。

  • 任意の値を保管しておき、アクセス時に取り出して表示する。
  • 取り出した値と比較し、上回っていたら保管先の値を更新(上書き)する。

※履歴を残したいというのであればまた別の仕組みとなりますが、まずは上書き上書き...から

投稿2017/07/25 06:46

編集2017/07/25 08:35
m.ts10806

総合スコア80731

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

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

gomatan1258

2017/07/25 06:52

誤解をまねく質問をしてしまい申し訳ございません。javascriptのtestの値が決まったあとにPHPの$numにtestの値を入れたかったです。
m.ts10806

2017/07/25 06:55

やりたいことは質問の後半にある、「submitボタンを押さずに送信したい」ということですよね。 タイトルと質問を一部修正されたほうが良いでしょう。 そのやりたいことは私の回答冒頭にあるリンクを参照してjavascriptでformを送信する記述を加えると実現可能です。
m.ts10806

2017/07/25 06:58

あと、例かもしれませんが、単に文字を出力する場合に<html>より前(もっと言えば<body>より前)にechoを書くのはデバッグ以外ではやめたほうがいいですね。
gomatan1258

2017/07/25 11:47

いつも色々教えていただいてありがとうございます。大変勉強させていただいたのでBAにさせていただきます。ありがとうございます。
guest

0

もしかしてこういうことでしょうか?
ここをクリックというlabelをつくっておいて
隠しておいたsubmitボタンのidにforを設定する

PHP

1<style> 2#f1{position:absolute;margin-top:-9999px;} 3</style> 4<?PHP 5print_r($_POST); 6?> 7<form method="post" id="f1"> 8<input type="text" name="num" value="999"> 9<input type="submit" id="s"> 10</form> 11<label for="s">ここをクリック</label>

投稿2017/07/25 08:16

yambejp

総合スコア114503

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

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

gomatan1258

2017/07/25 11:29

ご回答ありがとうございます。こんなことができるんですね。valueを乱数でだしてここをクリックをクリックしたら動きました。参考にさせていただきます。
guest

0

formを使わないということだと、リンクですね。

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>テスト</title> 6</head> 7<body> 8 <div> 9 <?php echo filter_input(INPUT_GET, 'number'); ?> 10 </div> 11 12 <div> 13 <a href="" id="hogehoge">ここをクリック</a> 14 </div> 15 16 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 17 <script> 18$(function() { 19 $(document).on('click', '#hogehoge', function() { 20 var test = Math.floor( Math.random() * 51 ); 21 $('#hogehoge').attr('href','?number='+test); 22 }); 23}); 24 </script> 25</body> 26</html>

投稿2017/07/25 07:19

otn

総合スコア84380

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

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

gomatan1258

2017/07/25 11:41

formのmethod属性にgetを宣言しなくてもこういうことができるのですね。当方は恥ずかしながらgetとpostの違いも理解していないので勉強したいと思います。
guest

0

GETパラメータで渡す場合だとこんな感じです。
セキュリティは考慮していません。

php

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>テスト</title> 6</head> 7<body> 8<div id="hogehoge">ここをクリック</div> 9<div><?php if (isset($_GET['num'])) echo 'num: ' . $_GET['num']; ?></div> 10<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 11<script src="javascript.js"></script> 12</body> 13</html>

javascript

1$(function() { 2 $('#hogehoge').on('click', function() { 3 var test = Math.floor( Math.random() * 51 ); 4 location.search = 'num=' + test; 5 }); 6});

投稿2017/07/25 07:16

naga3

総合スコア1293

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

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

gomatan1258

2017/07/25 11:44

formを作らずともできるのですね。getとpostが理解できていないので、勉強しようと思います。ありがとうございました。
guest

0

formにIDを付ければ可能です

<form id="form1"> $('#formのID').submit(); ```HTML <form id="form1" action="" method="post"> number : <input type="hidden" name="number" value="0" id="num"> </form> <div id="hogehoge">ここをクリック</div> ``` ```javascript $(function() { $(document).on('click', '#hogehoge', function() { var test = Math.floor( Math.random() * 51 ); $('#num').val(test); $('#form1').submit(); }); }); ```

投稿2017/07/25 09:04

date

総合スコア1820

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

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

gomatan1258

2017/07/25 11:18

このソースコードでいけました。ページが更新されてうまくいくかわかりませんが、これでちょっと試してみます。ありがとうございます。
guest

0

Javascript -> PHP はよほどマニアックなことをしない限りは出来ません。

ので、出来ないと考えてください。

投稿2017/07/25 06:39

k-motoyan

総合スコア78

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問