jQuery AJAX success issue

Question

The following code snippet is returning 'failed' alert box even thought the form is filled out correctly, I would like to display the 'passed' alert box. Surely there is something wrong but I can;t find where...

Full code here: http://alessandrosantese.com/Forms/Custom_Validation/Form-Validation-Plugin-AJAX.html

    submit.click(function(evt) {  
        evt.preventDefault();

        validate_form();

        $('form input:not(.submit, .email, .test)').each(function(){
            if ($(this).val() == '') {
                add_color($(this), red);
            }
            else {
                add_color($(this), white);
            }

        });

        var data = form.serialize();

            // AJAX call
            $.ajax({
                url: 'process.php',
                type: "post",
                data: data,
                success: function(r){

                    if (r.success) {
                        alert('passed');
                    } else {
                        alert('failed');
                    }

                }
            });



    });

PHP code (very basic, for now just to get the AJAX success working)

<?php

    $name = $_POST['f_name'];
  $l_name = $_POST['l_name'];
  $email1 = $_POST['email'];
  $email2 = $_POST['email_c'];
     $tel = $_POST['tel'];
$postcode = $_POST['postcode'];
     $url = $_POST['url'];
     $checkbox = $_POST['checkbox'];

echo "\n$name\n$l_name\n$email1\n$email2\n$tel\n$postcode\n$url\n$checkbox";


?>

I need to find a way to make sure that validate_form(); worked before the AJAX call itself.

hi, ok I am still new to ajax, what makes it undefined then? — Aessandro
– Aessandro, Commented Apr 2, 2013 at 16:23
@Alex the fact you never defined it! Your echo should be sending back JSON encoded data, not just a list of NL separated strings. — Alnitak
– Alnitak, Commented Apr 2, 2013 at 16:24

mridula · Accepted Answer · 2013-04-02 17:00:37Z

1

Does validate_form return anything? If so, you can capture the the return value of your function validate_form() anywhere.

validate_form() must return a boolean value to indicate whether the form is valid. In each of your functions - validateEmail(), checkPostCode(), checkURL() return a boolean value based on whether those fields are valid. And rewrite validate_form() as

function validate_form()
{ 
    return (validateEmail() && checkPostCode() && checkURL());
}

I think you want something like this:

if(validate_form()) //if the form is valid
{
    $.ajax({
        url: 'process.php',
        type: "post",
        data: data,
        success: function(r){
            alert('passed')
            },
        error: function(r){
            alert('failed: ' + r.statusText);
    });
}
else
{
      alert('failed');
}

edited Apr 2, 2013 at 17:00

answered Apr 2, 2013 at 16:29

mridula

3,3113 gold badges34 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Aessandro Over a year ago

Hi there, just used this and it's giving me 'passed' even though the form is empty, I need to find a way to make sure that validate_form(); worked before the success or AJAX call itself...

mridula Over a year ago

answer has been edited. does validate_form() return anything?

Aessandro Over a year ago

nope that's the problem I think as well, as it stands it only validates the fields and that's it....

mridula Over a year ago

yup, you would need it to return something so that you would know whether to proceed or not with the ajax call. The success and error in the ajax call are just to indicate the success/failure of the ajax and not the form validation. check the edits.

Aessandro Over a year ago

It now works correctly: jsfiddle.net/4UuVF you will get an error message of not found and that's because I didnt include and absolute link for process.php but other than that it works. I might need to improve the code a bit but I am pleased with that.

|

Marc B · Accepted Answer · 2013-04-02 16:22:23Z

0

You're not returning a JSON string, so r could never possibly have a .success attribute. You're passing back a simple string, so maybe you'd better be off doing

if (r <> '') {
   alert('success');
} else {
   alert('failed');
}

answered Apr 2, 2013 at 16:22

Marc B

362k44 gold badges433 silver badges508 bronze badges

Comments

Dogoferis · Accepted Answer · 2013-04-02 16:27:38Z

The best solution might be to store the information that you want to return in an array; and then use json_encode() on it before echoing it back.

Change the PHP portion of the AJAX script to be something like this:

$return = array();
$return['name'] = $_POST['f_name'];
$return['l_name'] = $_POST['l_name'];
$return['email'] = $_POST['email'];
$return['email_c'] = $_POST['email_c'];
$return['tel'] = $_POST['tel'];
$return['postcode'] = $_POST['postcode'];
$return['url'] = $_POST['url'];
$return['checkbox'] = $_POST['checkbox'];
$return['success'] = true;

echo json_encode($return);

And that will send the information back to jquery in a format that will be accesible to you in the form of r.nameofparam...so you would access the value of success with

r.success

or the value of url with

r.url

Mohamed AbdElRazek · Accepted Answer · 2013-04-02 17:14:47Z

0

Try use done & fail :

// AJAX call
$.ajax({
 url: 'process.php',
 type: "post",
 data: data
}).done(function() { alert("passed"); })
.fail(function() { alert("failed"); });

answered Apr 2, 2013 at 17:14

Mohamed AbdElRazek

1,68414 silver badges18 bronze badges

Collectives™ on Stack Overflow

jQuery AJAX success issue

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related