ボタンを２つ作り、片方を押すと無効になり、もう片方が有効になるようにしたい。且つ、formタグを動かす

Question

ご教授お願いいたします。
勉強中ですので、質問内容がわかりにくいところがあれば
すみませんがご指摘いただけると幸いです。



【質問内容】

「開始」と「終了」ボタンを置き、
初期状態は「終了」を押せないよう（無効）にしておく。←これはできました

次に、「開始」ボタンを押すと、
「開始」ボタンが押せなくなり（無効にする）
「終了」が押せるようになる（有効にする）

次に、「終了」ボタンを押すと、
「終了」ボタンが押せなくなり（無効にする）
「開始」が押せるようになる（有効にする）

という動きをさせたいです。

下記のようにjQueryで、一応そのような動きは再現できたのですが、
ボタンを押したときにiframeに結果が現れてくれません。
（この表現があっているかわかりませんが。。。）

ボタンの切り替えをして、かつ、
iframeに結果を表示させるにはどのようにすればいいでしょうか。

ちなみに、iframeに表示されない理由は
ボタンをクリックしたときにjqueryのclickが動作してしまい
ボタンのsubmitが実行されない
ということなのでしょうか？

   	<form action="iframe_after.php" method="POST" target="iframe">
			<button id="start_button" type="submit" name="start">開始</button>
			<button id="stop_button" type="submit" name="stop" disabled>終了</button>
	   </form>

　　	<iframe src="iframe_before.php" name="iframe"></iframe>



	<script>
		$(function() {
			$("#start_button").click(
				function(){
					$("#stop_button").prop("disabled", false);
					$("#start_button").prop("disabled", true);
				});

			$("#stop_button").click(
				function(){
					$("#start_button").prop("disabled", false);
					$("#stop_button").prop("disabled", true);
				});
		});
	 </script>

　


iframe_after.phpでは、下記のような動きをさせています。
「開始」ボタン押下か、「終了」ボタン押下で分岐させて
phpMyadminに1件挿入し、挿入したものを表示させています。
（stop_timeはまだ作成途中です）

	<?php
		if(isset($_POST['start'])) {
			$db->exec('INSERT INTO start_times SET start_time=NOW()');

		} else if(isset($_POST['stop'])) {
			$db->exec('INSERT INTO stop_times SET stop_time=NOW()');
		}
		$start_times = $db->query('SELECT * FROM start_times ORDER BY id ASC');
		while($start_time = $start_times->fetch()) {
			echo $start_time['start_time'] . '<br>';
		}
	?>

Comments

[m.ts10806]

iframe_after.php
では何をさせたいのでしょうか。

[kens_Freelance]

ありがとうございます。修正しましたので、ご参照いただけると幸いです。よろしくお願いいたします。

Answer 1

<script>
$(function(){
  $('.send').on('click',function(e){
    e.preventDefault();
    var flg=$(this).prop('disabled');
    $(this).prop('disabled',!flg);
    $('.send').not(this).prop('disabled',flg)
    $(this).prop('form').submit();
  });
});
</script>
<form action="sample.php" method="POST" target="iframe0" id="form0">
<input type="hidden" name="start" value="1">
</form>
<form action="sample.php" method="POST" target="iframe0" id="form1">
<input type="hidden" name="stop" value="2">
</form>
<div>
<button type="submit" class="send" form="form0">開始</button>
<button type="submit" class="send" form="form1" disabled>終了</button>
</div>
<iframe src="sample.php" name="iframe0"></iframe>

Comments

[kens_Freelance]

ありがとうございます。解決しました。
自分の知識では難しいですが、とても勉強になります！
しっかり一つずつひも解いて理解します。

[kens_Freelance]

もし、教えていただければ有難いのですが、下記のようなコードではうまくいきませんでした。
自分の中では同じ内容のように感じるのですが、どこが悪いのかご指摘いただけると幸いです。

<form id="start_stop_form" action="iframe_after.php" method="POST" target="iframe">
<button id="start_button" type="submit" name="start">開始</button>
<button id="stop_button" type="submit" name="stop">終了</button>
</form>
<iframe src="iframe_before.php" name="iframe"></iframe>

<script>
$(function() {
$("#start_button").click(
function(){
$("#stop_button").prop("disabled", false);
$("#start_button").prop("disabled", true);
$("#start_button").prop('form').submit();
});

$("#stop_button").click(
function(){
$("#start_button").prop("disabled", false);
$("#stop_button").prop("disabled", true);
$("#stop_button").prop('form').submit();
});
});
</script>

[yambejp]

ボタンをdisabledにするタイミングの問題でブラウザによって
挙動がすこしことなるようです。
サブミットをまってからdisabledにするならこんなかんじ
$(function() {
$("#start_button").click(
function(){
$("#start_button").prop('form').submit().queue(function(){
$("#stop_button").prop("disabled", false);
$("#start_button").prop("disabled", true);
$(this).dequeue();
});
});
$("#stop_button").click(
function(){
$("#stop_button").prop('form').submit().queue(function(){
$("#start_button").prop("disabled", false);
$("#stop_button").prop("disabled", true);
$(this).dequeue();
});
});
});

[kens_Freelance]

ダメな理由まで教えていただけるなんて、本当に感謝です。
submitしてから、disabledにするということですね。
とてもわかりやすいご回答ありがとうございます。