I'm trying to do a login and signUp pages, the login page get all variables right while the signup only transfer the password for some reason.
App.JS:
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
// configure the app to use bodyParser()
app.use(bodyParser.urlencoded({extended: true,}));
app.use(bodyParser.json());
const port = process.env.PORT || 5555;
const usersSignup = [];
const { Client } = require("pg");
//Create static files
app.use(express.static(__dirname));
app.post("/sign-in", function (req, res) {
let email = req.body.email;
let pass = req.body.psw;
index = usersSignup.findIndex((x) => x.user === email && x.pass === pass);
if (index != -1) {
if (email == "Admin#g.com" && pass == "Admin") {
res.redirect("/contact");
}
res.send(
`Welcome!` + JSON.stringify(email) + "Password:" + JSON.stringify(pass)
);
console.log("Hello");
} else {
res.send("User not found");
console.log("User not found");
}
});
app.post("/sign-up", function (req, res) {
console.log(req.body);
var Fname = req.body.firstName;
var Lname = req.body.lastName;
var pass = req.body.Password;
var email = req.body.email;
var pCode = req.body.promoCode;
con.query("select * from users where email=$1", [email], (err, res) => {
var result = JSON.stringify(res.rows[1]);
if (result != null) {
console.log("User exists");
} else {
con.query(
"INSERT INTO users (Name,FamilyName,Email,PromoCode,Password) values($1,$2,$3,$4,$5)",
[Fname, Lname, email, pass, pCode]
);
}
});
SignUp form - req.body only get the password (psw) and nothing else... i tried to disable the modal but same problem.
the associated function are to check that both password are the same and to check password limits (6 digits,capital, etc...)
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>
Login form (Works fine) - all the data comes like it should.
<form method="POST" action="sign-in">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><img
src="/style/outline_account_box_black_18dp.png" alt=""></span>
</div>
<input type="email" class="form-control" id="email" name="email"
placeholder="Enter email" required>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><img
src="/style/outline_lock_black_18dp.png" alt=""></span>
</div>
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" title=" Must contain at least one number and one uppercase and lowercase letter and one special
char, and at least 6 or more characters" required>
</div>
<div class="g-recaptcha" data-sitekey="6LeryQAaAAAAACtRGmnGbDekQjszQXzXrH858eJe"></div><br>
<button type="submit" class="btn btn-primary" onclick="return alerts()">Log In</button>
<div class="sign-up"><br>
<hr>
<p><b>Need an account? Sign Up</b></p>
</div>
</form>
You forgot name attributes
<input type="text" class="form-control form-control-user" id="firstName"
placeholder="First Name">
Should be
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
HTML forms use name for sending data, not id
Do this for all inputs, also you wrote name="psw" on HTML but doing req.body.Password on server part, you need to correct this too.
Fixed HTML:
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName" name="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email" name="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password" name="Password"
placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode" name="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>
You didn't set name attribute for signup!
<form method="POST" action="sign-up">
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="text" class="form-control form-control-user" id="firstName" name="firstName"
placeholder="First Name">
</div>
<div class="col-sm-6">
<input type="text" class="form-control form-control-user" id="lastName" name="lastName"
placeholder="Last Name">
</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-user" id="email" name="email"
placeholder="Email Address">
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" onclick="validFunc()" class="form-control" id="Password"
name="psw" placeholder="Password" required>
</div>
<div class="col-sm-6">
<input type="password" class="form-control form-control-user" id="RePassword" name="RePassword"
placeholder="Repeat Password">
</div>
</div>
<div class="form-group">
<input type="test" class="form-control form-control-user" id="promoCode" name="promoCode"
placeholder="Promo Code">
</div><br>
<button type="button" onclick="displayForm()" class="btn btn-primary" data-toggle="modal"
data-target="#ModalMessage">Sign Up</button>
<div class="signUp"><br>
<hr>
<p><b>Already have an account? Sign In</b></p>
</div>
<!-- Modal -->
<div class="modal fade" id="ModalMessage" tabindex="-1" role="dialog"
aria-labelledby="ModalMessageLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalMessageLabel">Check details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="MBody">
Please review the details and confirm:
<p id="message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"
onclick="sendMail()">Confirm</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
</form>
Can you post the content of validFunc() that you used for onClick of password, and also the content of displayForm() used on form submit? I suspect that the missing fields somehow got undefined with your content checking code.
Related
This is the modal form that show after clicking the view button in my table.
Every field already have data value because I am updating a list.
Now I want to disabled the Approve button base on status which is "Pending" and "Approved"
<form action="code_book.php" method="POST">
<div class="modal fade" id="updatemodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<input type="hidden" name="update_id" id="update_id">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Appointment Status</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- start modal content -->
<div class="modal-body">
<div class="mb-3">
<label for="#service" class="col-md-6">Appointment Date</label><label for="#description" class="col-md-6">Appointment Time</label><br>
<input type="text" class="col-md-6 inputdesign" name="date" id="date" readonly>
<input type="text" class="col-md-6 inputdesign" name="time" id="time" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-6">Name</label><label for="#description" class="col-md-6">Contact</label><br>
<input type="text" class="col-md-6 inputdesign" name="username" id="username" readonly>
<input type="text" class="col-md-6 inputdesign" name="contact" id="contact" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-6">Pet Name</label><label for="#description" class="col-md-6">Service</label><br>
<input type="text" class="col-md-6 inputdesign" name="bookpet_id" id="bookpet_id" readonly>
<input type="text" class="col-md-6 inputdesign" name="service_id" id="service_id" readonly>
</div>
<div class="mb-3">
<label for="#service" class="col-md-12">Complaint</label>
<input type="text" class="form-control inputdesign" name="complaint" rows="3" id="complaint" readonly>
</div>
<div class="mb-3">
<label for="#description" style="margin-top: 10px;" class="form-label">Status</label>
<input type="text" class="form-control inputdesign" name="status" id="status" placeholder="Enter the service" readonly>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="updatedata" id="updatedata" class="btn btn-dark button">Approve</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" >Cancel</button>
</div>
</div>
</div>
</div>
You need some easy JavaScript for that, assuming you're just initializing the button once because the input is readonly.
$(document).ready(function() {
$('#datatableid tbody').on('click', '.updatebtn', function() {
$('#updatemodal').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#update_id').val(data[0]);
$('#date').val(data[1]);
$('#time').val(data[2]);
$('#username').val(data[3]);
$('#contact').val(data[4]);
$('#bookpet_id').val(data[5]);
$('#service_id').val(data[6]);
$('#complaint').val(data[7]);
$('#status').val(data[8]);
// disable input if not approved
$('#updatedata').prop('disabled', data[8] !== 'Approved');
});
});
<input type="text" id="status" placeholder="Enter the service" value="Pending" readonly />
<button type="submit" name="updatedata" id="updatedata" class="btn btn-dark button">Approve</button>
My jQuery is not working well if placed on the same file with the html the output will be just one value password, and email will not be displayed, but if placed on a different file when i click on the Login button the values console.log(datatopost) will disappear (like refreshing) on the console.
HTML Code
<!-- Login Modal -->
<form id="loginForm" method="post">
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Login to your Account</h5>
<!-- SIGN IN ERROR MESSAGE-->
<div id="loginerrorMessage"></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="loginemail" class="sr-only">Email address</label>
<input type="email" class="form-control" id="loginemail" aria-describedby="emailHelp" placeholder="Enter email" autocomplete="on">
</div>
<div class="form-group">
<label for="loginpassword" class="sr-only">Confirm Password</label>
<input type="password" class="form-control" name="password" id="loginpassword" placeholder="Enter Password" autocomplete="on">
</div>
<h6>Login as:</h6>
<div class="form-check form-check-inline">
<input type="radio" name="loginRadio" class="form-check-input" id="checkbank" value="bank">
<label class="form-check-label" for="checkbank">Bank</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="loginRadio" id="checkcustomer" value="customer">
<label class="form-check-label" for="checkcustomer">Customer</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="loginRadio" id="checkadmin" value="admin">
<label class="form-check-label" for="checkadmin">Admin</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary mr-auto" data-target="#signupModal" data-toggle="modal" data-dismiss="modal">Register</button>
<input type="submit" value="Login" class="btn btn-info" name="login">
<!-- <button type="submit" class="btn btn-info">Login</button> -->
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
jquery code
$(document).ready(function(){
$('#loginForm').on('submit', function(e){
//Stop the form from submitting itself to the server.
e.preventDefault();
let datatopost = $(this).serializeArray();
console.log(datatopost);
});
});
Please I'm just a Beginner...
The email doesn't appear because you didn't set name="email"
Correct is:
<input type="email" name="email" class="form-control" id="loginemail" aria-describedby="emailHelp" placeholder="Enter email" autocomplete="on">
Result:
[{
name: "email",
value: "test#test.it"
}, {
name: "password",
value: "passwordtest"
}, {
name: "loginRadio",
value: "bank"
}]
In Chrome, right click in the console to reveal a menu with "Preserve Log upon Navigation" as an option. Selecting this will keep your console content.
Try it out and run your code again.
I'm building a website and tried to embed a form as a partial view inside a modal window. I succeeded in getting the form inside the modal, but it only appears on the left half of the modal body. Does anyone know a fix for this?
I never set the col-md-6 anywhere so there i no reason for it to appear this way. I even tried to exactly copy some modal examples from the internet that appeared to be correct, but i had the same problem.
Modal window that the form is loaded in:
<!-- Modal -->
<div id="addLeverancierModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Leverancier toevoegen</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuleer</button>
<button type="button" class="btn btn-success">Opslaan</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Modal form(partial view):
<form role="form">
<div class="form-group">
<label>Leveranciernummer</label>
<input type="email" class="form-control" id="leveranciernummerInput" placeholder="Leveranciernumer">
</div>
<div class="form-group">
<label>Naam</label>
<input class="form-control" id="leveranciernaamInput" placeholder="Naam">
</div>
<div class="form-group">
<label>Straatnaam</label>
<input class="form-control" id="straatnaamInput" placeholder="Straatnaam">
</div>
<div class="form-group">
<label>Huisnummer</label>
<input class="form-control" id="huisernummerInput" placeholder="Huisnummer">
</div>
<div class="form-group">
<label>Postcode</label>
<input class="form-control" id="postcodeInput" placeholder="Postcode">
</div>
<div class="form-group">
<label>Plaatsnaam</label>
<input class="form-control" id="plaatsnaamInput" placeholder="Plaatsnaam">
</div>
<div class="form-group">
<label>Land</label>
<input class="form-control" id="landInput" placeholder="Land">
</div>
<div class="form-group">
<label>VAT</label>
<input class="form-control" id="vatInput" placeholder="VAT">
</div>
<div class="form-group">
<label>Telefoon</label>
<input class="form-control" id="telefoonInput" placeholder="Telefoon">
</div>
<div class="form-group">
<label>Email</label>
<input class="form-control" id="emailInput" placeholder="Email">
</div>
<div class="form-group">
<label>Email extra</label>
<input class="form-control" id="emailExtraInput" placeholder="Email extra">
</div>
</form>
JQuery to load form inside modal:
var GetLeverancierForm = function () {
$.ajax({
type: "GET",
url: baseURL + '/AddLeverancier',
success: function (data) {
$(".modal-body").html(data);
}
});
}
Base container all content is loaded in(all html files):
<div class="container body-content">
#RenderBody()
</div>
Picture of how the modal appears:
Design your form like this
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
</form>
It would look like this :
I thought Data-Parsley is supposed to stop form submit when errors are found. When I submit the following form, I briefly see the errors caught by data-parsley, but then the form action goes through. What am I missing here?
<div id="registerreg" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Register...</h4>
</div>
<div class="modal-body">
<form action="<?php echo 'register_success.php'; ?>" method="POST" name="registration_form" id="registration_form" class="margin-bottom-0">
<div class="form-group">
<label>First Name:</label>
<input type="text" id="first" name="first" class="form-control input-lg" placeholder="First Name" required />
</div>
<div class="form-group">
<label>Last Name:</label>
<input type="text" id="last" name="last" class="form-control input-lg" placeholder="Last Name" required />
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" class="form-control input-lg" placeholder="Email Address" id="emailreg" name="emailreg" onkeyup="checkvalid()" data-parsley-trigger="change" required />
<div id="emailwarning" style="color:red;"></div>
</div>
<div class="form-group">
<label>Password: (At least 6 charactors with 1 number)</label>
<input type="password" id="passwordreg" name="passwordreg" class="form-control input-lg" placeholder="Password" data-parsley-minlength="6" data-parsley-pattern="/^[a-zA-Z0-9., ]*[0-9]+[a-zA-Z0-9., ]*$/" title="Passwords must be at least 6 characters long, contain at least one uppercase letter (A..Z), at least one lower case letter (a..z), and at least one number (0..9)"/>
</div>
<div class="form-group">
<label>Repeat Password:</label>
<input type="password" name="confirmpwd" id="confirmpwd" class="form-control input-lg" placeholder="Repeat Password" data-parsley-equalto="#passwordreg" data-parsley-error-message="The entered text does not match the password field."/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" id="registerbutton" class="btn btn-primary" onclick="return regformhash(this.form, this.form.passwordreg);" value="Register" >
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$('#registration_form').parsley();
</script>
The onclick event in the submit button is overriding data parsley functions. Removing the onclick event from the submit button and letting data parsley fire the events solved the problem.
changed ...
<input type="submit" id="registerbutton" class="btn btn-primary" onclick="return regformhash(this.form, this.form.passwordreg);" value="Register" >
to...
<input type="submit" id="registerbutton" class="btn btn-primary" value="Register" >
and ...
$('#registration_form').parsley();
to....
$('#registration_form').parsley().on('form:success', function() {
var form = document.getElementById('registration_form');
var passwordreg = form.passwordreg;
return regformhash(form, passwordreg);
});
It seems that my submit button is not activating the ng-click angular directive and I cannot figure out why. It seems that every other person that had this problem didn't include their submit button inside of their form, and I'm 99% sure I did that.
<div class="modal fade" id="subModal" ng-controller="SubscriberController" ng-controller-as="subCtrl">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">× </span><span class="sr-only">Close</span></button>
<h2 class="modal-title">Subscribe</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="well">
<form ng-submit="console.log('submit')">
<div class="form-group">
<label for="subscriber-name" class="control-label"><strong>Name:</strong></label>
<input type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
</div>
<div class="form-group">
<label for="subscriber-email" class="control-label"><strong>Email:</strong></label>
<input type="email" class="form-control" ng-model="subCtrl.subData.email" placeholder="johndoe#example.com" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success btn-lg btn-block"><i class='fa fa-envelope'></i> Subscribe</button>
</div>
<div re-captcha ng-model="subCtrl.subData.captcha"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You need to put something like
<input ng-model="myForm.email" type="email" class="form-control" id="subCtrl.subData.email" placeholder="johndoe#example.com" required>
and
<input ng-model="myForm.name" type="text" class="form-control" ng-model="subCtrl.subData.name" placeholder="John Doe" required>
into your inputs, and give your form a name attribute
<form name="myForm" ng-submit="submit()">
plnkr: http://plnkr.co/edit/KRmZkPS6t4ANmAHwTevQ