ajax form validation with PHP - ajax

I am using PHP Zend framework and jQuery ajax to submit and validate a form using json data format. The PHP works great, the ajax works great too. The only problem is that if the form has more than one invalid input (e.g name and email are both invalid), the ajax executes error:function() part.
Here is the ajax code:
.ajax({
type:'POST',
url:'processForm.php',
dataType:'json',
data:str,
success:function(data){
//do something when ajax call is complete
//setup variables
switch (data.internal_code){
case 0:
$('#NameError').html(data.msg0);
break;
case 1:
$('#EmailError').html(data.msg1);
break;
case 2:
$('#TextError').html(data.msg2);
break;
case 3:
$('#contactForm').fadeOut(2000);
$('#successMessage').fadeIn(2000);
$('#successMessage').fadeOut(4000);
break;
}
},
error:function(data){
alert ("ajax did not work");
}
Please let me know how I can fix this error.

you need to look at what is in the error callback and determine what's going on. Or alternatively, open up webkit inspector or firebug and look at what is coming back from the server.
If your request works for valid input or input with 1 error, and you get the error callback for 2 invalid inputs, I bet the server is crashing and returning a 500. Without looking at the response from your server, its impossible to help more.

You cannot use a switch statement to check multiple forms because the outcome is only one set of actions.
The normal way to do it is to explicitly encode your JSON on the server to give a more meaningful result:
if(data.internal_code_0){
// do something
error++;
};
if(data.internal_code_1){
// do something else
error++;
};
// then at the end of the field processing
if(error == 0) {
// reset form field states and button states
// no need to submit form again - it has already been done!
};
You see here I am using explicit data.internal_code_0 it actually doesn't matter what value it contains, rather that it is either set or not, and therefore I can deal with multiple errors on the client side using ìfs.
Also I count the number of errors so that at the end of processing I know if all the fields have passed muster or not.
On the PHP side do this
if(!isset($_POST['inputFieldHTMLName']))
{
// do something
}
else
{
$errors['internal_code_0'] = 'you forgot to enter a value ';
};
// ... check other fields
if (count($errors, 1)>0)
{
echo json_encode($errors);
}
else
{
// form is good. Continue with processing
};

Related

Issue submitting wysiwyg data through Ajax

I am Using Cl Editor On a Cms in a working on, Everytime i submit data through ajax i am having problems with it.
Let's say i write 10 lines in my wysiwyg editor but i only receive 3 or 4 in php, after some debugging in firebug what i have noticed is the html i am sending through ajax contains a span with class "Apple-converted-space" <span class="Apple-converted-space"> </span> i am able to get everything before this span, but the text after this span is missing. I have no idea what it is. Let me write my code for better understanding.
To get cleditor data
var data = $(".cleditorMain iframe").contents().find('body').html();
Ajax Form Submission
if(window.XMLHttpRequest)
{
xmlhttp = new window.XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == '4' && xmlhttp.status == '200')
{
}
}
parameters = 'data=' + data
xmlhttp.open('POST', 'libs/make_procedure.php', true);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(parameters);
return true;
I have also tried jquery ajax method.. same problem exists there, so please do not ask me to use the other way to submit data via ajax.
Thanks
You may want to check whether it is javascript that is not sending correct data or your backend that is not able to receive it.
So first you should debug in javascript by writing an alert(data); statement right after you get the data from that cieditor control, and see what do you get there. Use Firefox and you can also copy the html using mouse pointer from the alert box. (which is not possible in IE)
You should also check the cieditor specs to see if there is any easier way to get data in javascript.
You may also want to consider using CKEditor.
You are posting the data without escaping the contents of the data. Since the & is the seperator for different fields in a post, data will contain only the part up untill the first &. Use encodeURIComponent to escape the data value.
Change the line
parameters = 'data=' + data
to
parameters = 'data=' + encodeURIComponent(data);
See also: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/encodeURIComponent

Detect AJAX Request

On my website I have mouse over and mouse out events set up on an HTML table. These events trigger ajax requests, and perform certain actions etc. However, i want to be able to not trigger a second request if one is already running. So, is there away to detect these requests, and therefore avoid a second. Incidentally Im using the jQuery $.ajax()
if it helps at all.
Thanks in advance
Chris
I'd try something simple like:
var requestMade = false;
function yourAjaxFunction(){
if(!requestMade)
{
requestmade = true;
$.ajax({
url: "page",
success: function(){
requestMade = false;
}
error: function(){
requestMade = false;
}
});
}
}
You can use the success: and error: settings to change the variable back to false.
I have never used the error so you may have to include some other things in it, but this is the general idea.
For this suppose I'd use ajaxStart() and ajaxStop() which would change specific variable ajaxRunning which could be checked before sending the request (maybe in ajaxStart() directly?)
Set global or local static variable to true when first ajax is about to trigger, than add if before triggering the second one ;) Than after one request is finished, set this variable to false

