mail alert is not working - javascript

Am trying ti set a form in my contact page,where the user can send their feedback to me through mails. The problem here is am receiving the mail,but the page is not refreshing and no alert box comes...help to solve this
My Php code-
<?php
if (isset($_POST['submit']))
{
//print_r($_POST);
$name=$_POST['name'];
$email=$_POST['email'];
$message=$_POST['message'];
$to='xyz#gmail.com';
//$subject='Send mail using php';
//$message='This mail send using php';
$headers="From: $name";
$mail=mail($to,$name,$email,$message);
if($mail)
{
echo'Mail send successfully';
}
else
{
echo'Mail is not send';
}}
?>
and my form is-
<form name="" action="" method="post" class="wpcf7-form">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
<label>Your Name</label><br />
<input type="text" name="name" id="name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" placeholder="Your name..." />
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
<label>Phone</label><br />
<input type="text" id="phone" name="phone" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control" placeholder="Phone number..." />
</div>
</div>
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-12">
<label>Email Address</label><br />
<input type="text" id="email" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email form-control" placeholder="Email Address..." />
</div>
</div>
<div class="form-group">
<label>Message</label><br />
<textarea name="message" id="message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required form-control"></textarea>
</div>
<input type="submit" id="submit" name="submit" value="Send Message" class="wpcf7-form-control wpcf7-submit submit_btn" />
</form>

if you want the message displayed as an alert, you can do:
$mail = mail($to,$subject,$message,$header);
?>
<script>
alert('<?php echo $mail ? "Mail sent successfully" : "Mail was not sent" ?>');
</script>

Refer to PHP mail function
$mail=mail($to,$subject,$message,$header);
If you want to create alert change code as below.
$mail=mail($to,$subject,$message,$header);
if($mail)
{
?>
<script type='text/javascript'>alert("Mail sent");</script>
<?php
}
else
{
?>
<script type='text/javascript'>alert("Mail is not send");</script>
<?php
}

for js alert check below code
if($mail)
{
echo'<script>alert("Mail send successfully");</script>';
}

Related

Need to insert and refresh the page at submit button

I have a comment section in my page.
<form class="reply-form" id="reply-form" method="POST">
<input type="hidden" name="id" value="<?php echo $post->ID;?>" id="postid">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="sr-only control-label" for="name"></label>
<input id="name" name="name" class="form-control" placeholder="NAME" required="" type="text">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="sr-only control-label" for="email"></label>
<input id="email" name="email" class="form-control" placeholder="E-MAIL" required="" type="text" >
</div>
</div>
<div class="form-group">
<div class="col-md-12 mb30">
<label class="sr-only control-label" for="textarea"></label>
<textarea class="form-control" id="textarea" name="textarea" rows="3" placeholder="COMMENT"></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button id="singlebutton" name="singlebutton" value="Submit" class="btn btn-default sub">Submit</button>
</div>
</div>
</div>
</form>
This is how my insert comment function works:
if(isset($_POST['singlebutton'])){
$postid = $_POST["id"];
$name =$_POST['name'];
$email =$_POST['email'];
$comment=$_POST['textarea'];
$commentdata = array(
'comment_post_ID' => $postid,
'comment_author' => $name,
'comment_author_email' => $email,
'comment_content' => $comment,
'comment_type' => '',
'comment_parent' => 0,
'user_id' => $current_user->ID, //passing current user ID or any predefined as per the demand
);
$comment_id = wp_new_comment( $commentdata );
}
Now my problem is that when i hit submit button it refreshes the page and only insert the comment in database and only in next refresh the comments are being displayed in mu page. i have tried using script for window load but that dosent seem to do the work. what can i do ?
<form class="reply-form" id="reply-form" method="POST" action="yourclassname.php">
Add the action like mentioned above.....
After the submit code redirect the page to itself.
IN PHP
header('Location: redirectpage.php');exit();
In Javascript
echo "<script>location.href='redirectpage.php';</script>";
//Just Change name To uname so ‘name’ is not available for a field name.
<input id="name" name="name" class="form-control" placeholder="NAME" required="" type="text">
To
<input id="name" name="uname" class="form-control" placeholder="NAME" required="" type="text">

