This php/ajax/jquery thing is new to me, but I do have a much better understanding of HTML/CSS.
I'm developing a site [http://vgdesign.net/thc/] and one of the things left to do is program the form to do exactly what I want. To my knowledge it's functioning fine- except I want it to do just one more thing. When the submit button is pressed, and the code passes validation, I would like for a "Thank You" message to be displayed like below and also without refreshing the page.
[http://i.stack.imgur.com/GkMAI.png]
I found a code that should essentially do just that:
$(function() {
$("#send").click(function() {
var name = $("#name");
var email = $("#email");
var comments = $("#comments");
var dataString = 'name='+ name + '&email=' + email + '&comments=' + comments;
if(name=='' || email=='' || comments=='')
{
$('.success').fadeOut(200).hide();
}
else
{
$.ajax({
type: "POST",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
}
});
}
return false;
});
});
This code was taken from http://www.9lessons.info/2009/04/submit-form-jquery-and-ajax.html
Now I should mention since this doesn't work, this could be disregarded..maybe there's a different way of achieving what I want. I'm just showing where my research has taken me. I have .success defined in my stylesheet and it's at {display:none} but I can't get it to work due to my limited knowledge of the language.
I'm assuming I need to figure out a way to integrate the code above into my validation code so that the message displays right after a validation has succeeded. I used http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/ for the validation tool.
Any help on this would be appreciated. I hope I wasn't too confusing.
Please let me know if I can clarify anything else.
Thanks!
You will want to take a look at http://api.jquery.com/jQuery.post/ which tells you how to use the jQuery API to POST requests and handle the response. It also has some nice examples.
If you are using jQuery 1.5 you can make it really clear to read:
// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.post("example.php", function() {
alert("success");
})
.success(function() { alert("second success"); })
.error(function() { alert("error"); })
.complete(function() { alert("complete"); });
change this
var name = $("#name");
var email = $("#email");
var comments = $("#comments");
to this
var name = $("#name").val();
var email = $("#email").val();
var comments = $("#comments").val();
you were saving what I am assuming was a form element, not the value entered into the form element.
you can also use the $.post() function instead of the $.ajax() which takes a first value of the remote base url, a second value of an object with your dataString as key, values and the callback function as the third value.
$.post(
'example.html',
{ 'name' : name, 'email' : email, 'comments' : comments},
function(data){
$('.success').fadeIn(200).show();
}
);
the data variable will hold your response from the ajax call which it seems like you don't need right now. But for next time ;)
Related
UPDATE: Wow that was the fastest response ever and so many answers in minutes of each other. Amazing. Ok here is what I am trying to do. http://edvizenor.com/invoice33/
I want to edit this invoice on the fly but when I hit the BLUE BOX at the top I want to preview or see this content on the next page contained php var echoed out.
This blue box will change later to be a button at the bottom but for testing I am using it.
As you see it calls the ajax script but I need the edited content of the div to be sent a php var to I can echo it on the preview page. If I can put it in a php var I do what I will with it on the next page. Does that make sense? Thanks guys for your quick responses.
OLD POST
Is it possible to get the contents of a div using jQuery and then place them in a PHP var to send via GET OR POST?
I can get the contents of the div with jQuery like this:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("#MyButton").click(function()
{
var htmlStr = $("#MyDiv").html();
});
});
</script>
But how do I put the jQuery var in a php var. I need to do this by a BUTTON press too. This is not included in the code above. I need because the div file is changeable and when I hit UPDATE and send via PHP it needs to have the latest content.
According to your situation,
You are trying to send JavaScript variable to PHP.
The only common way to do this is to exchange in JSON format,
for example, suppose we have basic text editor
Jquery:
$($document).ready(function(){
$("#submit-button").click(function(){
$.post('yourphpscript.php', {
//this will be PHP var: //this is JavaScript variable:
'text' : $("#some_text_area").text()
}, function(response){
//To avoid JS Fatal Error:
try {
var result = JSON.parse(response);
//get back from PHP
if ( result.success){ alert('successfully changed') }
} catch(e){
//response isn't JSON
}
});
});
});
PHP code
<?php
/**
*
* So we are processing that variable from JavaScript
*/
if ( isset($_POST['text']) ){
//do smth, like save to database
}
/**
* Well if you want to show "Success message"
* that div or textarea successfully changed
* you can send the result BACK to JavaScript via JSON
*/
$some_array = array();
$some_aray['success'] = true;
die( json_encode($some_array) );
You'll need to use ajax to send the value to your server.
var html = $('#myDiv').html();
$.ajax({
type: 'POST',
url: '/SomeUrl/MyResource.php',
data: JSON.stringify({ text: html }),
success: function(response)
{
alert('Ajax call successful!');
}
});
The thing you need is AJAX (see http://en.wikipedia.org/wiki/Ajax_(programming))
The basic idea is to send a http request with javascript by e.g. calling a php script and wait for the response.
With plain Javascript AJAX requests are a bit unhandy, but since you are already using jQuery you can make use of this library. See http://api.jquery.com/jQuery.ajax/ for a complete overview.
The code on client side would be something like this:
$.ajax({
url:'http://example.com/script.php',
data:'var=' + $('#myDiv').html(),
type:'GET'
success:function(response) {
console.log(response) // Your response
},
error:function(error) {
console.log(error) // No successful request
}
});
In your script.php you could do something like this:
$var = $_GET['var'];
// Do some processing...
echo 'response';
and in your javascript console the string response would occur.
In modern ajax based applications the best practise way to send and receive data is through JSON.
So to handle bigger datasets in your requests and responses you do something like this:
$.ajax({
url:'http://example.com/script.php',
data:{
var:$('#myDiv').html()
},
type:'GET'
success:function(response) {
console.log(response) // Your response
},
error:function(error) {
console.log(error) // No successful request
}
});
And in your PHP code you can use the $someArray = json_decode($_GET['var']) to decode JSONs for PHP (it will return an associative array) and $jsonString = json_encode($someArray) to encode an array to a JSON string which you can return and handle as a regular JSON in your javascript.
I hope that helps you out.
You can use hidden form fields and use jQuery to set the value of the hidden field to that, so when the button is clicked and form submitted, your PHP can pick it up as if it were any other form element (using $_POST). Alternatively, you can use AJAX to make an asynchronous request to your PHP page. This is probably simpler. Here's an example:
$("#myButton").click(function() {
var htmlStr = $('#myDiv').html();
$.post("mypage.php", { inputHTML : htmlStr },
function(data) {
alert("Data returned from mypage.php: " + data);
});
}
Yes, Its possible
<script type="text/javascript">
$(document).ready(function(){
$('#MyButton').click(function(){
$.post('sendinfo.php',
{
data: $('#data').html()
},
function(response){
alert('Successfully');
});
});
});
</script>
<div id="data">Here is some data</div>
Use ajax for sending value to php (server).. here's a good tutorial for ajax with jquery http://www.w3schools.com/jquery/jquery_ajax.asp
you should just use Ajax to send your variable.
$.ajax({
url:'whateverUrl.php',
type:'GET',
data:{
html : htmlStr
}
});
Using AJAX:
$("#MyButton").click(function() {
var htmlStr = $("#MyDiv").html();
$.ajax({
url: "script.php",
type: "POST",
data: {htmlStr : htmlStr},
success: function(returnedData) {
//do something
}
});
});
Something like below should work.
Read more: http://api.jquery.com/jQuery.post/
$("#YourButton").click(function(e){
e.preventDefault();
var htmlStr = $("#YourDiv").html();
$.post(
url: 'YourPHP.php',
data: '{"htmlStr" : "'+htmlStr+'"}',
success: function(){
alert("Success!");
}
);
});
Send the data via XmlHttpRequest ("ajax") to your php page either via POST or GET.
I made a moderation script, voting up and down question and answers. Time ago the script worked, but when i came back to start coding in this project one more time, it doesn't work anymore.
The script was doing: when you click in a div called vote, or vote1 a link, it ask if it's up or down. If it's up, it loads url: "mod_up_vote.php" sending by post some info about the question you are voting on. It was ok. But not now. It doesn't load that page, because i was printing and inserting in database the $_POST variable and nothing was there.
What do you think is wrong here? Thanks.
$(document).ready(function()
{
$(document).delegate('.vote, .vote1', '.vote2', 'click', function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='mod_up')
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "mod_up_vote.php",
dataType: "xml",
data: dataString,
cache: false,
success: function(xml)
{
//$("#mod-pregunta").html(html);
//$("#mod-respuesta").html(html);
//parent.html(html);
$(xml).find('pregunta').each(function(){
var id = $(this).attr('id');
var pregunta = $(this).find('preguntadato').text();
var respuesta = $(this).find('respuestadato').text();
var votoup = $(this).find('votoup').text();
var votodown = $(this).find('votodown').text();
var id_pregunta = $(this).find('id_pregunta').text();
var id_respuesta = $(this).find('id_respuesta').text();
$("#mod-pregunta").html(pregunta);
$("#mod-respuesta").html(respuesta);
//$(".vote").attr('id', $(this).find('id_pregunta').text());
$(".vote1").html("Aceptar");
$(".vote2").html("Rechazar");
//$("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
} });
}
return false;
});
This looks like a problem with your JQuery. Why are you using delegate instead of click? Also, your arguments to delegate appear to be incorrect. If you look at the documentation you'll see the function signature is:
$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+
You are binding your function to an event called '.vote2', which I can only assume does not exist.
Try using click instead, there's no reason to use delegate as far as I can tell.
edit:
Try using click like so:
$('.vote, .vote1').click(function(){ /* your code here */ });
I am implementing a twitter-style follow/unfollow functionality with the following jquery.
$(function() {
$(".follow").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#loading").html('<img src="loader.gif" >');
$.ajax({
type: "POST",
url: "follow.php",
data: info,
success: function(){
$("#loading").ajaxComplete(function(){}).slideUp();
$('#follow'+I).fadeOut(200).hide();
$('#remove'+I).fadeIn(200).show();
}
});
return false;
});
});
I have a similar unfollow function. However i have the following problem:
When I have N items {1,2..i.N} each with id = followi and I click on the follow button. I find that some of the items respond while others do not. I suspect it is a pure javascript issue...otherwise i figure none of the buttons would respond at all.
Is it a timing issue...all help is appreciated. Also i'd appreciate it if you could point me to a simpler method.
Thanks!
Well you are doing the UI update in your ajax success handler, so the reaction time for the UI updated is based on the speed of the Ajax response. And if the server doesn't return successfully, the UI update won't happen at all.
A simpler method with instant response:
$(function() {
$(document.body).delegate(".follow","click",function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#loading").html('<img src="loader.gif"/>');
$('#follow'+I).fadeOut(200); // act instantly since we assume it will go well
$('#remove'+I).fadeIn(200); // act instantly since we assume it will go well
$.ajax({
type: "POST",
url: "follow.php",
data: info,
complete: function(){ //always remove the loader no matter if it goes well or not
$("#loading").slideUp();
},
error: function() {
//handle error
$('#follow'+I).fadeIn(200); // correct mistake
$('#remove'+I).fadeOut(200); // correct mistake
}
});
return false;
});
});
I have a form that requires a physical address. Once the user enters the full address, I have a button that says "Verify address". I want to be able to click that button, trigger an ajax call that will call a file in the server which will get the longitude and latitude of that address, then return to the form with those coordinates, and display a div with them. Dont worry about figuring out the coordinates. Im just trying to figure out the whole ajax call and jquery display upon response from the server. Thanks
So, I did this to have things working:
$(document).ready(function() {
//if verify button is clicked
$('#verify').click(function () {
var address = $('input[name=address]');
var city = $('input[name=city]');
var state = $('input[name=state]');
var zip = $('input[name=zip]');
var country = $('select[name=country]');
//organize the data for the call
var data = 'address=' + address.val() + '&city=' + city.val() + '&state=' + state.val() + '&zip=' + zip.val() + '&country=' + country.val();
//start the ajax
$.ajax({
url: "process.php",
type: "GET",
data: data,
cache: false,
success: function (html) {
//alert (html);
if (html!='error') {
//show the pin long and lat form
$('.form2').fadeIn('slow');
} else alert('Error: Your location cannot be found');
}
});
//cancel the submit button default behaviours
return false;
});
});
process.php returns the longitude and latitude back in a variable as: "longitude,latitude". How do I access that data back in the front end so I can populate the form fields with it? Thanks a lot for the great responses.
I hope this is helpful. This would be a generic AJAX call to a php page:
$.ajax({
type: "POST",
url: "scripts/process.php",
data: "type=query¶meter=" + parameter,
success: function (data) { //Called when the information returns
if(data == "success"){
//Success
} else {
//Fail
}
},
error: function () {
//Complete failure
}
});
The jQuery function you need is jQuery.get().
You can find other details here: http://api.jquery.com/category/ajax/
Sorry for the scarce details but you haven't provided source code.
I have a nice looking slideup/slidedown jquery form on my website. It sends the data to the same file to send the email. This works fine:
$(document).ready(function(){
$('div.contact a.submit').click(function() {
var name = $('div.contact input.name').val();
var email = $('div.contact input.email').val();
var message = $('div.contact textarea.message').val();
$('div.contact').slideUp('slow', function() {
$.ajax({
type: "POST",
url: "test.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success: function(msg)
{
$('div.contact').html('<h1>Contact</h1><div class="comment">Success!</div><div class="clear"></div><p class="indent">Thank you, we will be in contact shortly.</p>');
$('div.contact').slideDown('slow');
}//end of success
});//end of ajax
});
});
});
The php at the top of test.php to send the email:
include("expander-b1.0.php");
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
sendmail("admin#site.co.uk", $message, "Contact message from $name", $email);
This is getting my simple mail function from a external file. However, I would like some way to validate the form entry (including email validation), then display the error(s) in the contact dive. I am not that experienced with jQuery or ajax but an unable to get it working with using if statements in my php and echoing the variables in the "success" part of the ajax.
$(document).ready(function(){
$('div.contact a.submit').click(function() {
var name = $('div.contact input.name').val();
var email = $('div.contact input.email').val();
var message = $('div.contact textarea.message').val();
//Email Validation
var reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if(reg.test(email) == false) {
alert('Invalid Email Address');
return false;
}
//Name and message VALIDATION
//-------- goes here ------------//
$('div.contact').slideUp('slow', function() {
$.ajax({
type: "POST",
url: "test.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success: function(msg)
{
$('div.contact').html('<h1>Contact</h1><div class="comment">Success!</div><div class="clear"></div><p class="indent">Thank you, we will be in contact shortly.</p>');
$('div.contact').slideDown('slow');
}//end of success
});//end of ajax
});
});
});
you need to use mysql_real_escape() to filter evil code in the post and you can use regular expression to check for a valid email. if you google for it you will find a lot of documentation and tutorials about that.
you can also make it easy on yourself and buy (or find a free one) a ready to use validation class -> Codecanyon validation class
and about the success part have a look at this question -> how can i create a success back function?
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
A JQuery-based validation script that works very well to validate and automatically insert error messages if a section of your code fails validation. Simply include files, add jquery (see source of examples for best methods) and add the "required" element to your class names. Should be a perfect solution to your problem....with no crazy math or individual selectors required.