HTMLの入力フォームのデータをサーバー内に.txtで保存するやり方の紹介です。
本当はHTMLかJavaScriptだけで実装したかったのですが、ファイルをダウンロードするしかないようなので、PHPを使いました。
今回紹介する方法はセキュリティに関して全く考慮していないので、皆さんの環境で実行するときはセキュリティ面に配慮してください。(暗号化するなど)
PHPを使うので、通常はローカルでは実行できません。
サーバーで実行してください。
アルゴリズム
アルゴリズムは以下の流れになっています
- HTMLの入力フォームに文字列を入力する
- 入力した文字列をPHPのプログラムに送信する
- PHPで
.txtに書き込む
今回はPHPにデータを送信するときに、画面遷移をしないでほしかったので、画面遷移をせずにiframeを用いて実装させます。
参考 => FormでPOST処理をしつつ画面遷移させない方法
コード
まずはHTML内に入力フォームを作成します。
//index.html
<script>//画面遷移させないためのスクリプト
const $form = $('#form')
$('.btn-send').on('click', evt => {
$form.submit()
$form[0].reset()
return false
})
</script>
<form name="hoge" id="hoge1" action="該当のPHPファイルのURL/index.php" method="post" target="send">
<p>ここに入力してくだい：<input type="text" id="id_textBox1" name="sendPHP" autocomplete="on"></p>
<button class="btn-send">決定</button>
</form>
<iframe name="send" style="width:0px;height:0px;border:0px;"></iframe><!--画面遷移させないため-->
これで入力フォームのテキストデータをindex.phpに送る事ができます。 <button class>内でHTML内の他の関数を呼び出すことも可能です。
例えばJavaScriptでonButtonClick();という関数を作成したとしたら、<button class>は次のようになります。
<button class="btn-send" onclick="onButtonClick();">決定</button>
//index.php
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<?php
$myfile = fopen("保存したいディレクトリのパス/hoge.txt", "a") //fileを上書きモードで開く
?>
<?php fwrite($myfile, $_POST['sendPHP']. "\n"); ?>
<?php
fclose($myfile);
?>
</body>
</html>
PHPのタグを一つずつ分けないで、一個にまとめてしまうとファイルが作成できなかったので、やむを得ず一つずつに分けました。
もう一度いいますが、この方法はHTMLからのデータを平文のままサーバーに送っているので、セキュリティ面に気をつけてください。
