I was looking for a simple contact form in jQuery and I found out this one on Google
http://code.google.com/p/gunnertech/source/browse/trunk/public/javascripts/contact.js?r=3
the problem is that it is missing the PHP part. Here is the part where the script handle the message and pass it to the PHP file:
function send(a, d){
$.ajax({
type: "POST",
url: a,
data: d,
success: handle
});
}
I don't know what this "a" and "d" means. Do you know what do I need to do in order to make this jquery form work and simply send the content to a specified email address? Thanks.
EDIT: thanks to everyone. Now I understand what the two letters means. The problem is that I don't know what to write in the PHP file to send the data to my email! This is the HTML part:
<form method="post" action="/" id="contact">
<div>
<label for="contact-text" class="js-placeholder placeholder">
<span>Type your name, email, and message here.</span>
</label>
<textarea aria-required="true" required="" rows="1" cols="70" id="contact-text" name="contact_text" style="height: 15px; overflow: hidden; padding-top: 0px; padding-bottom: 0px;">
</textarea>
</div>
<input type="submit" value="Send" name="contactsend" id="contactsend">
</form>
Can you help me? Thanks.
I suppose 'a' would be the form's 'action' attribute. And 'd' the forms 'data', meaning the form's fields concatenated into one string (which you'd then need to parse in your php script).
EDIT: Could you also post the part where the 'send' function is called?
a is your contact form handler (ex: contact.php) and d is the data you want to pass to it, for ex: {name: 'Joe', age: 27}
The function is looking for the action file (where the PHP is). So whatever you set <form action=""> to jQuery will send to it. "d" is the data your contact form is collecting sent serialized to your action file.
You can create a simple php file to handle the data that works the same way a traditional PHP send mail would work.
According to your posted code:
//note that d get the data from your contact form
var a = 'your_contact_page.php';
var d = {name: 'your_name_from_contact', subject: 'subject_from_conatc_form'}
function send(a, d){
$.ajax({
type: "POST",
url: a,
data: d,
success: handle
});
}
and handle is also a function that will produce you the response
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
When I click on the submit button it should give a $_POST to my send page.
What I do is:
-> When Click on <input type="submit" name="sendMail" value="Verzend E-Mail" class="sendMail">
-> I make a var link and set the whole <form action="" method="post" id="formSendMail"> in it.
-> Then give with a $.ajax() request the link as data to the page where I send it to.
-> When .done(function(data)) put data in $("div.emailSendComplete")
So now you know what I exually want...
What I have till now on code is:
Jquery:
<script>
$(document).ready(function(){
$("input.sendMail").on("click", function(){
var link = $("form#sendMailForm");
$.ajax({
type: "POST",
url: "checklistHandler.php?action=sendMail",
data: link
}).done(function (data){
$("div.emailSendComplete").append(data);
});
});
});
</script>
HTML:
<table id="cont" style="line-height: 80px; text-align: center;">
<tr id="sendMail" style="">
<form action="checklistHandler.php" method="post" id="sendMailForm">
<td style="width: 150px;">Email:</td>
<td>
<input style="padding: 5px; text-align: center; min-width: 10px; border-radius: 3px;" id="email" type="text" name="email" id="email" value="<?= $email ?>">
<span class="emailCheck"></span>
</td>
<td style="position: relative; left: 50px;">
<input type="hidden" name="verzendMail" value="1">
<input type="submit" name="sendMail" value="Verstuur E-Mail" class="sendMail" style="border-radius: 3px;">
</td>
</form>
</tr>
PHP(checklistHandler.php):
if ($_GET['action'] == 'sendMail') {
print_r($_POST);
exit();
}
Resolved:
The I did try to give the whole POST but I also could only give the INPUT with the email in it.
Cuz I only needed that.
Are you trying to send the HTML of the form? If so, instead of this:
var link = $("form#formSendMail");
(That will return a jquery object unless I'm mistaken)
use this:
var link = $("#formSendMail").html();
Not entirely clear what you are trying to do, so I may have misunderstood...
There are two three problems here:
You are not cancelling the default form submit, so your form will submit the normal way as well and your page will be refreshed;
You are not sending any data to your script with your ajax call, just a jQuery object, the form;
Your form has a different ID than the one you are using in your ajax call: formSendMail vs sendMailForm.
It should look more or less like:
$(document).ready(function(){
$("input.sendMail").on("click", function(event){
^^^^^ you need this later on
// second and third problem, missing data and wrong ID
var link = $("form#sendMailForm").serialize();
^^^^^^^^^^^^ use the right ID here
// first problem, default submit
event.preventDefault();
// the rest of your code
There are few things you need to change in your code
$(document).ready(function(){
//instead of input button click use form
$("#sendMailForm").submit(function(e){
// first problem, prevent default submit
e.preventDefault();
var link = $('#sendMailForm').serialize();
$.ajax({
type: "POST",
url: "checklistHandler.php?action=sendMail&email=",
data: link
}).done(function (data){
$("div.emailSendComplete").append(data);
});
});
});
Hi I have been at this for days now and I just cant figure out why this isn't working, please could someone take a look.
index.php
<form id = "update_status" method = "POST">
<textarea id="shadow" name ="user_status" placeholder = "Share what is on your mind!" cols="97" rows="1" title="Share what's on your mind"></textarea>
<input style="float:right; margin-top: 0.3%;margin-right : 0% !important;" id = "btnStatus_update" name = "btnStatus_udate" type="button" value="Add Post" title="Your posts will be made public"></input></form>
swift.php
$(document).ready(function(){
$("#btnStatus_update").click(function(e) {
e.preventDefault();
//alert("Confirming function works");
$.ajax({
cache: false,
type: 'POST',
url: './datacenter.php',
data: $("#user_status"),
success: function(d) {
$("#successMesg").html(d);
}
});
});
});
datacenter.php
if (isset($_POST['user_status'])) {
var_dump($_POST['user_status']);
foreach ($_POST as $ak => $av) {
if (empty(trim($_POST['user_status']))) {
echo 'Say what is on your mind'.' ';
} else {
$userstatus = $_POST['user_status'];
add_user_status($user_data['id'], $userstatus);
}
}
}
using var_dump for testing I was hoping it did return the data, but instead i get NULL, i need the data so i can pass it into the add_user_status function to be added to the database, but it seems there is something missing or off about the code denying me my satisfaction. Please help
There are a few things that appear to be missing:
Index.php:
You need to add an action="something" attribute to the form tag, this tells the form what to do when you submit it. (unless you are manually handling this is JS somewhere else?)
<form id = "update_status" action ="data.php" method = "POST">
Also, unless you are using JavaScript on the index page to handle the actual submitting of the form, your <input> should include a type="submit" attribute. (this will also make it a button) and when clicked it will automatically submit the form to the action location above.
Swift.php:
the code posted is JS, and does what the first line of the previous paragraph mentioned (handles the submit button). Do you include this file inside the index.php? if the index.php cannot see it, then it wont run. It must also be in the html somewhere in a proper <script> block.
I believe the correct way to send form data using ajax is to serialize the data:
$('#update_status').serialize() instead of just sending the one input field.
You will also be required to reference the jQuery libraries, preferably in the index, but could also go in swift.php. I am also assuming that the code posted appears in the necessary <script> block.
Data.php:
should this be datacenter.php? your Swift.php is sending the ajax request to ./datacenter.php
On a side note, if you need it to use Ajax then you actually don't need the action ="data.php" method = "POST" in the form (Ajax does all that for you)
The way it could be done would be something like this:
Index.php:
// HTML beginning stuff
<head>
// Either reference the script in its own JS file or:
// Need to also include jquery library
<script type="text/javascript">
$(document).ready(function(){
$("#btnStatus_update").click(function(e) {
e.preventDefault();
//alert("Confirming function works");
$.ajax({
cache: false,
type: 'POST',
url: './datacenter.php',
data: $('#update_status').serialize(),
success: function(d) {
$("#successMesg").html(d);
}
});
});
});
</script>
</head>
<body>
<form id = "update_status">
<textarea id="shadow" name ="user_status" placeholder = "Share what is on your mind!" cols="97" rows="1" title="Share what's on your mind"></textarea>
<input style="float:right; margin-top: 0.3%;margin-right : 0% !important;" id = "btnStatus_update" name = "btnStatus_udate" type="button" value="Add Post" title="Your posts will be made public"></input>
</form>
</body>
datacenter.php:
<?php
var UserStatus = user_status
if (!empty(UserStatus)) {
var_dump($_POST['user_status']);
// process as necessary
}
?>
But, including the
<form id = "update_status" action ="datacenter.php" method = "POST">
and changing the button to
<input style="float:right; margin-top: 0.3%;margin-right : 0% !important;" id = "btnStatus_update" name = "btnStatus_udate" type="submit" value="Add Post" title="Your posts will be made public">
will allow users to still post information if they have JavaScript disabled.
the selector for the textarea is incorrect, the id is not "user_status", its "shadow"
data: $("#user_status"),
should really be:
data: $("textarea[name=user_status]")
or
data: $("#shadow")
I've designed an HTML form to find the GPA , I want to ask the user to enter the mark, and pushing on "submit" button which sending marks to php Class in other page in the same project, the class should process the mark and find GPA , and then send GPA to the same HTML form and print it in a text box ;
i used submit button to go to PHP class.
this is the form's tag which i used
<form method="post" action="GPA.PHP">
After processing the data in php class, i want to send the result to html and put them into a text, this text :
<input type="text" style="text-align:center;" value="0.0" name="GPA" />
how can i do this ??
First, give an id to the input,
e.g. :
<input type="text" style="text-align:center;" value="0.0" name="GPA" id="result" />
Second, make sure that the form isn't submitted with its regular behaviour, by returning false on submit:
<form method="post" action="GPA.PHP" onSubmit="return false;">
And third, you may call the following javascript code when the submit button is clicked or whe the form is submitted:
$.ajax({
type: "POST",
url: "gpa.php",
data: { mark: "50" }
}).done(function( msg ) {
$('#result').val(msg);
});
I hope it works :)
I think I understand what you're saying. What you want to do is use ajax:
http://api.jquery.com/jQuery.ajax/
$.ajax({
type: "POST",
url: "gpa.php",
data: { mark: "50" }
}).done(function( msg ) {
$('div.gpa').html(msg);
});
So Post the students score (lets say they got 50 for this example) to gpa.php. On the gpa.php you would have you code to calculate the gpa and the send it back as msg. This would then output the gpa to the div id of gpa.
I'm having great issues making this contact form that can be seen on the below visual. What I want the contact form to do is display on submit a thank you message or a message of confirmation instead of redirecting to the contact.php file where there isn't any styles you can see this in action on the provided link.
I've found some information that I can do this with Jquery Ajax that I've also tried displayed below, but I still can't seem to get it to work on submit to show a message in the pop up.
Does anyone know an easier way to do this or maybe point me in the right direction as this is something that I've been trying to fix for god knows how long.
Thank you for any help
Visual:
http://madaxedesign.co.uk/dev/index.html
PHP & HTML:
<?php
$your_email = "maxlynn#madaxedesign.co.uk";
$subject = "Email From Madaxe";
$empty_fields_message = "<p>Please go back and complete all the fields in the form.</p>";
$thankyou_message = "<p>Thank you. Your message has been sent. We Will reply as soon as possible.</p>";
$name = stripslashes($_POST['txtName']);
$email = stripslashes($_POST['txtEmail']);
$message = stripslashes($_POST['txtMessage']);
if (!isset($_POST['txtName'])) {
?>
<form id="submit_message" class="hide_900" method="post" action="/contact.php" onsubmit="javascript: doSubmit();">
<div id="NameEmail">
<div>
<label for="txtName">Name*</label>
<input type="text" title="Enter your name" name="txtName" />
</div>
<div>
<label for="txtEmail">Email*</label>
<input type="text" title="Enter your email address" name="txtEmail" />
</div>
</div>
<div id="MessageSubmit">
<div>
<textarea maxlength="1200" title="Enter your message" name="txtMessage"></textarea>
<label for="txtMessage">Message</label>
</div>
<div class="submit">
<input type="submit" value="Submit" /></label>
</div>
</div>
</form>
Jquery:
function doSubmit(){
var postData = jQuery('#submit_message').serialize();
jQuery.ajax({
url: '/contact.php',
data: postData
}).done(function( html ) {
alert(html);
});
You can add return false; at the end of your doSubmit function or the following code to prevent the form to redirect the user to the action page.
var doSubmit = function (event) {
var postData = jQuery('#submit_message').serialize();
jQuery.ajax({
url: '/contact.php',
data: postData
}).done(function( html ) {
alert(html);
});
event.preventDefault();
}
$(function () {
$('#submit_message').submit(doSubmit);
});
Modified HTLM
<form id="submit_message">
...
</form>
What is this code doing ?
First, we are defining a function to submit the form data.
Notice the event argument in the function. The first variable in this function is all the form values serialized in a ajax-complient request string. The .ajax() function is sending all the datas to your server. Note that as you did not set the type argument in the .ajax() function, the data are going to be send using the GET HTTP method.
Finally, event.preventDefault() prevents the submit event to be triggered in the browser. When the browser detect a submit event, it will try to submit the form based on the action and the method parameters in the <form> html tag. Usually, this submission performs an user redirection to the action page. This event.preventDefault() will disable this redirection. Note that the event argument is going to be set automatically by jQuery.
Last part, the $(function() { ... }); part means "execute this part when the document is fully loaded." It ensures that the element with sumbit_message id exists before calling the .submit() method. This last method is an event binder. It means that when the submit event is fired on the submit_message form, the function doSubmit will be called.
I hope you have a better understanding of this script. This is a pretty basic one, but if you understand clearly the mechanics, it will help you do become a better jQuery programmer. :)
Fiddle Demo
1.<form onsubmit='confirm()'>
function confirm()
{
alert("Thank You");
}
2.in contact.php call the page that is displayed again
You need to prevent the default event of the form. To do this, add the e.preventDefault(); function to the top of your function in order to prevent this event from firing.
Also notice that we are passing the e parameter to your function. This represents the event that has been fired.
function doSubmit(e){
e.preventDefault();
var postData = jQuery('#submit_message').serialize();
jQuery.ajax({
url: '/contact.php',
data: postData
}).done(function( html ) {
alert(html);
});
}
Try this
change your form with
<form id="submit_message" class="hide_900" method="post">
and in script put it
$("#submit_message").submit(function(e){
e.preventDefault();
//call your ajax
});
Greetings from some noob trying to learn JQuery,
I am attempting to make it when you type something in a box below a div layer it reloads that layer upon submission of the form with a php get of the text box in the form. Expected behavior is it would reload that box, actual behavior is it don't do anything. Can someone help me out here.... Below is the code.
<div id="currentwxdiv">This is where the new stuff happens
</div>
<form name="changewx" action="/">
<input type="text" id="city">
<input type="submit" name="submit" class="button" id="submit_btn" value="New City" />
</form>
<script>
/* attach a submit handler to the form */
$('form[name="changewx"]').submit(function(event) {
/* get some values from elements on the page: */
var $form = $( this ),
city = $('#city').val()
/* Send the data using post and put the results in a div */
$('#currentwxdiv').load('http://api.mesodiscussion.com/?location=' + city);
return false;
});
</script>
Its giving the Javascript Console Error Error....
"XMLHttpRequest cannot load http://api.mesodiscussion.com/?location=goodjob. Origin http://weatherofoss.com is not allowed by Access-Control-Allow-Origin."
You are using POST method? is impossible to post to an external url because with ajax, the url fails the "Same Origin POlice".
If you use GET method, is possible to do that.
Another solution is to make a proxy. A little script that recive the params and then... using CURL or another thing you have to post to the external URL... finally, you jquery have to do the post thing to the proxy:
For example:
$.ajax({
url: '/proxy.php?location=' + city,
success: function(data) {
$('#currentwxdiv').html(data);
}
});
I do it so:
<div id="currentwxdiv">This is where the new stuff happens
</div>
<form name="changewx" action="/">
<input type="text" id="city">
</form>
<script>
$('#city').keyup(function() {
var city = $('#city').val()
$.ajax({
url: 'http://api.mesodiscussion.com/?location=' + city,
success: function(data) {
$('#currentwxdiv').html(data);
}
});
});
</script>
To help you out, i need to test this.
What's the url address of your html code working ?
http://api.mesodiscussion.com/?location= doesn't work... only list the directory content... maybe that's de problem?
Greatings.