Javascript event.preventDefault() not working on Safari, but working on Chrome and Firefox

Hi, guys:
For some resaon the event.preventDefault() function not working on safari browser, but working fine on Google Chrome and Firefox. What I want to do is prevent the user to submit the form, unless they finish the google reCAPTCHA(Version 2). Please let me know how can I fix this issue. Appreciate you help.
Here is the code:
<div class="row">
<h4>
<center></center>
</h4>
<form action="http://g/r59jr" method="POST" id="form">
<div class="col-md-8 col-md-offset-2">
<div class="form-group">
<label for="firstname">First Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="First" placeholder="First Name" value="<?php echo set_value('First'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label for="firstname"> Last Name<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="text" class="form-control" name="Last" placeholder="Last Name" value="<?php echo set_value('Last'); ?>" autocomplete="given-name" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="email">Email<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small></label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email" autocomplete="email" value="<?php echo set_value('email'); ?>" required>
</div>
<div class="form-group">
<label style="font-weight:bold;" for="phone">Phone Number</label>
<input type="text" class="form-control" id="phone" placeholder="Phone Number" name="Phone" autocomplete="cellphone" value="<?php echo set_value('Phone'); ?>">
<span><small></small></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="row top30 ">
<div class="col-sm-12">
<label for="agreeTOS">
<input type="checkbox" id="agreeTOS" name="agreeTOS" value='1' <?php echo set_checkbox('agreeTOS','1'); ?> required> I agree to the Privacy Policy<small><i class="glyphicon glyphicon-asterisk" title="Required" alt="Required"></i></small>
</label>
</div>
</div>
<div class="row top30 ">
<div class="col-sm-12">
<!--change-->
<div class="g-recaptcha" data-sitekey="6example.........."></div><br>
<button type="submit" value="<?php echo set_value('Submit'); ?>" class="btn btn-success btn-primary btn-lg signup submit_information_request btn-block" name="submitBtn" id="submitBtn">Sign-Up</button>
</form>
<!--change-->
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
$('#form').submit(function(event) {
var verified = grecaptcha.getResponse();
if (verified.length === 0) {
event.preventDefault();
}
});
});
</script>
</div>
</div>
</div>
</div>

PHP is not responding when called by ajax for validations

