Im in need to create to separate e-mail forms based on AJAX and JQuery.
I need one form to be Standart and other VIP, when getting email from website - i need to indicate from which form customer has send inquiry.
I have sample form for Standard, and need to create VIP form. Imagine it is needed to create forms ID and insert it to JQuery.
Please help
Here is sample form code:
<form id="vip" class="pop_form" action="mail-vip.php">
<h4>ОPlease leave your contacs, we will come back soon!</h4>
<input type="text" name="name" placeholder="Name" required />
<input type="text" name="phone" placeholder="Telephone" required />
<input type="text" name="email" placeholder="E-mail" required />
<input type="text" name="time" placeholder="Callback time" />
<div align="center"><button type="submit">Send</button></div>
</form>
Jquery:
$("form").submit(function() {
$.ajax({
type: "GET",
url: "mail.php",
data: $("form").serialize()
}).done(function() {
alert("Спасибо за заявку!");
setTimeout(function() {
$.fancybox.close();
}, 1000);
});
return false;
});
PHP:
<?php
$recepient = "email;
$sitename = "Website";
$name = trim($_GET["name"]);
$phone = trim($_GET["phone"]);
$email = trim($_GET["email"]);
$email = trim($_GET["time"]);
$pagetitle = "New inquiry for \"$sitename\"";
$message = "Имя: $name \nTelephone: $phone \nE-mail: $email \nTime: $time";
mail($recepient, $pagetitle, $message, "Content-type: text/plain; charset=\"utf-8\"\n From: $recepient");
?>
Thanks!!!
There are various way you can do that.
One of the way could be (minimal change to your code)
Add an hidden field in your form which will be automatically sent to your php and extract it to see it's type.
e.g. <input type="hidden" name="type" value="vip">
So it should look like,
<form id="vip" class="pop_form" action="mail-vip.php">
<h4>ОPlease leave your contacs, we will come back soon!</h4>
<input type="text" name="name" placeholder="Name" required />
<input type="text" name="phone" placeholder="Telephone" required />
<input type="text" name="email" placeholder="E-mail" required />
<input type="text" name="time" placeholder="Callback time" />
<input type="hidden" name="type" value="vip">
<div align="center"><button type="submit">Send</button></div>
</form>
form id is vip i think you need write $("#vip").submit
In the other word,the button where the type "submit " will also submit your form data ,so you don't need write the Ajax
query
Related
So I have a contact form on my website. I was able to get the submission sent with perl and it works. But I don't want the page to refresh, instead, I want it to display a success message. To make it clearer, the form would look like this after it's submitted:
What I want it to look like after the submit button is clicked
Of course, I don't want the page to refresh.
I have tried several php tutorials and I read dozens of stackoverflow questions but I couldn't get it to work, maybe that's because am completely new to php and ajax. Help is greatly appreciated
That's the html of my form:
<form id="form" name='feedback' method='POST' action='/cgi-bin/TFmail.pl' accept-charset='UTF-8'>
<input type='hidden' name='_config' value='feedback' />
<div id="texts">
<input type="text" id="name" name="name" required placeholder="Full Name"/><br>
<input type="email" id="email" name="email" placeholder="E-mail" required/><br>
<input type="tel" id="phone" name="phone" placeholder="Phone Number" required/><br>
<textarea id="message" name="comments" placeholder="Type Message Here" required></textarea><br>
</div>
<div id="buttons">
<input id="but" type="submit" value="Submit"/>
<input id="clear" type="reset" value="Clear"/>
</div>
</form>
this is a basic form submission using ajax:
$("#form").submit(function(e) {
var url = "path-to-your-script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
taken from Submitting HTML form using Jquery AJAX
I'm using the Remodal plugin to show modals on my website. (https://github.com/VodkaBears/Remodal) This works great for my needs. This is the first time I'm working with modals and e-mail forms. I have a script to submit the form, and it looks like this;
<form name="contact" id="contact" class="contact" method="post">
<label for="name">
<span>Name</span>
<input type="text" name="name" required="true" />
</label>
<label for="email">
<span>Email</span>
<input type="email" name="email" required="true" />
</label>
<label for="phone">
<span>Phone</span>
<input type="text" name="phone" required="true" />
</label>
<label for="message">
<span>Your message</span>
<textarea name="message" required="true"> </textarea>
</label>
<label>
<br>
<span> </span>
<input type="submit" class="send" value="Send"/>
</label>
</form>
And this is my script for submitting the form;
$(document).on('click', '.send', function () {
$.ajax({
type: "POST",
url: "mail.php",
data: $('form.contact').serialize(),
success: function (msg) {
$("#thanks").html(msg)
$("form.contact").modal('hide');
},
error: function () {
alert("Error.");
}
});
return false;
});
Mail.php:
<?php
//if "email" variable is filled out, send email
if (isset($_REQUEST['email'])) {
//Email information
$admin_email = "my#email.com";
$name = $_REQUEST['name'];
$email = $_REQUEST['email'];
$phone = $_REQUEST['phone'];
$message = $_REQUEST['message'];
//send email
mail($admin_email, "New e-mail", $message, "From:" . $email);
//Email response
echo "Thank you!";
}
?>
I found this code somewhere, and I'm trying to implement it to my form. It works! However, I don't get any success message or error messages with this. I'm trying to wrap my head arond it, but can't figure it out. Can someone help?
Good day/evening. I have this sort of form in HTML:
<form action="scripts/form-testimonial.php" class="form" method="post">
<ul>
<li><label for="name">Name</label> <input class="required" id="namef3" name="name" placeholder="Name" type="text"></li>
<li><label for="email">E-mail</label> <input class="required" id="emailf3" name="email" placeholder="E-mail" type="text"></li>
<li><label for="company">Company</label> <input id="companyf3" name="company" placeholder="Company (if applicable)" type="text"></li>
<li><label for="msg">Message</label> <textarea class="required" cols="43" id="msgf3" name="msg" placeholder="Your feedback" rows="8"></textarea></li>
</ul>
<button class="submit" type="submit">Send your feedback</button>
</form>
and this sort of php sript for this form as a separate file:
<?php
$receip = "office#avehire.co.uk";
$subj = "Testimonial";
$bodymsg = "Name: ".$_POST['name']."\n"
."Company: ".$_POST['company']."\n"
."Email: ".$_POST['email']."\n"
."Message: ".$_POST['msg']."\n";
if(!$_POST['msg']){
header("Location: ../error.html");
exit;
}
$email = $_POST['email'];
if(mail($receip, $subj, $bodymsg, 'From: Contact <'.$email.'>')){
header("Location: ../msg_sent_feedback.html");
}
?>
I also have a validator for this form, but this is not important. What is more important here is the way how this form works. Basically - when you click submit button - it goes to a separate php file, process the form and then - from what is already there - goes to msg_sent_feedback.html file. What I want to do is to NOT opens a separate file but just display a message in the same basic html file where the actual form exists. A message e.g. "Message sent".
Another thing - if I already have a validation script - do I need to have the first "if" in this form? or can I remove it totally? the one which redirects to error.html. Or can I remove these 4 lines? That line - I guess - is responsible for errors in the form, but as I mentioned, I have a validation script. I don't really want to change html. is it possible to modify the php script to work within the html document, as instructed above? thanks
Here is an Jquery ajax example that will help you.
<?php
$receip = "office#avehire.co.uk";
$subj = "Testimonial";
$bodymsg = "Name: ".$_POST['name']."\n"
."Company: ".$_POST['company']."\n"
."Email: ".$_POST['email']."\n"
."Message: ".$_POST['msg']."\n";
if(!$_POST['msg']){
echo "<h1>Error sending e-mail";
exit;
}
$email = $_POST['email'];
if(mail($receip, $subj, $bodymsg, 'From: Contact <'.$email.'>')){
echo "<h1>Email sent successfully</h1>";
}
?>
Html :
<!Doctype html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function submitmyform(){
data=$('#myform').serialize();
$.ajax({
url: "myphpfile.php",
type:'POST',
data:data,
async:false,
dataType:'html',
success: function(msg){
$('#response_goes_here').html(msg);
}
});
}
</script>
<form action="" id="myform">
<ul>
<li> <label for="name">Name</label> <input id="namef3" name="name" type="text" placeholder="Name" class="required"/>
</li>
<li> <label for="email">E-mail</label> <input id="emailf3" name="email" type="text" placeholder="E-mail" class="required"/>
</li>
<li> <label for="company">Company</label> <input id="companyf3" name="company" type="text" placeholder="Company (if applicable)" />
</li>
<li> <label for="msg">Message</label> <textarea id="msgf3" name="msg" cols="43" rows="8" placeholder="Your feedback" class="required"></textarea>
</li>
</ul>
<button type="button" class="button" onclick="submitmyform();">Send your feedback</button>
</form>
<div id="response_goes_here"></div>
When I submit a form using the attached code, instead of the message appearing in the div, the screen is refreshing itself and it is holding the completed form in the browser cache. I have obviously got it wrong somewhere and would be grateful if someone could point out my error. I have posted the relevant code, but if there is something I have missed, then please let me know.
In firebug, I can see the correct data that is being returned in the post tab.
I wasn't sure of the best place to post, so if this is incorrect, admin, please amend as you see fit. many thanks.
jquery code
//Begin function to submit report form
$(function(){
$(".frmreport").submit(function(){
var formdata = $(this).serialize();
$ajax({
type: "POST",
url: "../frm10010.php",
data: formdata,
dataType: "json",
success: function(msg){
$("#report_result").html("You have succesfully submitted your report. Thank you.");
}
});
return false;
});
});
// End function to submit report form
frm10010.php
<?php
$dept = mysql_real_escape_string($_POST['dept']);
$name = mysql_real_escape_string($_POST['name']);
$email = mysql_real_escape_string($_POST['email']);
$position = mysql_real_escape_string($_POST['position']);
$feedback = mysql_real_escape_string($_POST['feedback']);
$form = array('dept'=>$dept, 'name'=>$name, 'email'=>$email, 'position'=>$position, 'feedback'=>$feedback);
$result = json_encode($form);
echo $result;
?>
html
<div id="report_result"></div>
<div id="formShow">
<form class=frmreport" method="post" class="webform">
<fieldset>
<legend><span class="subtitle">Submit Technical Report</span></legend>
<label for="dept">Department</label>
<input id="dept" name="dept" class="text" type="text" />
<label for="name">Full Name:</label>
<input id="name" name="name" class="text" type="text" />
<label for="email">Email address:</label>
<input id="email" name="email" class="text" type="text" />
<label for="position">Position:</label>
<input id="position" name="Position" class="text" type="text" />
<label for="feedback">Problem:</label>
<textarea name="feedback" cols="22" rows="5"></textarea>
</fieldset>
<input class="submit" type="submit" name="submit" value="Submit Report" />
<input class="cancel" type="reset" name="cancel" value="Clear Report" />
</form>
</div>
You have couple of errors here
$ajax({ should be $.ajax({
Second you have an error in the form class
<form class=frmreport" method="post" class="webform">
should be
<form class="frmreport" method="post" class="webform">
Don't use
$(".frmreport").submit(function(){
Instead use
$("#sub_btn").click(function(){
And in html
<input class="submit" type="submit" name="submit" value="Submit Report" />
Change it to
<input class="submit" id="sub_btn" type="button" name="submit" value="Submit Report" />
Another way to do it making submit handler false. But above solution will work here. There is also . is missing in ajax call.
I have a contact form script, and I added a few fields to it, identical to the rest, but the new variables on submit give 'notices' of undefined index, and the variables do not populate. I grab them POST like this,
$name = $_POST['name'];
$website = $_POST['website'];
$company = $_POST['company'];
$addy = $_POST['addy'];
$email = $_POST['email'];
$phone = $_POST['phone'];
The name, email and phone all work, but website, addy and company do not.
The JavaScript that grabs it looks like so,
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
website: $('#website').val(),
company: $('#company').val(),
addy: $('#addy').val(),
phone: $('#phone').val(),
..etc
What can cause this? I am unsure what other code would be helpful, thank you.
EDIT TO ADD HTML.
Here is some of the form code in the HTML, I can not see anything I missed..
<form method="post" action="send_mail.php" name="contactform" id="contactform">
<fieldset>
<legend>Please fill in the following form to contact us</legend>
<label for=name accesskey=U><span class="required">*</span> Your Name</label>
<input name="name" type="text" id="name" size="30" value="" />
<br />
<label for=email accesskey=E><span class="required">*</span> Email</label>
<input name="email" type="text" id="email" size="30" value="" />
<br />
<label for=website accesskey=W>Website</label>
<input name="website" type="text" id="website" size="30" value="" />
<br />
<label for=company accesskey=C>Company</label>
<input name="company" type="text" id="company" size="30" value="" />
<br />
<label for=addy accesskey=A>Address</label>
<input name="addy" type="text" id="addy" size="30" value="" />
If the values is false or empty, the post won't include those variables in the AJAX call. Recommend you to use isset() in the PHP to verify the variables are set:
$name = isset($_POST['name']) ? $_POST['name'] : '';
etc...
Detailed explanation
If we in javascript (jQuery) has following code:
$.post('url',{
'foo': 'bar',
'baz': $('#nonexisting_element').val(),
'qux': 'quux'
},...);
An #nonexisting_element doesn't exists, it will send following:
foo=bar&qux=quux
and on the PHP side following will end up in the PHP array:
$_POST = array (
'foo' => 'bar'
'qux' => 'quux'
);
jQuery does not send post fields whose value is null. So in your case the error is probably that you don't have fields with the given IDs website, addy, ....
Maybe you forgot to add the id=".." attribute or forgot to change it when copying the old code?