I've created a form that is used to review a person on a website, however when the form is submitted nothing happens and console is showing a 'Maximum Call Stack Exceeded'. Hopefully someone can help point out the error in my code stopping this from working. Here is the form code:
<form id="fReviewMe" method="post" action="/process/review-p.cfm" enctype="multipart/form-data" style="display:none">
<label style="padding-top:10px"><i class="fa fa-asterisk magenta"></i> Your Name:</label>
<input type="text" name="uname" id="uname" class="span8" placeholder="Please tell us your name">
<label><i class="fa fa-asterisk magenta"></i> Your Business Name:</label>
<input type="text" name="business" id="business" class="span8" placeholder="Please tell us your business name">
<label><i class="fa fa-asterisk magenta"></i> Your Review:</label>
<textarea name="reviewmsg" id="reviewmsg" class="span8" rows="8" placeholder="Please add your review in here"></textarea>
<!--- form errors --->
<div id="dFormErrors" class="row" style="display:none;padding-bottom:20px;">
<span id="sEMessage" class="pull-right"></span>
<i class="fa fa-asterisk magenta pull-right"></i>
</div>
<!--- form buttons --->
<div id="dButtonsReviewForm" class="row">
<a onClick="checkForm()" name="submit" class="cta pull-right">Submit</a>
Cancel
</div>
<!--- form saving --->
<div id="dSavingReviewForm" style="display:none">
<span class="pull-right hibuBtn" style="cursor:wait"><i class="fa fa-spinner fa-spin"></i> Saving</span>
</div>
Here is the JS code:
/* intercept submit event */
$( "#fReviewMe" ).submit(function(event) {
checkForm();
event.preventDefault();
});
/* form validation */
function checkForm(){
var errors = 0;
var cuname = $('#uname').val();
var ccompany = $('#business').val()
var creview = $('#reviewmsg').val()
var cstars = $('#rStar').val()
var eMessage = "";
$('#dFormErrors').hide();
$('input').removeClass('validFalse');
$('textarea').removeClass('validFalse');
if ($('#tnc').is(':checked')) {
}
else{
eMessage = "Please tick to accepts out terms and conditions";
errors++;
}
if(cstars.length < 1){
$("input").blur();
$("textarea").blur();
eMessage = "Please choose a star rating";
errors++;
}
if(creview.length < 1){
$('#reviewmsg').focus();
$('#reviewmsg').addClass('validFalse');
eMessage = "Please add your review";
errors++;
}
else{
$('#reviewmsg').addClass('validTrue');
}
if(ccompany.length < 1){
$('#business').focus();
$('#business').addClass('validFalse');
eMessage = "Please tell us your business name";
errors++;
}
else{
$('#business').addClass('validTrue');
}
if(cuname.length < 1){
$('#uname').focus();
$('#uname').addClass('validFalse');
eMessage = "Please tell us your name";
errors++;
}
else{
$('#uname').addClass('validTrue');
}
/* check errors and submit */
if(errors > 0){
$('#dFormErrors').slideDown();
$('#sEMessage').html(eMessage)
}
else{
$('#dButtonsReviewForm').hide();
$('#dSavingReviewForm').show();
$('#fReviewMe').submit();
}
}
Thanks in advance
Replace $('#fReviewMe').submit(); with:
$('#fReviewMe')[0].submit();
calling DOM node method submit to avoid submit jQuery handler 'loop'.
Related
I am trying to save data to a table, but it is supposed to submit if everything is good
JAVASCRIPT:
const formm = document.querySelector('#CreateAccount')
const school = document.querySelector('#skool');
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const pwd = document.querySelector('#password');
const conf = document.querySelector('#confpassword');
formm.addEventListener("submit", (event) => {
validateForm();
if(result == true){
formm.submit();
console.log(2);
}else{
event.preventDefault();
console.log(30);
}
console.log(30);
});
function isFormValid(){
const inputscontainers = document.querySelectorAll('.inputs')
let result=true;
inputscontainers.forEach((container) => {
if(container.classList.contains("error")){
return false;
}})
return result;
}
function validateForm(){
if(username.value.trim() == ''){
setError(username, 'Name cannot be empty');
}else if(username.value.trim() < 5){
setError(username, 'Idrc');
console.log(3);
}
else{
setSuccess(username);
}
if(email.value.trim() == ''){
setError(email, 'You forgot to fill in your email.');
}
else if(isEmailValid(email.value)){
setSuccess(email);
}else{
setError(email, "Provide a valid email");
}
if(pwd.value.trim()==''){
setError(pwd, "Password can't be empty");
}else if(pwd.value.trim().length<6 || pwd.value.trim().length>20){
setError(pwd, 'Length must be minimum 6 characters and max 20.');
}else{
setSuccess(pwd);
}
if(conf.value.trim() == ''){
setError(conf, 'This is an empty password');
}else if(conf.value !== pwd.value){
setError(conf, 'Passwords dont match');
}
else{
setSuccess(conf);
}
}
function setError(elementr, errorMessage){
const parents = elementr.parentElement;
parents.classList.add("error");
parents.classList.remove("success");
const paragraph = parents.querySelector('p').textContent = errorMessage;
}
function setSuccess(elementr){
const parents = elementr.parentElement;
parents.classList.add("success");
parents.classList.remove("error");
}
function isEmailValid(email){
const reg =/^(([^<>()[\]\.,;:\s#\"]+(\.[^<>()[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i;
return reg.test(email);
}
HTML
<form id="CreateAccount" action="techer.php" method="GET">
<div class="main">
<div class="Title">
<h1>Enter your details.</h1>
</div>
<div class="inputs">
<label for="skool">SchoolName:</label>
<input type="text" id="skool" placeholder ="Put the school name" name="skool"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<div class="inputs">
<label for="username">Username:</label>
<input type="text" id="username" placeholder ="Username" name="username">
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p id="p">Error Message</p>
</div>
<div class="inputs">
<label for="password">Password</label>
<input type="password" id="password" placeholder =" Password" name="password"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p id="p">Error Message</p>
</div>
<div class="inputs">
<label for="confpassword">Confirm Password</label>
<input type="password" id="confpassword" placeholder =" Confirm Password" name="confpassword"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<div class="inputs">
<label for="email">Email:</label>
<input type="email" id="email" placeholder ="Email" name="email"></input>
<i class="fa-solid fa-circle-xmark"></i>
<i class="fa-solid fa-circle-check"></i>
<p>Error Message</p>
</div>
<button class="submitbtn" type="submit">Submit</button>
</div>
</div>
</form>
As far as the eye can see, there are no errors, and it is not saving data to my php database, which is worrying. My expected result is for, when everything is correct, the from to be submitted then redirected to a php file! But what is happening, even if everything in the form is correct, it wont submit. Please HELP!!
Try adding, at the end of validateForm function:
return isFormValid();
then in your submit listener, change
validateForm();
to
let result = validateForm();
This is a javascript code in the HTML file, there is also a mail.php file.
Main:
I'm trying to create an alert function using "SweetAlert".
I want the error message to show up when the form is not validated and the success message when it is (email sent).
Extra:
When the form is validated and the success message shows, the page reloads. Can the page reload only when I click on the "OK" button in the popup?
<form class="contact100-form validate-form alert" action="mail.php" method="POST">
<span class="contact100-form-title">
Contact
</span>
<div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate="Name is required">
<span class="label-input100">Your Name</span>
<input class="input100" type="text" name="name" placeholder="Enter your name">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 rs1-wrap-input100 validate-input" data-validate = "Valid email is required: ex#abc.xyz">
<span class="label-input100">Email</span>
<input class="input100" type="text" name="email" placeholder="Enter your email addess">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Message is required">
<span class="label-input100">Message</span>
<textarea class="input100" name="message" placeholder="Your message here..."></textarea>
<span class="focus-input100"></span>
</div>
<div class="container-contact100-form-btn">
<button class="contact100-form-btn">
<span>
Send
<i class="fa fa-long-arrow-right m-l-7" aria-hidden="true"></i>
</span>
</button>
</div>
</form>
$('.alert').on('submit', function validateForm() {
var name = document.forms["Form"]["name"].value;
var email = document.forms["Form"]["email"].value;
var message = document.forms["Form"]["message"].value;
if (name == "" || email== "" || message == "" ) {
swal("Great!", "We'll get back to you soon!", "success");
swal("Oops!", "Fill the blanks correctly!", "error" );
}
});
Right now, I'm getting an error message popup when the form is both not filled (not validated) and filled (validated form is submitted and I received the email).
This is because you have both the alerts in the same block.
Try this:
if (name == "" || email== "" || message == "" ) {
swal("Oops!", "Fill the blanks correctly!", "error" );
}
else
swal("Great!", "We'll get back to you soon!", "success");
As, I see your code, there's no mention of "Form" in there..
Edit your code with this..
<form class="contact100-form validate-form alert" name="Form" ..then the rest of code
SweetAlert uses promises to keep track of how the user interacts with the alert.
If the user clicks the confirm button, the promise resolves to true. If the alert is dismissed (by clicking outside of it), the promise resolves to null.
swal("Great!", "We'll get back to you soon!", "success")
.then((value) => {
if(!value) {
return false;
}
});
i'm working on a email sending function on a project. here when i fill the form and after sending it the web site page getting refresh and showing white background page. i need to prevent that from the refreshing and submit the form. here i'l attach the codes and can someone tell me the answer for this question.
HTML code for form
<form class="form-vertical" onsubmit="return sendEmail();" id="tell_a_friend_form" method="post" action="index.php?route=product/product/tellaFriendEmail" enctype="multipart/form-data">
<div class="form-group ">
<label class="control-label ">Your Name <span >* </span> </label><br>
<div class="form-group-default">
<input type="text" id="senders_name" name="sender_name" value="" class="form-control input-lg required" >
</div>
</div>
<div id="notify2" class="">
<div id="notification-text2" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<div class="form-group ">
<label class="control-label ">Your Email <span >* </span> </label><br>
<div class="form-group-default">
<input type="text" id="sender_email_ID" name="sender_email" value="" class="form-control input-lg" >
</div>
</div>
<div id="notify1" class="">
<div id="notification-text1" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<div class="form-group ">
<label class="control-label">Your Friends' Email <span >* </span></label>
<p class="lineStyle">Enter one or more email addresses, separated by a comma.</p>
<div class="form-group-default">
<input type="text" value="" id="receiver_email" class="form-control required" name="receivers_email" >
</div>
</div>
<div id="notify" class="">
<div id="notification-text" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<div >
<label domainsclass="control-label ">Add a personal message below (Optional) <br></label>
<div class="form-group-default">
<textarea type="text" id="tell_a_friend_message" name="tell_a_friend_message" class="form-control" rows="10" col="100" style=" width: 330px; height: 100px;"></textarea>
</div>
</div>
<div id="notify3" class="">
<div id="notification-text3" class="xs-m-t-10 fs-12"></div>
<!--<button type="button" class ="close" id="noti-hide">×</button>-->
</div>
<input type="hidden" name="product_url" id="product_url_field" value="">
<div class="p-t-15 p-b-20 pull-right">
<button id="send_mail_button" class="btn btn-rounded btn-rounded-fl-gold text-uppercase" name="submit" onclick="return sendEmail();" >Send</button>
<button id="cancel_email_form" class="btn btn-rounded btn-rounded-gold text-uppercase btn-margin-left" data-dismiss="modal" aria-hidden="true" >Cancel</button>
</div>
javascript code:
<script>
function sendEmail() {
document.getElementById('product_url_field').value = window.location.href
var emailpattern = /^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/;
var receivers_email = $("#receiver_email").val();
var sender_email = $("#sender_email_ID").val();
var sender_name = $("#senders_name").val();
var email_pathname = window.location.pathname;
var product_url = window.location.href;
if (receivers_email == '') {
$('#notify').removeClass().addClass("alert-danger");
$('#notification-text').empty().html("Invalid e-mail or fill the email address correctly");
$('#notification-text').show();
setTimeout(function() {
$('#notification-text').fadeOut('slow');
}, 10000);
return false;
}
else {
!emailpattern.test(receivers_email);
}
if(sender_name == ''){
$('#notify2').removeClass().addClass("alert-danger");
$('#notification-text2').empty().html("please fill the name");
$('#notification-text2').show();
setTimeout(function() {
$('#notification-text2').fadeOut('slow');
}, 10000);
return false;
}
if (sender_email == '') {
$('#notify1').removeClass().addClass("alert-danger");
$('#notification-text1').empty().html("Invalid e-mail or fill the email address correctly");
$('#notification-text1').show();
setTimeout(function() {
$('#notification-text1').fadeOut('slow');
}, 10000);
return false;
}
else {
!emailpattern.test(sender_email);
}
$('#notify3').removeClass().addClass("alert-success");
$('#sender_email').val('');
$('#notification-text3').empty().html("Email has sent successfully");
$('#notification-text3').show();
setTimeout(function() {
$('#notification-text3').fadeOut('slow');
}, 10000);
return true;
}
</script>
Controller php class:
public function tellaFriendEmail(){
if (isset($_POST['submit'])) {
$receiver_email = $_POST['receivers_email'];
$name = $_POST['sender_name'];
$email = $_POST['sender_email'];
$message = $_POST['tell_a_friend_message'];
$products_url = $_POST['product_url'];
$mail = new Mail();
$mail->protocol = $this->config->get('config_mail_protocol');
$mail->parameter = $this->config->get('config_mail_parameter');
$mail->smtp_hostname = $this->config->get('config_mail_smtp_hostname');
$mail->smtp_username = $this->config->get('config_mail_smtp_username');
$mail->smtp_password = html_entity_decode($this->config->get('config_mail_smtp_password'), ENT_QUOTES, 'UTF-8');
$mail->smtp_port = $this->config->get('config_mail_smtp_port');
$mail->smtp_timeout = $this->config->get('config_mail_smtp_timeout');
$mail->setTo($receiver_email);
$mail->setFrom($this->config->get('config_email'));
$mail->setSender("Waltersbay");
$mail->setSubject($name.' '.'wants you to checkout this product from waltersbay.com');
if ($message !=''){
$mail->setHtml('Hi Dear,<br/> please checkout the following product that'.' '.$name.' '.'wanted you to see.'.' '.'we hope that you will like it !!!!<br/>'.$products_url.'<br/>'.'<br/> Here is a little message from your friend:<br/>'.$message.'<br/>'.'<br/> Thank you, <br/> ');
}
else{
$mail->setHtml('Hi Dear,<br/> please checkout the following product that'.' '.$name.' '.'wanted you to see.'.' '.'we hope that you will like it !!!!<br/>'.$products_url.'<br/>'/*.'<br/> Here is a little message from your friend:<br/>'.$message.'<br/>'*/.'<br/> Thank you, <br/> ');
}
$mail->send();
}
else{
header('location : tella_friend.tpl');
}
}
}
Put a hidden input in your form. before submitting in your js, fill it with a new key according to time.
in your php file check if key is duplicate or not? or even if its filled?
Because js fill this input after clicking the submit button, every time you submit your form you have a new key! If you refresh the form, you're gonna send the previous value again.
For your problem then best practice recommended is to use jquery ajax requests.
Firstly if you pretend to use "submit" element then do following,
$(".form-vertical").submit(function(e) {
e.preventDefault();
//send ajax with your form data. Ample examples on SO already.
$.ajax(.....);
});
Other option we would recommend is to avoid using 'submit' behavior at first place for requirement you have.
1. Use button elements instead of submit element.
2. Attach click event on button. i.e. in your case 'send'.
3. On click, send ajax as described above. This will avoid doing things like onsubmit="return sendEmail();" you had to do.
4. Also following is not required as well,
$(".form-vertical").submit(function(e) {
e.preventDefault();
as it will be done as follows,
$("button#buttonId").click(function(e) {
// your ajax call.....
}
I do need to create a form. In that form I need to enable form element one by one. That mean, If an user entered valid data to first element then I want to autofocus next element and so on.
NOTE: When page is load I want to keep all the elements disable except first element.
This is HTML of my form.
<form role="form" class="banner" method="post" action="">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="name" placeholder="Your Name" class="form-control first-name sequence" autocomplete="off" required>
<label for="name" class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="left" title="Enter Your Name"></label>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="email" name="email" placeholder="Your Email" class="form-control email_address sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter Your Email"></label>
<span class="email-error"></span>
</div>
</div>
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="phone" placeholder="Your Phone Number Eg: xx-xxx-xxx" class="form-control phone-number sequence" autocomplete="off" disabled required>
<label for="email" class="glyphicon glyphicon-phone" rel="tooltip" title="Enter Your Phone Number"></label>
</div>
</div>
<div class="element-left">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-date" placeholder="Pick Up Date" class="form-control datepicker sequence" autocomplete="off">
<label for="date" class="glyphicon glyphicon-calendar" rel="tooltip" title="Prefered Charter Date"></label>
</div>
</div>
</div>
<div class="element-right">
<div class="form-group">
<div class="icon-addon addon-md">
<input type="text" name="charter-time" placeholder="Pick Up Time" class="form-control timepicker sequence" autocomplete="off">
<label for="time" class="glyphicon glyphicon-time" rel="tooltip" title="Time of Charter"></label>
</div>
</div>
</div>
<p class="form-actions">
<button type="submit" name="submit" class="btn btn-default btn-block">
<span class="btn-orange-inner">Send</span>
</button>
</p>
</form>
This is how I tried it in jQuery:
// form validation
function fakeValidator(event) {
var flag = false;
var $element = $(event.target);
var values = $element.val();
if (values.length >= 3) {
if($element.hasClass('email_address')) {
if(validemail(values)){
flag = true ;
}else{
flag =false;
}
}
flag =true;
} else {
flag =false;
}
if(flag){
//alert('hi');
$element.addClass('valid');
enableNextElement(event);
} else{
alert('hi el');
$element.removeClass('valid');
//$element.addAttr('disabled');
}
}
function validemail(value){
var emailReg ="/^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/";
}
function enableNextElement(event) {
var $element = $(event.target);
if ($element.hasClass('valid')) {
$element.closest('.form-group')
.next('.form-group')
.find('.sequence')
.removeAttr('disabled');
}
}
$('.sequence').on('blur keyup', fakeValidator);
But my problem is, if I entered an invalid email next element is enabling. But I want to enable next element if its a valid email in email field.
Can anybody tell me what is wrong with this?
Thank you.
2 things:
You should return true or false from your email validation function i.e. validemail
Your regex is stored as string, and hence you cannot apply test function on it. Remove wrapping it in " "
Above mentioned changes will give you desired result.
function validemail(value){
var emailReg =/^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; //regex
return emailReg.test(value); //use test which returns true or false
}
UPDATE
DEMO
It will still enable the phonenumber because you have validation written in such a way.
Your Validation:
if (values.length >= 3) {
//this is ok for name
if($element.hasClass('email_address')) {
if(validemail(values)){
flag = true;
}else{
flag =false;//even though flag is false here
}
}
flag =true; //when it comes to this line it again makes it to true
//and for email along with length>3, valid email address has also to be validated
} else {
flag =false;
}
My workaround
if (values.length >= 3) {
flag =true; //set this first
if($element.hasClass('email_address')) {//then perform other validations
if(validemail(values)){
flag = true ;
}else{
flag =false;
}
}
} else {
flag =false;
}
i have one form like this.
<form method="post" action="contact-post.php" id="contact_form" name="contactForm">
<div class="left_form">
<div>
<span><label>NAME</label></span>
<div id='name_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="name" id="name" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-MAIL</label></span>
<div id='email_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="email" id="email" type="text" class="textbox" required></span>
</div>
<div>
<span><label>PHONE</label></span>
<div id='phone_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="phone" id="phone" type="text" class="textbox"></span>
</div>
</div>
<div class="right_form">
<div>
<span><label>SUBJECT</label></span>
<div id='message_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><textarea name="message" id="message" required> </textarea></span>
</div>
<div id='mail_success' class='success' style="background-color:#BFD6BF;text-align:center;margin-bottom:5px;">Your message has been sent successfully.</div>
<div id='mail_fail' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Sorry, error occured this time sending your message.</div>
<div id="submit">
<span><input type="submit" id="send_message" name="submit" value="Submit" class="myButton"></span>
</div>
</div>
</form>
and i call one .js file for it is.
$(document).ready(function(){
$('#send_message').click(function(e){
//Stop form submission & check the validation
e.preventDefault();
// Variable declaration
var error = false;
var name = $('#name').val();
var email = $('#email').val();
var subject = $('#phone').val();
var message = $('#message').val();
// Form field validation
if(name.length == 0){
var error = true;
$('#name_error').fadeIn(500);
}else{
$('#name_error').fadeOut(500);
}
if(email.length == 0 || email.indexOf('#') == '-1'){
var error = true;
$('#email_error').fadeIn(500);
}else{
$('#email_error').fadeOut(500);
}
if(subject.length == 0){
var error = true;
$('#phone_error').fadeIn(500);
}else{
$('#phone_error').fadeOut(500);
}
if(message.length == 0){
var error = true;
$('#message_error').fadeIn(500);
}else{
$('#message_error').fadeOut(500);
}
// If there is no validation error, next to process the mail function
if(error == false){
// Disable submit button just after the form processed 1st time successfully.
$('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
/* Post Ajax function of jQuery to get all the data from the submission of the form as soon as the form sends the values to email.php*/
$.post("contact-post.php", $("#contact_form").serialize(),function(result){
//Check the result set from email.php file.
if(result == 'sent'){
//If the email is sent successfully, remove the submit button
$('#submit').remove();
//Display the success message
$('#mail_success').fadeIn(500);
}else{
//Display the error message
$('#mail_fail').fadeIn(500);
// Enable the submit button again
$('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
}
});
}
});
});
and one contact-post.php file is.
<?php
include('config.php');
if (isset($_POST['submit'])) {
$name=$_POST['name'];
$mail=$_POST['email'];
$phone=$_POST['phone'];
$msg=$_POST['message'];
function test_input($data) {
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
test_input($name);
$query="INSERT INTO `inquiry` (id,name,contact,email,query) values ('','$name','$phone','$mail','$msg')";
$qur=mysql_query($query);
if ($qur) {
echo 'sent';
}
else {
echo 'failed';
}
}
?>
my problem is when i refresh page it's displaying like this.
i want that all message should not display before clicking submit button.please help me.
Update (adding snippet) :
.error , .success
{
display:none;
}
<form method="post" action="contact-post.php" id="contact_form" name="contactForm">
<div class="left_form">
<div>
<span><label>NAME</label></span>
<div id='name_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="name" id="name" type="text" class="textbox"></span>
</div>
<div>
<span><label>E-MAIL</label></span>
<div id='email_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="email" id="email" type="text" class="textbox" required></span>
</div>
<div>
<span><label>PHONE</label></span>
<div id='phone_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><input name="phone" id="phone" type="text" class="textbox"></span>
</div>
</div>
<div class="right_form">
<div>
<span><label>SUBJECT</label></span>
<div id='message_error' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Please enter your name.</div>
<span><textarea name="message" id="message" required> </textarea></span>
</div>
<div id='mail_success' class='success' style="background-color:#BFD6BF;text-align:center;margin-bottom:5px;">Your message has been sent successfully.</div>
<div id='mail_fail' class='error' style="background-color:#FFBCBB;text-align:center;margin-bottom:5px;">Sorry, error occured this time sending your message.</div>
<div id="submit">
<span><input type="submit" id="send_message" name="submit" value="Submit" class="myButton"></span>
</div>
</div>
</form>
You can do one of the following :
Set the error and success classes display to none, since they will be displayed using the fadeIn function.
.error , .success
{
display:none;
}
Or
You can hide the <div>s with jQuery on load as follows :
$(document).ready(function(){
$('.error , .success').hide();
.....
});
I guess the first solution would be a better approach since the elements will not view at all since CSS loads before JS (assuming that this is the order you are loading your files with), while in the second approach the elements will be visible until jQuery loads and hides them.
Add a style as below to hide the error/success messages.
#mail_fail, #mail_success{
display : none;
}