CODEWITHSUNDEEP
jqueryhtmlajax
user3111896
user3111896

Reputation: 39

jQuery form submit $.ajax not working

First of all i would like that I'm not familiar enough with jQuery, as i rarely use it. I have the following piece of code that apparently does not work when i try to use $.ajax() function but works flawlessly when i use $.post(). I believe it might be related to the fact that i studied jQuery back when it was pre 1.8, I've studied very little almost none of $.ajax function and i haven't used it ever since.

In the ajax.php i have dummy text to see if ajax.php is responding

After checking the api documentation, it seemed a bit confusing as the amount of provided information was overwhelming.

I would be grateful if somebody could take a look at my code and point me at the possible mistake and suggest me a solution.

js fiddle source: http://jsfiddle.net/user16arts/Xuk66/

HTML:

<form method="post" action="ajax.php">
<input type="text" name="name" value="name" defVal="name" maxlength="16">
<input type="submit" value="submit">
<p class="submitErr"></p>

jQuery:

$(document).ready(function () {
$('body').fadeIn(300);

$('input').focusin(function () {
    if ($(this).val() == $(this).attr('defVal')) {
        $(this).val('');
    }
}).focusout(function () {
    if ($(this).val() === '') {
        $(this).val($(this).attr('defVal'));
    }
});

$('form').submit(function (e) {

    var inputField = $(this).find('input[type="text"]');
    if ($(inputField[0]).val() == $(inputField[0]).attr('defVal')) {

        var err_element = $(this).find('p.submitErr');
        $(err_element).html('ERROR::INVALID SUBMIT VALUE!').click(function () {
            $(this).hide();
        }).fadeIn(300).delay(3000).fadeOut(300);

    } else {

        $.ajax({
            url: $(this).attr('action'),
            data: '1=1',
            type: 'POST',

            statusCode: {
                404: function () {
                    alert('ajax:: error 404!');
                }
            },

            complete: function () {
                $('div.content').fadeIn(300);
            },

            sucess: function (data) {
                $('div.content').html(data);
            },

            error: function () {
                alert('ajax error');
            }
        }); /*  END OF $.ajax  */

    }

    e.preventDefault();
});
});

Upvotes: 0

Views: 355

Answers (1)

Burak Ozdemir
Burak Ozdemir

Reputation: 5332

Your problem is in the success part, you have a typo error.

change this:

sucess: function (data) {
    $('div.content').html(data);
},

to:

success: function (data) {
    $('div.content').html(data);
},

Also don't know what is located in your ajax.php part but if your intention is to send a variable 1 with a value of 1 and then to append the response, do it like this in your ajax.php:

$value = $_POST['1'];
echo $value;

Upvotes: 2

Related Questions