1+ <?php
2+
3+ include_once __DIR__ . "/include.php " ;
4+ ?>
5+
6+ <!DOCTYPE html>
7+ <head>
8+ <title>Form validation</title>
9+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
10+ <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">
12+ </head>
13+ <html>
14+ <body>
15+
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>
23+
24+ <?php csrf () ?>
25+
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>
57+
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>
66+
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>
73+
74+ <button type="submit" class="btn mt-2">Submit</button>
75+ </div>
76+ </form>
77+
78+
79+ <script>
80+ function submitForm(form){
81+ event.preventDefault();
82+
83+ let formData = new FormData(form);
84+
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);
94+
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>
114+ </body>
115+ </html>
0 commit comments