type= submit と button でJavascriptとPHPを同時に動かしたい

Question

カウントダウンタイマーを作っています。
type="submit"　だとPHPのみが動作し、
type="button"　だとJavascriptのみが動作します。
同時に動作させる方法がないか思案しています。

submitした後でMySQLに30分追加した時間を格納したいと考えています。
DBのUPDATEには成功しています。

<?php 

if(isset($_POST['30minute'])) {
  echo $_POST['30minute'];
}

?>
<form action="zz.php" method="post">
<span contenteditable="true" id="min">25</span><span>:</span><span contenteditable="true" id="sec">00</span>
<button type="button" name="30minute" class="stBtn btn btn-primary btn-lg btn-block" value="中身だよ">Start</button>
</form>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- timer JavaScript -->
    <script src="js/timer.js"></script>

$(document).ready(function() {
  $('.stBtn').click(function() {
    var btn = $('.stBtn');
    var minutes = parseInt($('#min').html());
    var seconds = parseInt($('#sec').html());
    if (minutes + seconds === 0) {
      btn.html('Start');
      btn.removeClass('red');
      alert('Please set the timer');
      return;
    }
    if (isNaN(minutes)) {
      $('#min').html('00');
      minutes = 0;
    }
    if (minutes > 59) {
      alert("Can't be used for more than 59 mins");
      $('#min').html('00');
      minutes = 0;
      return;
    }
    if (isNaN(seconds)) {
      $('#sec').html('00');
      seconds = 1;
      retrun;
    }
    var t = (minutes * 60) + (seconds);

    function countdownTimer(t) {
      var secLeft = Math.floor(t % 60);
      var minLeft = Math.floor((t / 60) % 60);
      var dispSeconds = '0' + secLeft;
      var dispMinutes = '0' + minLeft;
      $('#min').html(dispMinutes.slice(-2));
      $('#sec').html(dispSeconds.slice(-2));
    }
	function reStart() {
    	btn.html('Start');
        btn.removeClass('red');
    	}
    function updateTimer() {
      t--;
      countdownTimer(t);
      if (t <= 0) {
        clearInterval(interval);
        $('#ado').get(0).play();
        reStart();
      }
    }
    if (btn.html() == "Stop") {
      clearInterval(interval);
      reStart();
    } else {
      window.interval = setInterval(updateTimer, 1000);
      btn.html('Stop');
      btn.addClass('red');
    }
  });

  $('.refresh').click(function() {
		clearInterval(interval);
    $('#min').html('25');
    $('#sec').html('00');
		$('.stBtn').html('Start');
    $('.stBtn').removeClass('red');
  });
});

type="button"　の時はカウントダウンのみ始まり「中身だよ」が表示されません。
type="submit"　の時は「中身だよ」が表示され、カウントダウンされません。

期待する結果は
「中身だよ」が表示され、かつカウントダウンが始まるようにしたいです。

カウントダウンタイマーの参考にしたサイトはこちらです。
https://code.sololearn.com/W0NhhY7ov1a8#html

お力添えをいただけると幸いです。よろしくお願いいたします。

Answer 1

どう転んでも同時には動きません。
JavaScriptはクライアントサイドの言語
PHPはサーバーサイドの言語
で動作する環境が違います。

buttonにしておいてJavaScriptの処理後にJavaScriptでformをsubmitすれば「一連の流れで動いた」と言えると思います。

ただ、ざっとしか見ていませんが、PHP不要ではないでしょうか？JavaScriptだけでできそうに思います。
submitしてしまうと再度読み込まれるため、JavaScriptの動作はまた最初からとなります。

Comments

[terapro]

そうなのですね、Javascript不勉強のためお手間おかけします。
submitした後でMySQLで30分追加した時間を格納したいと考えています。

タイマーが動き、かつ、MySQLにデータが30分追加したいです。
言葉足らずで申し訳ございません。

submitの場合、MySQLに30分は追加できました。
buttonの場合、タイマーが動作しました。

buttonにした場合、どうやら$_POSTで値が取れなかったのでどうするべきかを質問しました。

> submitしてしまうと再度読み込まれるため、JavaScriptの動作はまた最初からとなります。
そうするとボタンを押下した後、submitしてからbuttonの動作をするという記述をする必要がありそうです。こんな記述はできるのでしょうか？

[m.ts10806]

>submitした後でMySQLで30分追加した時間

質問本文へ追記してください。

で、あれば、PHPへの送信をAjaxでしては。
そうするとバックグラウンドで実行できるので、一応「タイマーを止めずにPHPを実行する」ということはできます。

>buttonにした場合、どうやら$_POSTで値が取れなかったのでどうするべきかを質問しました。

そもそもbuttonだけだと送信しないのでPHP実行されていません。

[terapro]

>>submitした後でMySQLで30分追加した時間
>質問本文へ追記してください。
追記しました。

> で、あれば、PHPへの送信をAjaxでしては。
Ajaxはまだ触ったことがないため、これから調べてみます。

[terapro]

こちらのサイトを参考に解決できました。
https://qiita.com/zakiyamaaaaa/items/bdda422db2ccbaea60d9

Ajaxについてのヒントを頂きありがとうございました。

[m.ts10806]

ヒントにつながったようで何よりです。
要件次第ではありますが、データ処理はすべてPHP（などのサーバーサイドの言語）で画面に関する描画処理や動きをすべてJavaScriptで行うようなことも現場では結構あります。
完全な役割分担ですね。覚えておいても損はないと思います。
特にJSON形式のデータがよく使われるので、これを機会に。

[terapro]

ありがとうございます。コツコツがんばります！