I am working on a customer signup form which will first validate input feilds, after validation a XMLHttprequest will be initiated which will be received by express router and than data will be stored in data base, here are my code files.
HTML file Code
<form id="sign_up" onsubmit="return false">
<section class="sign_up_item">
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" placeholder="First Name" required />
</section>
<section class="sign_up_item">
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" placeholder="Last Name" required />
</section>
<section class="sign_up_item">
<label for="email">Email Address</label>
<input type="text" name="email" id="signup_email" placeholder="abc@xyz.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required />
</section>
<section class="sign_up_item">
<label for="mobile_number">Mobile Number</label>
<input type="text" name="mobile_number" id="mob_num" pattern="[0-9]{4}[-][0-9]{7}" placeholder="0334-2824412" required />
</section>
<section class="sign_up_item">
<label for="address">Address</label>
<input type="text" name="address" id="address" placeholder="Insert your address hre with nearby Landmark, Not More than 100 characters" required />
</section>
<section class="sign_up_item">
<label for="city">City</label>
<input type="text" name="city" placeholder="City" id="city" required />
</section>
<section class="sign_up_item">
<label for="password">Password</label>
<input type="password" name="password" placeholder="Password" id="password" required />
</section>
<section class="sign_up_item">
<label for="conf_password">Confirm Password</label>
<input type="password" name="conf_password" placeholder="Confirm Password" id="conf_password" required />
</section>
<div class="form_end">
<label for="endorsement">I have read and agreed to the terms and conditions</label>
<input type="checkbox" class="checkbox" name="endorsement" id="endorsement" required />
<p id="form_note"></p>
<br />
<button class="submit_button" onclick="signup_data_validation()" >Submit</button>
</div>
.js Code
// JavaScript source code
function signup_data_validation() {
const form = document.forms['sign_up'];
const fname = form['fname'].value;
const lname = form['lname'].value;
const signup_email = form['signup_email'].value;
const mob_num = form['mob_num'].value;
const address = form['address'].value;
const city = form['city'].value;
const password = form['password'].value;
const conf_password = form['conf_password'].value;
const endorsement = form['endorsement'].value;
let new_customer = {
fname: fname,
lname: lname,
signup_email: signup_email,
mob_num: mob_num,
address: address,
city: city,
password: password,
conf_password: conf_password,
endorsement: endorsement,
};
if(new_customer.password !== new_customer.conf_password) {
document.getElementById('form_note').innerHTML = "Current Password do not match Confirm Password";
}
else {
document.getElementById('form_note').innerHTML = "";
const xhr = new XMLHttpRequest();
const url = 'http://localhost:4001/customers';
const data = JSON.stringify(new_customer);
xhr.onreadystatechange = () => {
if(xhr.readyState === XMLHttpRequest.DONE) {
console.log("response received");
console.log(xhr.responseText);
}
}
xhr.open('POST', url);
xhr.send(data);
}
}
express.js code
const express = require('express');
const sqlite3 = require('sqlite3');
const db = new sqlite3.Database('./miclothing');
const app = express();
app.use(express.static('public')); // web resources location
const PORT = process.env.PORT || 4001;
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
next();
});
app.post('/customers', (req, res, next) => {
console.log("Customers post Request Received");
res.send("Done");
});
app.listen(PORT, () => {
console.log(`Sever is listening at ${PORT}`);
});
Note: port is listening successfully, however post request is not executed getting following error,
XHR failed loading: POST “http://localhost:4001/customers”.
What is going wrong please guide