I need help in figuring out what's happening with my confirmation message when the form submits. I'm creating a contact form with Bootstrap using jQuery, AJAX and PHP (mail function) to validate it. I want the form to hide and then display the confirmation message but for some reason, when the form submits, the confirmation message shows at the bottom of the form briefly (for 2 seconds) before hiding and then displaying the confirmation message. I can't figure out why this is happening.
Here's my HTML code:
<div id="contact" class="container-fluid">
<div class="col-md-6 col-md-offset-3 col-lg-6 col-md-offset-3 container-backdrop ">
<form data-toggle="validator" role="form" action="php/contact.php" id="contactForm" method="post">
<div class="row">
<h1 class="form">Say Hello!</h1>
<br>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="fullname" placeholder="Full Name" required type="text">
<div class="help-block with-errors"></div>
</div>
<div class="col-xs-6 col-md-6 form-group">
<input class="form-control" id="email" placeholder="Email" required type="email">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<input class="form-control" id="subjectline" placeholder="Subject" required type="text">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12 form-group">
<div class="row">
<textarea class="form-control input-lg" id="message" name="Message" rows="6" placeholder="Message" required></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="btn-group-wrap">
<div class="btn-group">
<div class="col-md-4">
<button class="btn btn-success btn-lg" type="submit">Submit</button>
</div>
</div>
</div>
</form>
<div id="msgSubmit" class="h3 text-center hidden">Message sent! Thanks for stopping by!</div>
</div>
</div>
Here's the jQuery code:
$(document).ready(function() {
$("#contactForm").validator().on("submit", function(event) {
if (event.isDefaultPrevented()) {} else {
event.preventDefault();
$("#msgSubmit").removeClass("hidden");
submitForm();
}
});
});
function submitForm() {
var name = $("#fullname").val();
var email = $("#email").val();
var subjectline = $("#subjectline").val();
var message = $("#message").val();
// Initiate Variables With Form Content
$.ajax({
type: "POST",
url: "php/contact.php",
data: "fullname=" + fullname + "&email=" + email + "&message=" + message + "&subjectline" + subjectline,
success: function(text) {
$("#msgSubmit").removeClass("hidden");
1000;
$("#contactForm").hide();
}
});
}
You are displaying the confirmation message before making the ajax request, and hiding the form after receiving the response, which explains what you're describing.
You can fix it by displaying the confirmation message and hiding the form at the same time:
$(document).ready(function() {
$("#contactForm").validator().on("submit", function(event) {
if (event.isDefaultPrevented()) {
} else {
event.preventDefault();
// note here
submitForm();
}
});
});
function submitForm(){
var name = $("#fullname").val();
var email = $("#email").val();
var subjectline = $("#subjectline").val();
var message = $("#message").val();
// Initiate Variables With Form Content
$.ajax({
type: "POST",
url: "php/contact.php",
data: "fullname=" + fullname + "&email=" + email + "&message=" + message + "&subjectline" + subjectline,
success : function(text){
$("#msgSubmit" ).removeClass("hidden");
1000;
$("#contactForm").hide();
$("#msgSubmit").removeClass("hidden"); // and here
}
});
}
Related
I have a problem validating a form with bootstrap novalidate.
Some form fields include the "required" tag and others do not.
To verify, I submit the form with no data and the 'was-validated' class makes all the fields validated, the ones with the "required" tag are marked in red and the others in green.
The idea is to specify which fields to validate instead of the entire form.
Could you help me please?
Form
<form id="Data" method="POST" class="needs-validation mt-0" novalidate>
<div class="row mb-1">
<div class="col-lg-12 ">
<div class="form-group">
<label class="d-block font-weight-semibold">Name: <span class="text-danger">*</span></label>
<input type="text" id="name" name="Name" class="form-control" autocomplete="off" required>
</div>
</div> <!-- / col -->
</div> <!-- / row-->
<div class="row mb-1">
<div class="col-lg-12 ">
<div class="form-group">
<label class="d-block font-weight-semibold">Lastname: <span class="text-danger">*</span></label>
<input type="text" id="lastname" name="lastname" class="form-control" autocomplete="off" required>
</div>
</div> <!-- / col -->
</div> <!-- / row-->
<div class="row mb-1">
<div class="col-lg-12 ">
<div class="form-group">
<label class="d-block font-weight-semibold">Street: <span class="text-danger">*</span></label>
<input type="number" id="Street" name="Street" class="form-control">
</div>
</div> <!-- / col -->
</div> <!-- / row-->
</form>
JS
<script type="text/javascript">
$('#Data').on('submit', function(e){
e.preventDefault();
var form = document.getElementById('Data');
if (!form.checkValidity()) {
e.preventDefault();
e.stopPropagation();
}
else {
$.ajax({
//url: "",
type: $('#Data').attr('method'),
data: $('#Data').serialize(),
//dataType: 'json',
beforeSend: function(){ },
success:function(response) {
if (response.success == true) {
}
else {
}
}
})
}
$('#Data').addClass('was-validated');
});
</script>
Call checkValidity() for each field that need checking, not the complete form:
var formFlag = true;
var nameField = document.getElementById("name");
if (!nameField.checkValidity()) {
nameField.classList.add("is-invalid");
formFlag = false;
}
var lastnameField = document.getElementById("lastname");
if (!lastnameField.checkValidity()) {
lastnameField.classList.add("is-invalid");
formFlag = false;
}
if (!formFlag) {
e.preventDefault();
e.stopPropagation();
return;
} else {
I am fairly new to HTML and JavaScript and I wanted to create a form and let user to fill in data. After pressing submit button, the form should be posting the form data to formspree.io and store into session storage together. But the problem is I can't do it both together. Is there any way to fix this? Thank you.
HTML
<form id="formset" class="main_form" action="https://formspree.io/[post-id]" method="POST">
<div class="row">
<div class="col-md-12 ">
<input class="contactus" placeholder="Full Name" type="text" id="fullname">
</div>
<div class="col-md-7">
<input class="contactus" placeholder="Email" type="tel" id="email">
</div>
<div class="col-md-7">
<input class="contactus" placeholder="Phone Number" type="text" id="phonenumber">
</div>
<div class="col-md-12">
<textarea class="contactus1" placeholder="Message" type="text" id="message"></textarea>
</div>
<div class="col-md-12">
<button class="send_btn" type="submit" id="submitform">Send</button>
</div>
</div>
</form>
p.s. the form ID of formspree is censored.
JavaScript
$(function() {
$("form").submit(function (event) {
event.preventDefault();
sessionStorage.clear();
var fullname = $("#fullname").val();
var email = $("#email").val();
var phonenumber = $("#phonenumber").val();
var message = $("#message").val();
console.log(fullname);
var dataset = {
fullname,
email,
phonenumber,
message
}
sessionStorage.setItem('formcontent', JSON.stringify(dataset));
});
});
The modal form submits, returns formSuccess, sends the email, returns the signup alert, but the modal does not hide. Any suggestions?
The modal html:
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="signupModal" aria-hidden="true">
<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">Provide a few details and we'll be in touch...</h4>
</div>
<div class="modal-body">
<form id="contactForm" role="form">
<input type="hidden" id="theme" name="theme" value="flatly"/>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Your name" required>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Your email address" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Have a question or comment?" required></textarea>
</div>
</div>
<div class="modal-footer">
<button id="form-submit" type="submit" class="btn btn-success">Sign Up</button>
</div>
</form> <!-- add tag v_07 -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
The signup alerts html:
<div class="container form-message">
<div class="row">
<div id="signupSuccess" class="alert alert-success" style="display:none">
<p id="signupSuccessText">Thanks for signing up for preview access, we'll be in touch! In the meantime join us on Twitter, Facebook, and LinkedIn.</p>
</div>
<div id="signupError" class="alert alert-info" style="display:none">
<p id="signupErrorText">Well this is embarrassing. It looks like we're having trouble. While we fix this, we can be reached at info#timbercheck.net</p>
</div>
</div>
</div>
And here is the code from js file.
$("#contactForm").submit(function(event){
event.preventDefault();
submitForm();
});
function submitForm(){
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
}
}
});
};
function formSuccess(){
$("#signupSuccess").show();
$("#signupModal").modal('hide'); // add v_07
};
function formError(){
$("#signupError").show();
$("#signupModal").modal('hide'); // add v_07
};
You should add data-dismiss="modal" instead on your button because you are anyway going to show another modal.
EDIT : Change type from submit to button
<button id="form-submit" type="button" class="btn btn-success" data-dismiss="modal">Sign Up</button>
And try this,
$("#form-submit").click(function(event){
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
}
}
});
};
function formSuccess(){
$("#signupSuccess").show();
$("#signupModal").modal('hide'); // add v_07
};
function formError(){
$("#signupError").show();
$("#signupModal").modal('hide'); // add v_07
};
Instead of..
$('#myModal').modal('hide')
This worked...
$('#myModal').hide();
$('.modal-backdrop').hide();
Source: https://stackoverflow.com/a/29560331/7069248
Could be related to version of Bootstrap
This solution works for me:
setTimeout(function(){
$('#close-modal').click();
$('#close-modal').click();
},200);
I have written a code to pass values from a form using ajax but the values passed to another php page is not getting displayed there. I want to display the values passed in email.php file and send it as a mail to a email-id.
My script :
$(function() {
$('#send_message').on('click', function(e) {
var name = $('#exampleInputName1').val();
var email = $('#exampleInputEmail1').val();
var tel = $('#exampleInputTelephone1').val();
var cn = $('#exampleInputCountry1').val();
var message = $('#exampleInputMessage1').val();
e.preventDefault();
$.ajax({
type: 'post',
url: 'php/email.php',
data: {
name: name,
email: email,
tel: tel,
cn: cn,
message: message
},
success: function(data) {
alert(message);
}
});
});
});
html page:
<form name="contactForm1" id='contact_form1' method="post" action='php/email.php'>
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName1" placeholder="name">
</div>
<div class="form-group col-sm-12 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail1" placeholder="email address">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="telephone" id="exampleInputTelephone1" placeholder="phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="Country" id="exampleInputCountry1" placeholder="Country">
</div>
<div class="form-group col-sm-12 padd">
<textarea class="form-control" name="message" rows="3" id="exampleInputMessage1" placeholder="message"></textarea>
</div>
</div>
<div class="form-group col-xs-12 padd">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div>
<!-- success message -->
<div id='mail_fail' class='error' style="display:none;">Sorry, error occured this time sending your message.
</div>
<!-- error message -->
</div>
<div class="form-group col-xs-8 padd" id="recaptcha2"></div>
<div class="form-group col-sm-4 padd" id='submit'>
<input type="submit" id='send_message' name="sendus" class="btn btn-lg costom-btn" value="send">
</div>
</form>
email.php
<?php
$temp = $_POST['name'];
echo $temp;
?>
Can anyone suggest how to do this ?
Why does my form shift down and a little to the right when validate.js displays an error? I just can't figure it out and where I can adjust this. I am using bootstrap. I'd really appreciate any help. Thanks.
The jquery
$(document).ready(function(){
$("#message").hide();
//Define your validation rules.
$("#bill_cost").validate({
expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
message: "error"
});
//Define the event that will occur when the entire form is validated (on form submission)
$('#myform').validated(function(){
var formdata = $('#myform').serialize();
//Post form data
$.post('../php_includes/insert.php', formdata, function(data){
//Process post response
$("#message").html(data);
$("#message").fadeIn(500);
$("#message").fadeOut(500);
});
//Reset Form
$('#myform')[0].reset();
});
});
This is the form
<form class="form-inline" action="" id="myform" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="bill_cost"></label>
<div class="col-md-8">
<input id="bill_cost" name="bill_cost" type="text" placeholder="Bill Cost" class="form-control input-lg" required>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="submit1"></label>
<div class="col-md-4">
<button type="submit" id="submitButtonId" name="submit1" class="btn btn-primary btn-xl">Submit</button>
</div>
</div>
</form>