I am trying to validate my signup form using php and ajax. But i am not getting any value in return. This is my ajax code.
<script type="text/JavaScript">
function frmValidation(str)
{
if (str=="")
{
document.getElementById("txtError").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtError").innerHTML=xmlhttp.responseText;
}
xmlhttp.open("GET","validation.php?value="+str,true);
xmlhttp.send();
}
}
And my php file named as validation.php is
<?php
$value= $_REQUEST["value"];
$pass= $_REQUEST["value"];
$error="";
if($value=="")
{
echo "This is a mandatory field";
}
elseif($value=="fname")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct First Name";
}
}
elseif($value=="lname")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct Last Name";
}
}
elseif($value=="designation")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct designation";
}
}
elseif($value=="suburb")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct suburb";
}
}
elseif($value=="city")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct city name";
}
}
elseif($value=="state")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct state";
}
}
elseif($value=="country")
{
if(!preg_match("/^[a-zA-Z ]*$/", $value))
{
echo "Please enter the correct country";
}
}
elseif($value=="pincode")
{
if(!preg_match("/^[a-zA-Z0-9 ]*$/", $value))
{
echo "Please enter the correct designation";
}
}
elseif($value=="mobile")
{
if(!preg_match("/^[\+0-9\-\(\)\s]*$/", $value))
{
echo "Please enter the correct designation";
}
}
elseif($value=="email")
{
if(!preg_match("/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/", $value))
{
echo "Please enter the correct email format";
}
}
elseif($value=="cpass")
{
if($pass==$value)
{
echo "Confirm password is wrong";
}
}
?>
The HTML form is this
<div class="col-lg-12">
<div class="container">
<h1>Sign Up form</h1>
<form role="form" action="signup.php" method="post">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading"> General Information </div>
<div class="panel-body">
<div class="col-sm-6">
<div class="form-group">
<label for="First Name">First Name</label>
<input type="text" class="form-control" onblur="frmValidation(this.value)" tabindex="1" id="First Name" placeholder="First Name" name="fname"><span id="txtError" style="color: red"></span>
</div>
<div class="form-group">
<label for="Company Name">Company Name</label>
<input type="text" tabindex="3" class="form-control" id="Company Name" placeholder="Company Name" name="cname">
</div>
<div class="form-group">
<label for="Address">Address</label>
<input type="text" tabindex="5" class="form-control" id="address" placeholder="Address" name="address">
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" tabindex="7" class="form-control" id="City" placeholder="City" name="city">
</div>
<div class="form-group">
<label for="country">Country</label>
<input type="text" tabindex="9" class="form-control" id="country" placeholder="Country" name="country">
</div>
<div class="form-group">
<label for="mobile">Mobile No.</label>
<input type="text" tabindex="11" class="form-control" id="suburb" placeholder="Mobile No." name="mobile">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="Last Name">Last Name</label>
<input type="text" tabindex="2" class="form-control" id="Last Name" placeholder="Last Name" name="lname">
</div>
<div class="form-group">
<label for="Designation">Designation</label>
<input type="text" tabindex="4" class="form-control" id="Designation" placeholder="Designation" name="designation">
</div>
<div class="form-group">
<label for="suburb">Suburb</label>
<input type="text" tabindex="6" class="form-control" id="suburb" placeholder="Suburb" name="suburb">
</div>
<div class="form-group">
<label for="state">State</label>
<input type="text" tabindex="8" class="form-control" id="state" placeholder="State" name="state">
</div>
<div class="form-group">
<label for="pincode">Pincode</label>
<input type="text" tabindex="10" class="form-control" id="pincode" placeholder="Pincode" name="pincode">
</div>
<div class="form-group">
<label for="dob">Date Of Birth</label>
<input type="text" tabindex="12" class="form-control" id="dob" placeholder="Date of Birth" name="dob">
</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading"> Login Details </div>
<div class="panel-body">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" tabindex="13" class="form-control" id="email" placeholder="Email Address" name="email">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="password">Password</label>
<input type="password" tabindex="14" class="form-control" id="password" placeholder="Password" name="pass">
</div>
<div class="form-group">
<label for="Confirm password">Confirm Password</label>
<input type="password" tabindex="14" class="form-control" id="confirm password" placeholder="Confirm Password" name="cpass">
</div>
</div>
</div>
<div class="form-group">
<input type="submit" tabindex="15" class="form-control btn btn-primary" value="Submit">
</div>
</div>
</div>
</form>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
interval: 5000 //changes the speed
})
</script>
</div>
In html form i am trying to get value for at least first field just to check for weather it is working or not. But i am getting no value in return. Please let me know where is the problem as i am new to use ajax.
Please help! thank you!
Your formatting is incorrect, which hides a bug in your code: you tell the computer "when the AJAX response is received, then send the AJAX request". Of course, unless you send the request first, there won't be any response to react to.
This is your code, corrected:
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtError").innerHTML=xmlhttp.responseText;
}
// we're still in the "onreadystatechange" function here!
// xmlhttp.open("GET","validation.php?value="+str,true);
// xmlhttp.send();
}
// send the request from *here*
xmlhttp.open("GET","validation.php?value="+str,true);
xmlhttp.send();

Script not working either place on html or save as .js file