Can't get form to submit after successful AJAX validation with PHP and Prototype

I have forms on a site that are processed by PHP, including validation. Normally, if there's errors, the user is returned to the form with the appropriate error messages. For users with javascript enabled, I'm trying to write a javascript with Prototype that uses AJAX to do the same PHP validation (to avoid code duplication) and display the error messages without having to actually submit the form and wait for it to reload.
The script works very well at grabbing the errors via AJAX and displaying them. But, when there are no errors, I cannot get the form to submit and move forward to the next page. I've been working with Event.stopObserving, but it just reloads the page (which is not the form action url, the form submits to a different page than the form itself, so it's not the server sending the browser back). I'm not that good with javascript and Prototype, so I'm probably missing something obvious, but any help would be greatly appreciated. Anyway, here is my code:
document.observe("dom:loaded", function() {
$$('form')[0].observe('submit', validate);
function validate(event) {
event.stop();
// remove any existing error messages
var curErrors = $$('ul.error');
for( i=0, im=curErrors.length; i<im; i++ ) curErrors[i].remove();
$$('form')[0].request({
parameters: { 'js' : 1 },
requestHeaders: {Accept: 'application/json'},
onSuccess: function(req) {
var errors = req.responseText;
if( errors == '[]' ) {
// no errors, submit form to server
$$('form')[0].stopObserving('submit', validate);
$$('form')[0].submit();
} else {
// have errors, display error messages
var errors = errors.evalJSON(true);
for( var error in errors ) {
var errorMsg = '<ul class="error"><li>' + errors[error] + '</li></ul>';
var input = $$('[name="'+error+'"]')[0];
// display error message next to form field
. . .
}
}
},
onFailure: function() {
// can't validate here, let server do it
$$('form')[0].stopObserving('submit', validate);
$$('form')[0].submit();
}
});
}
});
Don't call event.stop() immediately within your validate method - the event handler will occur before the event does, meaning that the validate method will run before the form is submitted. Simply move that line within the branch of the if statement regarding validation failure, and it ought to work just fine.
http://www.prototypejs.org/api/event/stop

JQuery post not working in document but is working in console?

I have a page which needs to use $.post() but for some reason the exact code works when I run it from the firebug console but not from my script? My script is:
$(document).ready(function () {
$('#dl_btn').click(function () {
$.post(
"news_csv.php",
$("#dl_form").serialize(), function (data) {
alert('error');
if (data == 'success') {
alert('Thanks for signing up to our newsletter');
window.open("<?php echo $_GET['link']; ?>");
parent.Shadowbox.close();
} else {
alert(data);
}
});
});
});
It isn't the link as that does get printed properly but it gives me an error on line 140 of jquery min, I have tried using different versions of jquery and to no avail. I really dont understand why this isn't working.
When I changed from $.post to $.ajax and used the error callback I did receive an error of 'error' and the error is undefined?
Don't suppose anyone has any ideas? Would be much appreciated.
Thanks,
Tom
Is your click button placed inside a form element?
Cause doing so, clicking on it will not only trigger the onClick event you have binded to, but form submit as well, so you will end up in a case where your browser is executing both requests in parallel - with unpredicted outcome, of course.
I tried the same code with an element that does not trigger form submit and it worked as expected.
One point though: if you plan to use simple string as a return value and to do something with it (display it or so) then is ok to do what you do right now. However, if you have more complex response from the ajax request, you should specify the response type (xml, json..) as the last parameter of the post method.
Hope this helps.

