Form field not clearing by Ajax - javascript

Ok I create an ajax form by following a tutorial. Everything is working fine. But my form fields are not clearing after submission. I searched here & found some solution, but not working for me. I've tried:
number 1: $('form#contactform input[type="text"],texatrea, select').val('');
number 2: $("#name").val("");
$("#email").val("");
$("#phone").val("");
number 3: $('#contactform')[0].reset();
but this solutions are not working for me.
My html:
<div id="form-messages"></div>
<form method="post" action="mailer.php" name="contactform" id="contactform">
<fieldset>
<div class="col-sm-3 col-xs-6">
<!-- Name -->
<input name="name" type="text" id="name" size="30" placeholder="Name" value="" />
</div>
<div class="col-sm-3 col-xs-6">
<!-- Email -->
<input name="email" type="text" id="email" size="30" placeholder="Email" value="" />
</div>
<div class="col-sm-3 col-xs-6">
<!-- Phone -->
<input name="phone" type="text" id="phone" size="30" placeholder="Phone" value="" />
</div>
<div class="col-sm-3 col-xs-12">
<!-- Send button -->
<input type="submit" class="submit" id="submit" value="Send message" />
</div>
</fieldset>
</form>
My js:
$(function() {
// Get the form.
var form = $('#contactform');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(e) {
// Stop the browser from submitting the form.
e.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Clear the form.
$('form#contactform input[type="text"],texatrea, select').val('');
// Set the message text.
$(formMessages).text(response);
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
});
& My Php
<?php
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$phone = strip_tags(trim($_POST["phone"]));
$phone = str_replace(array("\r","\n"),array(" "," "),$phone);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($phone) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "friday#imransdesign.com";
// Set the email subject.
$subject = "New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n";
$email_content .= "Phone: $phone\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
header("HTTP/1.0 404 Not Found");
echo "Thank You! Your message has been sent.";
$_POST=array();
} else {
// Set a 500 (internal server error) response code.
header("HTTP/1.0 404 Not Found");
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
header("HTTP/1.0 404 Not Found");
echo "There was a problem with your submission, please try again.";
}
?>
What should I do?
live example: http://imransdesign.com/ajax-form/

