11<?php
22
3- include_once __DIR__ . "/include.php " ;
3+ include_once __DIR__ . "/include/form .php " ;
44?>
55
66<!DOCTYPE html>
77<head>
88 <title>Form validation</title>
99 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
1010 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1">
11- <link href="style.css" rel="stylesheet" type="text/css">
11+ <link href="include/ style.css" rel="stylesheet" type="text/css">
1212</head>
1313<html>
1414 <body>
1515
16- <form method="post" action="<?= tasset ('tests/server.php ' , false , true );?> " class="form"
17- onsubmit="return submitForm(this)">
18- <h2>Form sample</h2>
19-
20- <div class="errorMSg mb-5 <?= $ form ->getClass () ?> ">
21- <?= $ form ->getMessage () ?>
22- </div>
16+ <form method="post" action="<?= tasset ('tests/include /server.php ' , false , true );?> " class="form"
17+ onsubmit="return submitForm(this)">
18+ <h2>Form sample</h2>
19+
20+ <div class="errorMsg mb-5 <?= $ form ->getClass () ?> ">
21+ <?= $ form ->getMessage () ?>
22+ </div>
2323
24- <?php csrf () ?>
24+ <?php csrf () ?>
2525
26- <div class="row">
27- <div class="">
28- <label for="html">Name</label>
29- <input type="text" name="name" value="<?= $ form ->old ('name ' ); ?> ">
30- </div>
31-
32- <div class="">
33- <label for="html">Email</label>
34- <input type="text" name="email" value="<?= old ('email ' ); ?> ">
35- </div>
36-
37- <div class="">
38- <label for="html">Age</label>
39- <input type="number" name="age" value="<?= old ('age ' ); ?> ">
40- </div>
41-
42- <div class="">
43- <label for="html">Loan Amount</label>
44- <input type="number" step="any" name="amount" value="<?= old ('amount ' ); ?> ">
45- </div>
46-
47- <div class="">
48- <label for="html">Message</label>
49- <textarea name="message" rows="5" style="resize:none;"
50- cols="81"><?= old ('message ' ); ?> </textarea>
51- </div>
52-
53- <div class="activities">
54- <p class="title">
55- Activities you're interested in:
56- </p>
26+ <div class="row">
27+ <div class="">
28+ <label for="html">Name</label>
29+ <input type="text" name="name" value="<?= $ form ->old ('name ' ); ?> ">
30+ </div>
31+
32+ <div class="">
33+ <label for="html">Email</label>
34+ <input type="text" name="email" value="<?= old ('email ' ); ?> ">
35+ </div>
36+
37+ <div class="">
38+ <label for="html">Age</label>
39+ <input type="number" name="age" value="<?= old ('age ' ); ?> ">
40+ </div>
41+
42+ <div class="">
43+ <label for="html">Loan Amount</label>
44+ <input type="number" step="any" name="amount" value="<?= old ('amount ' ); ?> ">
45+ </div>
46+
47+ <div class="">
48+ <label for="html">Message</label>
49+ <textarea name="message" rows="5" style="resize:none;"
50+ cols="81"><?= old ('message ' ); ?> </textarea>
51+ </div>
5752
58- <label for="reading">
59- Reading
60- <input type="checkbox" name="activities[]" value="reading" id="reading" <?= old ('activities.reading ' ) ? 'checked ' : '' ?> >
61- </label>
62- <label for="writing">
63- Writing
64- <input type="checkbox" name="activities[]" value="writing" id="writing" <?= old ('activities.writing ' ) ? 'checked ' : '' ?> >
65- </label>
53+ <div class="activities">
54+ <p class="title">
55+ Activities you're interested in:
56+ </p>
6657
67- <label for="terms" style="margin-top: 30px;">
68- Accept terms
69- <input type="checkbox" name="terms" id="terms"
70- value="accepted" <?= old ('terms ' ) ? 'checked ' : '' ?> >
71- </label>
72- </div>
58+ <label for="reading">
59+ Reading
60+ <input type="checkbox" name="activities[]" value="reading" id="reading" <?= old ('activities.reading ' ) ? 'checked ' : '' ?> >
61+ </label>
62+ <label for="writing">
63+ Writing
64+ <input type="checkbox" name="activities[]" value="writing" id="writing" <?= old ('activities.writing ' ) ? 'checked ' : '' ?> >
65+ </label>
7366
74- <button type="submit" class="btn mt-2">Submit</button>
67+ <label for="terms" style="margin-top: 30px;">
68+ Accept terms
69+ <input type="checkbox" name="terms" id="terms"
70+ value="accepted" <?= old ('terms ' ) ? 'checked ' : '' ?> >
71+ </label>
7572 </div>
76- </form>
7773
74+ <button type="submit" class="btn mt-2">Submit</button>
75+ </div>
76+ </form>
7877
79- <script>
80- function submitForm(form){
81- event.preventDefault();
78+ <script>
79+ function submitForm(form){
80+ event.preventDefault();
8281
83- let formData = new FormData(form);
82+ let formData = new FormData(form);
8483
85- // send via fetch
86- fetch(form.action, {
87- method: form.method, // POST
88- body: formData
89- })
90- .then(response => response.text())
91- .then(data => {
92- // parse the JSON response
93- // data = JSON.parse(data);
84+ // send via fetch
85+ fetch(form.action, {
86+ method: form.method, // POST
87+ body: formData
88+ })
89+ .then(response => response.text())
90+ .then(data => {
91+ // parse the JSON response
92+ data = JSON.parse(data);
9493
95- console.log(
96- data,
97- // data.response,
98- // data.message
99- );
100- return false;
101- // handle success/error response from server
102- if(data.status === "success"){
103- alert("Form submitted successfully ✅");
104-
105- } else {
106- alert("Error: " + data.message);
107- }
108- })
109- .catch(error => {
110- console.error("Error:", error);
111- });
112- }
113- </script>
94+ let msg = data.message;
95+ let div = document.querySelector('.errorMsg');
96+
97+ div.innerHTML = data.message;
98+ div.className = "errorMsg " + data.data.class;
99+
100+ // handle success/error response from server
101+ if(data.status === "success"){
102+
103+ }
104+ })
105+ .catch(error => {
106+ console.error("Error:", error);
107+ });
108+ }
109+ </script>
114110 </body>
115111</html>
0 commit comments