AJAx forms

[James_43]

Hi all,

I'm having some serious issues with AJAX forms. I'm currently using jQuery 2.2.0 and the jQuery Form plugin.

I have a simple php file:

<?php
if(isset($_POST)):
    print_r(json_encode($_POST));
endif;
?>

I have a simple html form:

<form method="post" id="regform"> <input id="login_name" name="login_name" type="text" > <input id="login_password" name="login_password" type="text" > <input id="submit" type="submit"> </form>

I am trying to use AJAX to execute the PHP script and return the response. Here is what I have so far:

$(document).ready(function(){

$('#regform').on('submit', function(e) {

    function response(response)
    {
        alert("The server says: " + response);
    }

    e.preventDefault();
    var data = $(this).serialize();

        $.ajax
        ({
            type        :   'POST',
            url         :   '/?page=authenticate/register',
            dataType    :   'json',
            data        :   data,
            success     :   response(),
        });
    });
});

As far as I understand, I should be getting an alert box with the response. However, all I get is
The server says: undefined

So obviously AJAX is failing to make the call, and I cannot figure out why. Below is the XHR output:

XHR finished loading: POST "http://stronglinks.org/?page=authenticate/register"
    .l.cors.b.crossDomain.send @ jquery.min.js:
    4n.extend.ajax @ jquery.min.js:
    4(anonymous function) @ (index):
    216n.event.dispatch @ jquery.min.js:
    3r.handle @ jquery.min.js:3

Can anyone help?

[ryantroop]

If you have a demo page of this it would help. Otherwise, are you sure youre actually sending and receiving? If so, you may have to send headers making the ajax call use the same enctype as a for post and the php will receive it. Depending on your server configuration, php may ignore incoming requests without a valid enctype or understandable headers.

[James_43]

I was just hosting the site locally, but I'll keep it up here for a small time: http://form.overheard.co.nz I've only just added it to the DNS records, so it may not work immediately.

I edited out a lot of details in the code I outlined above, but there are really just more input fields. Click the registration button to see the form I'm talking about.

I'm quite unfamiliar with exactly how headers work. Will the settings guiding how PHP handles headers be in the php.ini file, or elsewhere?

Cheers!

[James_43]

After looking at the code for many hours now, I can't understand why it's not working... Is the Ajax form plugin incompatible with my version of jQuery?

[Zagga]

I may be looking at this wrong, and javascript isn't my 'thing', but your function response() is expecting a value to be supplied to it. When you call the function, you don't supply this value so it is undefined when it's added to the alert.

[James_43]

I understood that the AJAX script returns a response, which I then insert into the function and display in the console. However, I'm new to JS as well.

But I must apologise, because I was so caught up in the AJAX that I forgot that in my script I called a data validation class, which was preventing the page from returning the $_POST data.

Now that I have altered this it works perfectly! It looks like it was never an AJAX issue, so sorry for misleading everyone!