javascriptとPHPで入力フォームのコードを書いているのですが、
流れとしては、①入力フォーム→②確認画面→③送信画面の3段階で構成しています。
初めの入力フォームで入力した値を②の確認画面で表示される「戻る」ボタンで
戻っても入力した内容をjavascriptで保持するようにしたいです。
もとから、PHPのみでは保持するコードは書いてある(提示したコードにある)のですが、PHPの内容は変更せず
に①の画面で入力した内容を②確認表示画面で戻っても入力した内容をjavascriptで保持するようにしたいです。
調べてよく分かりません。どうコード書いたらよいでしょうか?
①の画面でjavascripによる入力エラーメッセージの表示の設定をしたら、PHPが発動しなくなりましたが、PHPの内容は変更したくないです。
この質問で提示したコードは①入力フォームのコードのみです。字数制限で全て提示できません。
回答よろしくお願いいたします。
●●①入力フォーム
<?php
session_start();
$errors = array();
if(isset($_POST['submit'])) {
$name = $_POST['name'];
$name = htmlspecialchars($name, ENT_QUOTES);
if($name === "") { $errors['name'] ="名前が入力されていません。 ";
}
if(count($errors) === 0) {
$_SESSION['name'] = $name;
/* 確認画面の表示, */
header('Location:http:▼▼');
exit();
}
}
if(isset($_GET['action']) && $_GET['action'] === 'edit'){
$name = $_SESSION['name'];
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-3.6.0.min.js"></script>
<style type="text/css">
.auto-style1 {
text-align: center;
}
</style>
<?php echo "<ul>";foreach($errors as $value) {
echo "<li>";
echo $value;
echo "</li>";
}
echo "</ul>";
?>
</head>
<body>
<form action="companyhp6form1.php" method="post" id="form">
<div class="auto-style1">
<p class="tel-titile">
名前
</p>
<input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" />
</div>
<div class="auto-style1">
<button type="submit" id="submit" name="submit" class="auto-style4">
送信</button>
</div>
</form>
</body>
<script>
const form = document.querySelector('#form');
const name = document.querySelector('#name');
form.addEventListener('submit', function(event) {
let msg = "";
if (name.value == "") msg += "名前が入力されていません。\n";
if (msg == "") return; event.preventDefault(); alert(msg);
});
</script>
<script src="jquery-3.6.0.min.js"></script>
</html>
No.2ベストアンサー
- 回答日時:
こんにちは
>入力した内容をjavascriptで保持するようにしたいです。
技術的には、localstorage等を利用すること可能ですけれど、sessionを利用しているのにわざわざ二重帳簿を作るようなものです。
https://developer.mozilla.org/ja/docs/Web/API/We …
sessionを利用しているのですから、session変数を利用するのが普通ではないでしょうか。
https://techplay.jp/column/538
https://qiita.com/yuka_pon/items/94e59e28d92e5f4 …
>PHPの内容は変更したくないです。
出力をPHPで行っているので、何かの変更をすればPHPの変更は発生すると思いますけれど?
まぁ、外部スクリプトになっていて、スクリプト部分のみを変更するという考えはあるでしょうけれど、ご提示のソースではそのような構成になっているとも思えませんので。
>この質問で提示したコードは①入力フォームのコードのみです。
>字数制限で全て提示できません。
不完全な情報でご質問なさっても、正しい回答を得られる確率は低いです。
ざっと見たところ、入力の有無の確認を行っているだけのようなので、スクリプトなどを用いなくても、
<input type="text" name="name" placeholder="氏名を入力" value="" required />
としておくことでも、事足りそうな気がします。
また、ご質問には直接関係はありませんけれど、ご提示のソースではjqueryを読み込んでいるようですが、(省略されているのか)使っている形跡が見られません。
(もしも使用部分が省略されているとしても)最後に再度jqueryの読み込みがあるので、スクリプトが動作しない可能性がありそうに思われます。
使用しないスクリプトを読み込むことの意味もわかりませんし、同じものを二度読み込むのは無駄である以上に弊害がある可能性を懸念します。
※ いずれにしろ、PHPで出力している以上は、PHPのソースを一切変更しないで、何らかの処理を変えたいというのには無理があるのではないでしょうか?
No.1
- 回答日時:
>入力した内容をjavascriptで保持するようにしたいです。
とありますが、保持するだけならsessionStorageというのがあります。
https://developer.mozilla.org/ja/docs/Web/API/Wi …
しかしPHP側で保持しているのなら、重複してしまいます。
(あとから何か変更したくなったとき面倒になります)
PHP側で保持した値を取得するだけなら、
const name = document.querySelector('#name');
のあとに、
name.value
で取得できるのではないかと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- PHP php ログイン 1 2022/11/01 00:24
- PHP PHPで画像の渡しが上手く行きません。 1 2023/02/02 09:39
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【jQuery】input nameの文字列...
-
ボタンを押すとテキストボック...
-
ふりがな自動入力で姓名を分け...
-
二つの入力欄に、同時に同じ文...
-
フォームの一部をPOSTで送信で...
-
ラジオボタンでクリックした値...
-
出発駅A、到着駅Bを選択すると...
-
ファイル選択ダイアログが表示...
-
動的にTabindexの値を変えたい!
-
チェックボックスが選択させない
-
エクセル マクロ submitについて
-
ASP.NETでNAME属性を固定にしたい
-
tabindex値の設定
-
name属性のないformタグの、中...
-
name="shocd"はなんのタグでし...
-
return trueとreturn falseの用...
-
value内に変数を入れたい
-
プルダウン 項目が多いので先頭...
-
フォームが空欄の時にフォーム...
-
tableの任意行にfocusをあてる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jQuery】input nameの文字列...
-
javascriptの値をformのinput h...
-
テキストボックスの入力をリセット
-
ボタンを押すとテキストボック...
-
name属性のないformタグの、中...
-
JavaScriptにて動的に配列を作...
-
二つの入力欄に、同時に同じ文...
-
新しくフォルダを作成したい
-
ラジオボタンでクリックした値...
-
ASP.NETでNAME属性を固定にしたい
-
入力フォームに半角スペース以...
-
テキストボックスの値同士を比...
-
Javascriptでのbuttonのname属...
-
動的にTabindexの値を変えたい!
-
submitボタン押下時にPOSTされ...
-
ふりがな自動入力で姓名を分け...
-
cookie使用時にundefinedと表示...
-
name属性とid属性の違い。DOMの...
-
data.resultからデータを取り出...
-
doPostBack 関数について
おすすめ情報