Your selector for number 1 is wrong. It should be:
$('#contactform').find('input[type="text"], texatrea, select').val('');
I don't know about number 2 and number 3. May be you have duplicate IDs in your page ... let me take a look. Your IDs are good. Something else must be going on.
I tested number two and three in the dev tools console on your page and they work fine:
$('#contactform')[0].reset(); //cleared the whole form
$('#name').val(''); // Cleared the name field.
There seems to be a problem with your server. It's returning a 400/404 --- fail and since you do not clear your form in the .fail callback, your form would not be cleared. The .done callback is not being called:
mailer.php POST 400 text/html jquery-2.1.0.min.js:4 279 B 378 ms
mailer.php POST 400 text/html jquery-2.1.0.min.js:4 279 B 339 ms
mailer.php POST 404 text/html jquery-2.1.0.min.js:4 256 B 343 ms
Somehow the server returns Thank You! Your message has been sent. which is output by the following part in .fail():
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {

Try
$('#contactform fieldset div input').val('');
instead of
$('form#contactform input[type="text"],texatrea, select').val('');

I think you need this to clear all input fields inside form tag use this
$("#formid").find('input, textarea').not(":submit").val('');
This FIDDLE will clear all the input fields and textarea inside the form tag on submitting .. change it as you want ..its just example

Just do this:
.done(function(response) {
...
contactform.reset();
}

Related

Form in wordpress using ajax javascript and php

I think there is something wrong with my javascript.
I have (html) form:
<html><form action="wp-content/themes/devwp-child/action_page.php" method="post">
<fieldset>
<input type="text" name="ime" placeholder="Ime *">
<input type="text" name="priimek" placeholder="Priimek *">
<input type="email" name="email" placeholder="E-poštni naslov*">
<input type="text" name="telefonska" placeholder="Telefonska številka">
<input type="text" name="podjetje" placeholder="Podjetje">
</fieldset>
<p id="izberi">IZBERI</p>
<fieldset>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</fieldset>
<fieldset>
<textarea name="field3" placeholder="Vaše želje"></textarea>
</fieldset>
<input type="submit" value="send" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"</script>
<script src="main.js"</script>
</html>
Then i have 2 files:
-main.js
-action_page.php
action_page.php code:
<?php
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$ime = strip_tags(trim($_POST["ime"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
// Check that data was sent to the mailer.
if ( empty($ime) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
// FIXME: Update this to your desired email address.
$recipient = "ptlabdoo#gmail.com";
// Set the email subject.
$subject = "New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
If form is properly full then it sends an email - that words fine; but if form is not full then i get:
Forbidden
You don't have permission to access /wp-content/themes/devwp-child/action_page.php on this server.
Additionally, a 400 Bad Request error was encountered while trying to use an ErrorDocument to handle the request.
main.js code:
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// Set up an event listener for the contact form.
$(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();
// Serialize the form data.
var formData = $(form).serialize();
});
});
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});

how to make a contact from html form and php page by ajax

I make this form to send data to a php page in another domain but always it results error. can someone explain my problem
I search in Internet many times but exactly I didnt find my answer
here is my code
html:
<form action="#" id="smail" method="post" class="form">
<input type="text" name="name" value="Your Name *">
<input type="text" name="mailadd" value="Your E-mail *">
<textarea name="message" cols="0" rows="0">Your Message *</textarea>
<input type="submit" value="send message">
</form>
js:
$('#smail').submit(function(event) {
event.preventDefault();
var mail = $("#smail input[name=name]").val();
var message = $("#smail input[name=mailadd]").val()+' '+$("#smail textarea[name=message]").val();
$.ajax({
type: "POST",
url:"http://cofeebeen.dx.am/email.php",
crossDomain: true,
data:{
"mail": mail,
"message": message,
},
dataType: "text",
error: function(){
alert("error")
}
}).success(function(result){
alert(result)
});
});
php:
<?php
$subject = $_POST["mail"];
$msg = $_POST["message"];
mail("someone#example.com",$subject,$msg);
?>
Your PHP code is not correct, we can get data at your PHP page like below.
Correct code:
$subject = $_POST["mail"];
$msg = $_POST["message"]
Incorrect code:
$subject = $_POST["name"];
$msg = $_POST["mailadd"]
I hope it will work now.
Per #mpf82's comment, if this is a cross domain request, that changes things. However, the AJAX request is currently passing 2 PHP post variables:
...
data:{
"mail": mail,
"message": message,
},
...
And you reference 3:
$_POST['name'];
$_POST['mailadd'];
$_POST['message'];
As #Reghbendra pointed out, you are referencing the incorrect variable names. Plus, since you did the concatenation of mailadd and message in Javascript, you can skip that part in PHP.
Therefore, your code would need to reference the two post variables that were passed by their proper indexes.
Result code:
<?php
$subject = $_POST["mail"];
$msg = $_POST["message"];
mail("someone#example.com",$subject,$msg);
?>
You also should consider the headers for the PHP mail function to ensure that it sends properly and is handled correctly. See the documentation for the function here.

Submitting Form Details using PHP

I am fairly new to PHP. I have to send the form details to mail id. I browsed through The Internet and get the various link about the same. But I am facing the similar situation that when I am submitting my form filled with details then it is downloading the PHP file in the browser and main thing is I am not getting mail.
Here I pasting my code-
HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="page-wrapper">
<h1>AJAX Contact Form Demo</h1>
<div id="form-messages"></div>
<form id="ajax-contact" method="post" action="mailer.php">
<div class="field">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div class="field">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="field">
<label for="message">Message:</label>
<textarea id="message" name="message" required></textarea>
</div>
<div class="field">
<button type="submit">Send</button>
</div>
</form>
<script src="jquery-2.1.0.min.js"></script>
<script src="app.js"></script>
</body>
</html>
The mailer.php
<?php
// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the form fields and remove whitespace.
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
// Check that data was sent to the mailer.
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
// Set a 400 (bad request) response code and exit.
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
// Set the recipient email address.
//
$recipient = "shubhamvashishtha22#gmail.com";
// Set the email subject.
$subject = "New contact from $name";
// Build the email content.
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
// Build the email headers.
$email_headers = "From: $name <$email>";
// Send the email.
if (mail($recipient, $subject, $email_content, $email_headers)) {
// Set a 200 (okay) response code.
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
// Set a 500 (internal server error) response code.
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
// Not a POST request, set a 403 (forbidden) response code.
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
My app.js file
$(function() {
// Get the form.
var form = $('#ajax-contact');
// Get the messages div.
var formMessages = $('#form-messages');
// TODO: The rest of the code will go here...
});
// Set up an event listener for the contact form.
$(form).submit(function(event) {
// Stop the browser from submitting the form.
event.preventDefault();
// TODO
});
// Serialize the form data.
var formData = $(form).serialize();
// Submit the form using AJAX.
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
})
.done(function(response) {
// Make sure that the formMessages div has the 'success' class.
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
// Set the message text.
$(formMessages).text(response);
// Clear the form.
$('#name').val('');
$('#email').val('');
$('#message').val('');
})
.fail(function(data) {
// Make sure that the formMessages div has the 'error' class.
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
// Set the message text.
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
Can anyone please suggest me how I can make this problem go. I am actually just copying it than also this is happening. Please help me?
It is possible that your server doesn't have a SMTP likesendmail or postfix enabled. You can run phpinfo() and look for this directive sendmail_path and see what is set.
You say that the PHP file is downloaded through the browser. This is not supposed to happen. When the server gets a request for a PHP file, it is meant to run the PHP code and only respond with the resulting HTML page. Visitors to your web page should never see any code, only the text and tags you choose to echo, which leads me to believe that your server may not actually be running PHP at the moment.
Is your PHP installation configured correctly, and is it running? If you are not configuring your own server, does your web host of choice have PHP listed as one of the languages it supports?
Your AJAX doesn't seem to do anything other than telling the form to submit, so I don't think it's the problem, but for the sake of isolating the issue: What happens if you comment out the jQuery and AJAX script tags and just use a regular HTML form to POST to mailer.php?

<div> tag not showing JSON response with Ajax

I have made a simple login form which I am trying to validate through AJAX call. It works successfully. But problem is when I enter correct email or password it refreshes the whole page instead of showing JSON success-error to be shown in div and same for the wrong email/password. Any suggestions please!!
Code
<script>
$(document).ready(function() {
$('#login_submit').click(function(){
var email = $("#email").val(),
password = $("#password").val();
var proceed = true;
if(proceed){
post_data= { 'Email': email, 'Password': password};
$.post('login_index.php', post_data, function(response){
//load json data from server and output message
if(response.type == 'error')
{
output=$('.alert-error').html(response.text);
}else{
output=$('.alert-success').html(response.text);
}
$("#error").hide().html(output).slideDown();
}, 'json');
}
});
});
</script>
<div class="alert-error"></div>
<div class="alert-success"></div>
<div class="login">
<form method="post" action="">
<input type="email" name="email" id="email" placeholder="email" >
<input type="password" name="password" id="password" placeholder="password">
<input type="submit" name="login_submit" id="login_submit" value="login">
</form>
</div>
Php
<?php
include "db/db.php";
session_start();
if($_POST){
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
$output = json_encode(
array(
'type'=>'error',
'text' => 'Request must come from Ajax'
));
die($output);
}
if(isset($_POST['Email']) && isset($_POST['Password']))
{
$email=filter_var($_POST["Email"], FILTER_SANITIZE_STRING);
$pwd=filter_var($_POST["Password"], FILTER_SANITIZE_STRING);
$query=mysqli_query($con,"select * from customers where email='$email' and password='$pwd'");
$count=mysqli_num_rows($query);
$row=mysqli_fetch_array($query,MYSQLI_ASSOC);
if($row)
{
$_SESSION['login_email']=$row['email'];
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$email .' You are successfully login'));
die($output);
}
else{
$output = json_encode(array('type'=>'error', 'text' => 'Could not login! Please check your email password.'));
die($output);
}
}
}
Prevent the default action of form or submit button using e.preventDefault() or else it will post the form and page refresh happens.
$('#login_submit').click(function(e){
e.preventDefault(); //e is the event captured here
//rest of the code
});
You can directly use return false, which will prevent default action and also propagation event.
$('#login_submit').on('click',function(){
//Complete code here
return false;
});