ajax - When to use $.ajax(), $('#myForm').ajaxForm, or $('#myForm').submit

Given so much different options to submit sth to the server, I feel a little confused.
Can someone help me to clear the idea when I should use which and why?
1> $.ajax()
2> $('#myForm').ajaxForm
3> ajaxSubmit
4> $('#myForm').submit
Thank you
I personally prefer creating a function such as submitForm(url,data) that way it can be reused.
Javascript:
function submitForm(t_url,t_data) {
$.ajax({
type: 'POST',
url: t_url,
data: t_data,
success: function(data) {
$('#responseArea').html(data);
}
});
}
HTML:
<form action='javascript: submitForm("whatever.php",$("#whatevervalue").val());' method='POST'> etc etc
edit try this then:
$('#yourForm').submit(function() {
var yourValues = {};
$.each($('#yourForm').serializeArray(), function(i, field) {
yourValues[field.name] = field.value;
});
submitForm('whatever.php',yourvalues);
});
Here is my understanding
$.ajax does the nice ajax way to send data to server without whole page reload and refresh. epically you want to refresh the segment on the page. But it has it's own limitation, it doesn't support file upload. so if you don't have any fileupload, this works OK.
$("#form").submit is the javascript way to submit the form and has same behaviour as the input with "submit" type, but you can do some nice js validation check before you submit, which means you can prevent the submit if client validation failed.
ajaxForm and ajaxSubmit basically are same and does the normal way form submit behaviour with some ajax response. The different between these two has been specified on their website, under FAQ section. I just quote it for some lazy people
What is the difference between ajaxForm and ajaxSubmit?
There are two main differences between these methods:
ajaxSubmit submits the form, ajaxForm does not. When you invoke ajaxSubmit it immediately serializes the form data and sends it to the server. When you invoke ajaxForm it adds the necessary event listeners to the form so that it can detect when the form is submitted by the user. When this occurs ajaxSubmit is called for you.
When using ajaxForm the submitted data will include the name and value of the submitting element (or its click coordinates if the submitting element is an image).
A bit late, but here's my contribution. In my experience, $.ajax is the preferred way to send an AJAX call, including forms, to the server. It has a plethora more options. In order to perform the validation which #vincent mentioned, I add a normal submit button to the form, then bind to $(document).on("submit", "#myForm", .... In that, I prevent the default submit action (e.preventDefault() assuming your event is e), do my validation, and then submit.
A simplified version of this would be as follows:
$(document).on("submit", "#login-form", function(e) {
e.preventDefault(); // don't actually submit
// show applicable progress indicators
$("#login-submit-wrapper").addClass("hide");
$("#login-progress-wrapper").removeClass("hide");
// simple validation of username to avoid extra server calls
if (!new RegExp(/^([A-Za-z0-9._-]){2,64}$/).test($("#login-username").val())) {
// if it is invalid, mark the input and revert submit progress bar
markInputInvalid($("#login-username"), "Invalid Username");
$("#login-submit-wrapper").removeClass("hide");
$("#login-progress-wrapper").addClass("hide");
return false;
}
// additional check could go here
// i like FormData as I can submit files using it. However, a standard {} Object would work
var data = new FormData();
data.append("username", $("#login-username").val());
data.append("password", $("#login-password").val()); // just some examples
data.append("captcha", grecaptcha.getResponse());
$.ajax("handler.php", {
data: data,
processData: false, // prevent weird bugs when submitting files with FormData, optional for normal forms
contentType: false,
method: "POST"
}).done(function(response) {
// do something like redirect, display success, etc
}).fail(function(response) {
var data = JSON.parse(response.responseText); // parse server error
switch (data.error_code) { // do something based on that
case 1:
markInputInvalid($("#login-username"), data.message);
return;
break;
case 2:
markInputInvalid($("#login-password"), data.message);
return;
break;
default:
alert(data.message);
return;
break;
}
}).always(function() { // ALWAYS revert the form to old state, fail or success. .always has the benefit of running, even if .fail throws an error itself (bad JSON parse?)
$("#login-submit-wrapper").removeClass("hide");
$("#login-progress-wrapper").addClass("hide");
});
});

Resources