PHPで画面遷移を行わずPOSTしたい。

前提・実現したいこと

いつもお世話になっております。

PHPとHTMLを使っているのですが、
入力内容の確認ボタンを押すと、PHPで指定したsubmitボタンが押された時の処理を行いかつ次の画面（ここでいうとindex2.php）にPOSTで変数を送りたい。

該当のソースコード

php
1<?php
2session_start();
3	// データベース接続
4	$dbUrl = parse_url(getenv('DATABASE_URL'));
5	$db['host'] = $dbUrl['host'];
6	$db['user'] = $dbUrl['user'];
7	$db['pass'] = $dbUrl['pass'];
8	$db['dbname'] = ltrim($dbUrl['path'], '/');  // データベース名
9	$dsn = sprintf('pgsql:host=%s;dbname=%s',$db['host'],$db['dbname']);
10
11
12try{
13    $pdo = new PDO($dsn,$db['user'],$db['pass']);
14
15    $sql = "SELECT * FROM sample01";
16    
17    $res = $pdo->query($sql);
18    
19    
20}catch (PDOException $e){
21   exit(mb_convert_encoding($e->getMessage(),'UTF-8','SJIS-win'));
22}
23
24$pdo = null;
25
26	// submitが押された時の処理
27	if(isset($_POST['submit'])){
28
29                //ここでしたいのはnameの重複チェックですが
30                //エラーが出てまして未完成です
31		//DBと接続
32		$pdo = new PDO($dsn,$db['user'],$db['pass']);
33		//SQL文を準備
34		$sql = "SELECT * FROM sample3 WHERE name = :name";
35		//インジェクション対策
36		$stmt = $pdo->prepare($sql);
37		//バインドする
38		$stmt->bindParam(':name', $ans[0]);
39		//SQLを実行
40		$stmt->execute();
41		
42		$user = $stmt->fetch();
43		
44		$_SESSION['name'] = $ans[0];
45		
46		
47		header("Location: index2.php");
48	}
49?>
50
51<!DOCTYPE html>
52<html lang="ja">
53<head>
54	<meta charset="utf-8">
55	<title>PHP TEST</title>
56</head>
57<body>
58	<form method="POST" action="">
59	<table>
60		<?php foreach( $res as $value ): ?>
61		<tr>
62			<p>
63			<td>
64				<?php print htmlspecialchars($value[Question],ENT_QUOTES, "UTF-8"); ?>
65			</td>
66			<td>
67				：
68			</td>
69			<td>
70				<input type="text" name="ans[]" value="">
71				<input type="hidden" name="res[]" value="<?php echo $value[Question] ?>">
72			</td>
73			</p>
74		</tr>
75		<?php endforeach; ?>
76	</table>
77	<input type="submit" name="submit" value="入力内容を確認" />
78	</form>
79</body>
80</html>
81

発生している問題・エラーメッセージ

１、
「入力内容を確認」ボタンを押したら、phpで指定したsubmitが押された時の処理を行う前にindex2.phpに画面遷移してしまう。
２、

<form method="POST" action="index2.php"> のaction=""に変えたらindex2.phpではans[]とres[]が受け取れていなかった。

試したこと

１、
処理が行われる前に画面遷移してしまう。ので

<form method="POST" action="index2.php"> のaction=""に変えたらindex2.phpにPOSTで送れなくなってしまった。

２、

