formでphpファイルを呼び出して、処理が終わったあとでJSの別の処理がしたい。

PHP始めました。
簡単なチャット機能を作ってみようと思ってるんですが、送信の方で行き詰まりました。
とりあえず、input type=textの文字列を別のファイル"text.txt"に書き込むPHPはできました。
問題は、以下のgo.phpを呼び出して実行したあとで、ブラウザ側に処理を戻してtextのvalueを空っぽにしたいんです。
今、コードはこんな感じです。

index.php

html
1<!--前後省略-->
2<form method="POST" target="_blank" action="go.php">
3	<input type="text" id="text" name="text">
4	<input type="submit" value="escape">
5</form>

go.php

php
1<?php
2	$text = $_POST["text"];
3	$file = 'text.txt';
4	$current = file_get_contents($file);
5	if($text != "") $current .= $text . "<br>";
6	file_put_contents($file, $current);
7?>
8<script type="text/javascript">
9self.close();
10</script>

これで、formタグにonsubmit="text.value = '';"と書くと、phpより先に実行されてしまい、結果、phpに文字列を送ることができませんでした。

どうすればいいですか！

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

回答4件

いっそのこと投稿用のgo.php実行をAjaxでしてはどうでしょうか。
一般的なAjax通信を実装するには？（$.ajax）

投稿用go.phpとデータ取得のget.phpを準備
初期状態でget.phpから情報を取得して表示

以下はJavaScriptで実装します
0. ボタンクリックのイベントでtextを取得してajaxでgo.phpを実行
0. go.phpで投稿内容を登録して成功したら成功を返して、textを空にする
jQueryでHTMLフォームの値を操作する（取得・変更・削除）まとめ
0. 成功を受け取ったらajaxでget.phpを実行して投稿内容一覧を取得して表示（JSON形式推奨）

また、チャット機能とのことなのでshi_ueさんがご提示のように定期実行を行い、5.の処理を入れておくといいですね。
とすることで送信を画面に投げずにチャット機能（投稿・自動取得）が実現が可能です。

投稿2017/05/30 09:23

m.ts10806

総合スコア80850

otftrough

2017/05/31 23:19

ajaxはなんとなく存在は知ってるんですが、phpやるなら一緒に勉強するべきですか？ phpある程度わかってきてから手を出そうと思ってたんですが。

m.ts10806

2017/06/01 00:09

ざっくり説明するとjQueryからPHPを非同期で呼び出す技術です（「非同期」については別途調べてみてください） PHPを勉強していく上では避けては通れない必須技術です。もちろんある程度（どの程度を想定しているか分かりませんが）PHPを身につけてというのは分かりますが、PHPはPHPを覚えただけでは画面に何も出力しないので（出力の処理で書く中身は全てHTML）、今のうちに知っておいても損はないと思います。

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

質問文にあるとおり、go.phpにinput要素の値が渡される前にjavascriptで値が消されてしまうことが原因なので、もしも現状のコードをできるだけ残した状態で行いたいならば、以下のようにinput要素の値を消す処理を遅らせて実行するというのはいかがでしょう。
index.html

HTML
1<?php
2$text_data = explode("\n", file_get_contents("text.txt"));
3?>
4<!DOCTYPE html>
5<html lang="ja">
6<head>
7    <meta charset="utf-8">
8    <title>タイトル</title>
9</head>
10<body>
11<form method="POST" target="_blank" action="go.php" id="form1">
12    <input type="text" id="text" name="text" placeholder="text">
13    <input type="submit" value="escape">
14</form>
15<?php if (!empty(array_filter($text_data))) : ?>
16    <ul>
17        <?php for ($i = 0; $i < (count($text_data) - 1); $i++): ?>
18            <li>
19                <?php echo htmlspecialchars($text_data[$i], ENT_QUOTES, "UTF-8"); ?>
20            </li>
21        <?php endfor; ?>
22    </ul>
23<?php else: ?>
24    <p>投稿なし。</p>
25<?php endif; ?>
26<script>
27    document.getElementById("form1").addEventListener("submit", function () {
28        setTimeout(function () {
29            document.getElementById("text").value = "";
30            location.reload(true);
31        }, 1000);
32    }, false);
33</script>
34</body>
35</html>

go.php

PHP
1<?php
2$text = $_POST["text"];
3$file = 'text.txt';
4$current = file_get_contents($file);
5if ($text != "") {
6    $current .= $text . "\n";
7}
8file_put_contents($file, $current);
9?>
10<script type="text/javascript">
11    self.close();
12</script>

投稿2017/05/31 13:09

s8_chu

総合スコア14731

target="_blank" をやめて go.php から index.php にリダイレクトすればよいのでは？

PHP
1<!--前後省略-->
2<form method="POST" action="go.php">
3    <input type="text" id="text" name="text">
4    <input type="submit" value="escape">
5</form>

PHP
1<?php
2$text = $_POST["text"];
3$file = 'text.txt';
4$current = file_get_contents($file);
5if($text != "") $current .= $text . "<br>";
6file_put_contents($file, $current);
7header('location: index.php');
8exit();