My script doesnt work though the database insertion is working. The message "successfully inserted" is on the saveclient.php page not on the index.html.
my script (member_script.js)- i put this on folder named js.
$("#clientSubmit").click( function () {
$.POST( $("#saveClient").attr("action"), $("#saveClient :input").serializeArray(), function(info) { $("#result").html(info); } );
clearInput();
});
$("#saveClient").submit( function() {
return false;
});
function clearInput() {
$("#saveClient :input").each ( function () {
$(this).val('');
});
}
my html
<form id="saveClient" action="saveclient.php" method="POST" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" name="name" id="name" required data-validation-required-message="Please enter your name.">
<input type="text" class="form-control" name="date" id="date" value="November 1, 2015">
<input type="text" class="form-control" name="time" id="time" value="9:20 pm">
<input type="text" class="form-control" name="memberid" id="memberid" value="10002">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Address</label>
<input type="text" class="form-control" placeholder="Complete Address" name="address" id="address" required data-validation-required-message="Please enter your complete address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone / Cellphone Number</label>
<input type="text" class="form-control" placeholder="Phone / Cellphone Number" name="number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Worked / Source of Income</label>
<input type="text" class="form-control" placeholder="Worked / Source of Income" name="work" id="work" required data-validation-required-message="Please enter your type of worked.">
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<span id="result"></span>
<div class="row">
<div class="form-group col-xs-12">
<button class="btn btn-success btn-md" id="clientSubmit" >Save</button>
</div>
</div>
</form>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery-1.8.3.min.js"</script>
<script src="script/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<script src="js/member_script.js"></script>
my database query (saveclient.php) - is working, it save data to database
<?php
include_once('getconnect.php');
$clientid = $_POST['memberid'];
$name = $_POST['name'];
$address = $_POST['address'];
$number = $_POST['number'];
$work = $_POST['work'];
$date = $_POST['date'];
$time = $_POST['time'];
if (mysql_query("INSERT INTO member VALUES ('', '$clientid','$name','$address','$number','$work','$date','$time')"))
echo "Successfully Inserted!";
else
echo "Insertion Failed";
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var form=$("#saveClient");
$("#clientSubmit").click(function(){
$.ajax({
type:"POST",
url:form.attr("action"),
data:form.serialize(),
success: function(response){
console.log(response);
}
});
});
});
</script>
Use this code, this will work perfectly.

Twitter bootstrap modal and date element

I have registration form with date element of HTML 5 (use for user b-date).
Yes, it works find but, I see some problem.
If I choose month (e.g I choose month APRIL) the modal will close and the date element left.
Thank you so much.
I have this form:
<form role="form" action="" method="post">
<input type="hidden" name="class" value="client" />
<input type="hidden" name="func" value="add" />
<div class="form-group">
<label for="recordnumber">Record Number</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="record_number" name="record_number" placeholder="Enter Record Number" required>
</div>
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="fname" placeholder="Enter First Name" name="fname" required>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="lname" placeholder="Enter Last Name" name="lname" required>
</div>
<div class="form-group">
<label for="birthdate">Birth Date</label>
<input type="text" autocapitalize="off" autocorrect="off" class="form-control" id="date_birth" name="date_birth" placeholder="Enter Birth Date" required>
</div>
<div class="form-group">
<label for="deathdate">Date of Death</label>
<input type="text" autocapitalize="off" autocorrect="off" style="z-index: 10520" class="form-control" id="date_death" name="date_death" placeholder="Enter Date of Death" required>
</div>
<div class="form-group">
<label for="clinictype">Client Type</label>
<select class="form-control" name="client_type" id="client_type" required>
<option value="">Select Client Type</option>
<?php
$_data = $type->get_all('client');
if($_data!=false): foreach($_data['value'] as $data ): ?>
<option value="<?php echo $data ?>"><?php echo $data ?></option>
<?php endforeach; endif; ?>
</select>
</div>
<input style="margin-top: 20px;" type="submit" class="btn btn-success btn-default">
</form>

Categories