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

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

ただいまの
回答率

89.54%

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

解決済

回答 6

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,774

gomatan1258

score 41

<?php
if(isset($_POST['number'])) {
    echo "正常に実行されています。";
    $num = $_POST['number'];
    echo $num;
}else {
    echo "実行されていません。";
}
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>

    <form action="" method="post">
        number : <input type="hidden" name="number" value="0" id="num">
        <input type="submit" value="投稿">
    </form>

    <div id="hogehoge">ここをクリック</div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="javascript.js"></script>
</body>
</html>
$(function() {
    $(document).on('click', '#hogehoge', function() {
        var test = Math.floor( Math.random() * 51 );
        $('#num').val(test);
    });
});

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

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2017/07/25 16:36 編集

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

    キャンセル

  • m.ts10806

    2017/07/25 17:18

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

    キャンセル

  • gomatan1258

    2017/07/25 19:56

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

    キャンセル

回答 6

checkベストアンサー

+6

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 15:52

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

    キャンセル

  • 2017/07/25 15:55

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

    キャンセル

  • 2017/07/25 15:58

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

    キャンセル

  • 2017/07/25 20:47

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

    キャンセル

+2

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<div id="hogehoge">ここをクリック</div>
<div><?php if (isset($_GET['num'])) echo 'num: ' . $_GET['num']; ?></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="javascript.js"></script>
</body>
</html>
$(function() {
    $('#hogehoge').on('click', function() {
        var test = Math.floor( Math.random() * 51 );
        location.search = 'num=' + test;
    });
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/07/25 20:44

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

    キャンセル

+2

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
    <div>
    <?php echo  filter_input(INPUT_GET, 'number'); ?>
    </div>

    <div>
    <a href="" id="hogehoge">ここをクリック</a>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
$(function() {
    $(document).on('click', '#hogehoge', function() {
        var test = Math.floor( Math.random() * 51 );
        $('#hogehoge').attr('href','?number='+test);
    });
});
    </script>
</body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/07/25 20:41

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

    キャンセル

+2

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/07/25 20:29

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

    キャンセル

+1

formにIDを付ければ可能です
<form id="form1">
$('#formのID').submit();

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/07/25 20:18

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 89.54%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • PHPに関する質問
  • javascriptの変数の値をフォームを使ってPHPの変数にsubmitボタンを使わずに代入したいです。