Data submit with ajax get result but not contact form

I have a online quiz by jQuery, I want once the user submit it, to send the results with the contact information's of the users to the moderator.
I make it work, sending the results information correctly, the problem is it doesn't send the user information.
I've been playing around with different solution's, I can manage or to have the user information or the results of the quiz, but not both at the same time !
Here is the "contact form":
<form action="submit.php" method="POST" id="form">
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<input id="button" type="submit" value="Send" class="btnShowResult">
Here is the jQuery part about the ajax to send the data result of the quiz, the div #resultKeeper being the result I want to receive
$(function() {
$('#form').on('submit',function(e) { e.preventDefault();
$.ajax({
url:'submit.php',
type:'POST',
data:{'results':$('#resultKeeper').html(),'subject':'Subject of your e-mail'},
success:function() {
$('#responseMessage').html()
}
});
return false;
});
});
here is my PHP
<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$results = $_POST['results'];
$formcontent="From: $name \n Message: $message \n Results: \n $results";
$recipient = "myemail#gmail.com";
$subject = "my subject";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Your email has been send, thank you";
?>
If in the Jquery I change the
$(function() {
$('#form').on('submit',function(e)
by #button instead of #form, I receive the informations from the contact form, but not anymore from the results.
Also by keepin the #form, I receive the result of the quiz, and few value as the form content, but not the informations from the placeholder !, here is what I receive by email:
"
From:
Message:
Results:
<div> Question 1 is true</div><div> Question 2 is false\</div><div> Question 3 is true\</div>\<div> Question 4 is false\</div>\<div> Question 5 is false\</div>\<div class=\"totalScore\">\<br>Your total score is 2 / 5\</div>\<div class=\"totalScore\">\<br>CONGRATULATION, YOUR LEVEL IS A1.1\</div
"
As we can see I have the From: and Message: appearing, but not the proper name and message that the user are writing .. .
Any help will be adorable !!
Here is the allcode of JSFiddle:
http://jsfiddle.net/ccwJJ/
You do not receive your form values in your php file when you make an ajax request, you have to explictly send them in the ajax request.
Consider below form
<form action="submit.php">
<input type="email" name="email" id="email"/>
<input type="submit" value="send"/>
</form>
Case 1 Normal way
When you submit the form normally, say hitting enter or on click you would receive the form values implicitly in your php file as $_POST['email] variable
<?php $email = $_POST['email'] ; // valid ?>
Case 2 Ajax way
When you submit the form using ajax, You do not receive the form values implicitly in your php file since your ajax request does not know about your form elements, You have to send the values explicitly in the ajax request.
$.post('submit.php',function(result){
$('#responseMessage').html(result);
});
<?php $email = $_POST['email'] // error ?>
why? because you have not set the post variable email
Then how to do it?
var uemail = $("#email").val(); // get the email
// Set email and send it through ajax
$.post('submit.php',email:uemail,function(result){
$('#responseMessage').html(result);
});
<?php $email = $_POST['email'] // works perfect ?>
So now change your form to this
<form action="submit.php" method="POST" id="quesForm">
<label>Name</label>
<input name="username" type="text" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<input id="button" type="submit" value="Send" class="btnShowResult">
</form>
Notice I have changed name='name' to name='username'and I suggest you to change id=form to some other name say id=quesForm. I have seen some browsers does not seem to work as expected when you use tags as id names and attributes as attribute values like you have done name=name and id=form
I suggest you to use $.post instead of $.ajax, It simplifies the things for you when you really require $.post
jQuery
$(function() {
$('#quesForm').on('submit',function(e) {
e.preventDefault();
// I am fetching the form values you could get them by other selectors too
var uname = $("input[name=username]").val();
var uemail = $("input[name=email]").val();
var msg = $("textarea").val()
$.post('submit.php',{username:uname,email:uemail,message:msg,results:$('#resultKeeper').html(),subject:'Subject of your e-mail'},function(result){
// result variable contains your response text
// I guess you trying to update your response
// notice I have used html(result) as you have just used html()
$('#responseMessage').html(result);
});
// you dont require `return false`
// you have already did it using e.preventDefault();
});
});
php
<?php $name = $_POST['username'];
$email = $_POST['email'];
$message = $_POST['message'];
$results = $_POST['results'];
$results = strip_tags($results); // add this to remove html tags and all
$formcontent="From: $name \n Message: $message \n Results: \n $results";
$recipient = "thibault.rolando#gmail.com";
$subject = "my subject";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Your email has been send, thank you";
?>
To remove html tags in php you have function named strip_tags();
You need to send the form data, plus your results string.
Try the following:
$(function() {
$('#form').on('submit',function(e) { e.preventDefault();
//grab the form data into array
var formData = $('#form').serializeArray();
//add your result and subject
formData.push({ results:$('#resultKeeper').html(), subject:'Subject of your e-mail'});
$.ajax({
url:'submit.php',
type:'POST',
data:formData,
success:function() {
$('#responseMessage').html()
}
});
return false;
});
It is better to use following way for getting form input values:
var data = $('#yourformid').serielize();
You will get the data in serielize format and put it on ajax data param.

Categories