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);
});
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>
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.
I am new into PHP and Html , I have a form where I am able to post details using third party service.I want to make this form submission in such a way that after submission this should start pdf download automatically.It should perform 2 actions on same button click. I have gone through many solutions but I am not able to make this work. Here is my form
<div class="modal-body">
<div class="media-container-column" data-form-type="formoid">
<div data-form-alert="" hidden="" class="align-center" > Thanks for filling out the form use this link to Download </div>
<form class="mbr-form" action="https://mobirise.com/ " method="post" data-form-title="Mobirise Form"><input type="hidden" name="email" data-form-email="true" value="bUMCs/mtytHWYRo/XjN7tA1PqfT+NB00KjPTWZfuYXvKQmJxQUOr1gzeKJUJwLqxqXI/Euh3h4TzMmnq0FW5UjTC1AjsnumlJFTc7U5521K+f6PwqF4lRJdVha0cCPLW" data-form-field="Email">
<div data-for="name">
<div class="form-group">
<input type="text" class="form-control px-3" name="name" data-form-field="Name" placeholder="Name" required="" id="name-header15-c">
</div>
</div>
<div data-for="email">
<div class="form-group">
<input type="email" class="form-control px-3" name="email" data-form-field="Email" placeholder="Email" required="" id="email-header15-c">
</div>
</div>
<div data-for="phone">
<div class="form-group">
<input type="tel" class="form-control px-3" name="phone" data-form-field="Phone" placeholder="Phone" id="phone-header15-c">
</div>
</div>
<span class="input-group-btn"><button onClick="header.php" type="submit" class="btn btn-secondary btn-form display-4">Download</button></span>
</form>
</div>
</div>
This form submission is working fine, how can I start downloading pdf after this, any sample code in javascript or php would be helpful.Thanks
You need to add an id="SampleForm" in your form.
<div class="modal-body">
<div class="media-container-column" data-form-type="formoid">
<div data-form-alert="" hidden="" class="align-center" > Thanks for filling out the form use this link to Download </div>
<form id="SampleForm" class="mbr-form" action="https://mobirise.com/ " method="post" data-form-title="Mobirise Form"><input type="hidden" name="email" data-form-email="true" value="bUMCs/mtytHWYRo/XjN7tA1PqfT+NB00KjPTWZfuYXvKQmJxQUOr1gzeKJUJwLqxqXI/Euh3h4TzMmnq0FW5UjTC1AjsnumlJFTc7U5521K+f6PwqF4lRJdVha0cCPLW" data-form-field="Email">
<div data-for="name">
<div class="form-group">
<input type="text" class="form-control px-3" name="name" data-form-field="Name" placeholder="Name" required="" id="name-header15-c">
</div>
</div>
<div data-for="email">
<div class="form-group">
<input type="email" class="form-control px-3" name="email" data-form-field="Email" placeholder="Email" required="" id="email-header15-c">
</div>
</div>
<div data-for="phone">
<div class="form-group">
<input type="tel" class="form-control px-3" name="phone" data-form-field="Phone" placeholder="Phone" id="phone-header15-c">
</div>
</div>
<span class="input-group-btn"><button onClick="header.php" type="submit" class="btn btn-secondary btn-form display-4">Download</button></span>
</form>
</div>
</div>
Then you need to add some code to process download on form Submit event.
<script>
var pdfUrl = "https://example.com/link-to-your-pdf";
$('#SampleForm').on('submit', function () {
window.open(pdfUrl, '_blank');
});
</script>
You'll have to handle submission with Javascript, instead of the default one.
There is some documentation about sending form submission throught javascript:
https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript
I have 2 buttons for which I want to call same modal but the text on the modal should be changed depending on which button was clicked. How do I do that please?
<div>
<a class="button" data-open="new-modal"
(click)="confirmModal(studentInfo)>Edit</a>
<a class="button" data-open="new-modal"
(click)="confirmModal(studentInfo.id)>Delete</a>
</div>
Modal
<div class="reveal" data-reveal id="new-modal">
<h5>Edit Student Info?</h5> // I want to add "Delete student info
here too"
<div class="secondary button-group">
<a class="button" href="#">Yes</a>
<a class="button" href="#">No</a>
</div>
</div>
pass a second parameter to your confirmModal() function, and store the content in a variable accessible by the modal within your ts or js code, and use this variable to load relevant configuration in your modal
I have done bootstrap modal in different page means modal in another page(modal.html) and button in different page(career.php) it's working but same modal i want to link for multiple buttons. How to do that i am not getting
<script>
$(document).ready(function(e){
$('#btnModal') .click(function(){
//using ajaz post
$.post('modal.html' ,function(xx){
$('#tmpModal').html(xx) //fill div tmpmodal with modal.html content..!!
//calling modal
$('#testModal').modal('show');
})
})
});
</script>
<div class="modal fade" id="testModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal"><span>×</span></button>
<h4>Apply Now</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="exampleFormControlInput1">Role</label>
<input class="form-control" type="text" placeholder="Dest" readonly>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Full Name" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Email" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Phone</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Phone" required data-validation-required-message="Please enter your phone">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Comment</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlFile1">Upload File</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</div>
<div class="modal-footer">
<div class="btn btn-danger" data-dismiss="modal">Close</div>
<button class="btn btn-primary" onclick="contact_send();">SEND</button>
</div>
</div>
</div>
</div>
I've a form but it doesn't pass the parameters 'url' and 'USERNAME' to the next page. Is there something wrong?
I must use <button> instead of <input> for styling issues.
Here is the form:
<form action="/confirmation/index.php" method="post" class="form-wrap">
<div class="loader-wrap">
<div class="loader-txt">
</div>
</div>
<div class="field-set url-field">
<input type="text" name="url" data-placeholder="Your Website URL" maxlength="50" class="validate">.
<button name="url_btn" type="button" class="btn url-btn">Scan My Site!</button>
</div>
<div class="field-set email-field">
<input type="text" name="USERNAME" data-placeholder="Your E-mail" maxlength="50" class="validate">
<button name="email_btn" type="button" class="btn email-btn" style="width:174px;font-size:15px;">Send me Results!</button>
</div>
</form>
email_btn should be of type="submit" instead of type="button", so rather:
<button type="submit">Send me the results</button>
see here:
http://www.w3schools.com/tags/tag_button.asp
This should work with a submit Button!
(The extra php is to show that it works!)
<?php
if (isset($_POST['submitted'])) {
echo "form submitted";
}
?>
<form action="index.php" method="post" class="form-wrap">
<div class="loader-wrap">
<div class="loader-txt">
</div>
</div>
<div class="field-set url-field">
<input type="text" name="url" data-placeholder="Your Website URL" maxlength="50" class="validate">.
<button name="url_btn" type="button" class="btn url-btn">Scan My Site!</button>
</div>
<div class="field-set email-field">
<input type="text" name="USERNAME" data-placeholder="Your E-mail" maxlength="50" class="validate">
<button name="email_btn" type="button" class="btn email-btn" style="width:174px;font-size:15px;">Send me Results!</button>
<button name="submitted" type="submit">Send me the results</button> //Submit Button
</div>
</form>