jQuery
1$('button').on('click',function(e){
2    e.preventDefault();
3    $.ajax({
4    ・・・略
5})

調べるとこれを使うと出たが、PHPではなくjQueryという別の言語みたい？？

m.ts10806

2019/07/19 07:20 編集

[指定したボタンが押された時の作業]とは何でしょうか。

red-ehephant

2019/07/19 07:22

if(isset($_POST['submit'])){ //submitが押された時のコード } ここの中身のことです。分かりにくくすみません。

m.ts10806

2019/07/19 07:25

どのような処理をするかによります。そもそもformはactionに指定した先にform内容を送信するので「画面遷移」とは概念がちょっと違います。

red-ehephant

2019/07/19 07:32

中身もまだ完成していなくて、別に後から質問しようと思ったのですが、未完成のものでも編集して入れた法が回答されやすいですか？そうなのですね。てっきり、actionに指定してあげると内容を送信＋指定した先に画面遷移だと思っていました。

m.ts10806

2019/07/19 07:33

回答に直接関係ないのでこちらで補足 >jQueryという別の言語みたい？？ jQueryはJavaScriptのライブラリです。で、提示のコードはAjaxという非同期通信によってサーバー側のプログラムを実行する仕組みです。

m.ts10806

2019/07/19 07:34

「こんな感じの処理を行う」というコメントでも良いと思います。それによって「こういう処理を行うと良いのでは」というアドバイスが可能になります。

m.ts10806

2019/07/19 07:35 編集

ちょっと気になったのですが $value[Question] ↑「Question」という「定数」は定義されてるのでしょうか。コード内にはないようですが。（通常ですと「未定義の定数」の旨のエラーが出るはずです）

red-ehephant

2019/07/19 07:45

$value[Question]については必要ないかと思いまして質問するときに消してしまいました。編集しました。アドバイスありがとうございます。 jQueryはJavaScriptのような言語ではないのですね。勉強になります。ありがとうございます。

m.ts10806

2019/07/19 07:47

正確に書くべきでしたね。「JavaScriptで記述されたライブラリ（便利な処理の集合体）」です。ですので、内部的にはJavaScriptで記述されています。

m.ts10806

2019/07/19 07:47

> $value[Question]については必要ないかと思いましてあいえ、そもそもPHP的には定数を参照しに行っているのでその定数が未定義であればエラーですよと言いたかったのです

red-ehephant

2019/07/19 07:57

同じことを思っている方がきっといらっしゃるので、ありがたいです。 PHPではできないのですね。ありがとうございます。

m.ts10806

2019/07/19 07:58

どこを切り取って「PHPではできない」と書かれたか分かりませんが、既に回答がついている通り（私も回答してますが） PHPはガッツリ使えますよ。どういう手順で通すかだけです。

m.ts10806

2019/07/19 07:59

用語については「分かった気になる」だけでも話はしやすくなるので下記のようなサイトは確認するようにすると良いかと思います。 https://wa3.i-3-i.info/word1473.html ※[〇〇とは]でプログラム用語を入れると大体でてきます

red-ehephant

2019/07/19 08:16

言葉が足りなかったです。 PHP内ではjQueryはできないのですね。と思ったのですが、できるんですね！！お気に入り登録します。助かります。

m.ts10806

2019/07/19 09:11 編集

>PHP内ではjQueryはできないのですね。と思ったのですが、できるんですね！！んーと、階層が違う話です。 PHPはサーバー側の言語でURLなどリクエストを受けて処理を行い、結果をレスポンスとして返します。返すレスポンスは基本的に文字列ですが、その文字列がHTMLの構文でブラウザからアクセスするからきちんとHTMLとして認識して画面表示を行います。つまりどのように書いてもPHPの処理が先に行われます。ブラウザは出力処理部分のみ読み取ります。 JavaScriptともHTMLと同じです。PHPの「サーバーサイド」に対し「クライアントサイド」と呼びます。つまり、正確には「PHPの出力処理に書いたJavaScriptの処理は行える」です。 Ajaxについては「非同期で（画面の操作を奪うことなく）サーバーサイドの処理が行える」仕組みです。これはjQuery記法で書くと楽なだけで結局は裏でJavaScriptが動作しています。なので、結局はJavaScriptです。ただ、Ajaxから呼び出されるPHPは画面出力を伴わないものなので、HTMLを返すわけではなく、リクエストを送信したJavaScriptに対してレスポンスを返すだけになります（JSON形式がよく使われます）このあたりはAjaxで調べるとQiitaなどに評価の高い記事があがっているので一通り確認して理解を深めると良いです。

行動規範の内容に同意します

回答3件

古いブラウザを無視できるならfetch

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.querySelector('#sbm').addEventListener('click',e=>{
4    e.preventDefault();
5    const method = "POST";
6    const body = new FormData(e.target.form);
7    fetch('send.php', {method, body}).then(data=>data.text()).then(console.log)
8  });
9});
10</script>
11<form method="post" action="send.php">
12<input type="text" name="res[]" value="a"><br>
13<input type="text" name="res[]" value="b"><br>
14<input type="text" name="res[]" value="c"><br>
15<input type="submit" value="send" id="sbm">
16</form>