Ajax not reaching 'success' for login form

Question

The success part of the ajax function is never reached. I've spent hours on it, still no success. The code has been stripped of virtually everything necessary just to try and remove any possible problems but it still doesn't work.

Below is the stripped out code that I'm trying to get to work. Thanks for any help.

Ajax:

function validLogin(){

    var url = "loginProcessAjax.php";

    $.ajax({
        type: 'POST',
        url: url,

        beforeSend: function() {
            //
            alert("sdfs");
        },

        success: function(html) {

            alert("success");
            alert(html.getElementsByTagName("worked")[0].firstChild.nodeValue);
        },

        error: function( error ) {
            console.log(error);
        }
    });
}

PHP:

 <?php
 header("Content-type: text/xml");
 echo "<?xml version='1.0' encoding='ISO-8859-1'?>";
 echo "<worked>";
 echo "success";
 echo "</worked>";
 ?>

HTML:

<form method="post" action="" id="ourLoginFormID_JS">
                    <div class="ourContactFormElement2">
                        <label for="username">Username:</label>
                        <input type="text" id="username"  name="username" autocomplete="off" class="required" value="<?php if(isset($_POST['username'])) echo htmlentities($_POST['username']); ?>"  />
                    </div>

                    <div class="ourContactFormElement2">
                        <label for="password">Password:</label>
                        <input type="password" id="password" name="password" autocomplete="off" class="required"/>
                    </div>

                    <div class="ourContactFormElement2">
                        <label> &nbsp; </label>
                        <input type="submit" name="loginButton" id="loginButton" value="Login!" onclick="validLogin()"/>
                    </div>

                    <div id="statusLogin"></div>
                </form>

In beforeSend, the alert box with xml doesn't get generated. the other one does so I know it's at least calling the function.

Open your browser's debugger (F-12) and look at the network traffic. See what your server response is. — Diodeus - James MacFarlane, Jul 19 '13 at 13:26
Maybe your alert is silently failing - you said so yourself, so the processing is stopped. What do you get if you alert only "html"? — Zlatko, Jul 19 '13 at 13:27
Check your loginProcessAjax.php on browser directly. I think that you have php short open tag enabled and the first echo fails — Luca Rainone, Jul 19 '13 at 13:29
"In beforeSend, the alert box with xml doesn't get generated. the other one does so I know it's at least calling the function." You edited your question to remove the second alert. So what is the problem now? — Jason P, Jul 19 '13 at 13:30
@JasonP Sorry about that, didn't see it! Although looking at the other deleted answer now, they had that in their answer — Ian, Jul 19 '13 at 13:31
@Diodeus is there anything in particular I should be looking for? I see that the js file is called but not the specific function but clearly it is. — null, Jul 19 '13 at 13:31
@JasonP Yeah, that was sleep deprivation and desperation kicking in:) — null, Jul 19 '13 at 13:32
@chumkiu the url displays the same results if I leave the closing tag or remove it. — null, Jul 19 '13 at 13:32
Your ajax pretty much works http://jsfiddle.net/Spokey/2j6qY/1/ — Spokey, Jul 19 '13 at 13:32
@Spokey Can you elaborate? The XML displays fine when using URL — null, Jul 19 '13 at 13:34
@Spokey Would you mind showing an example of using an echo or a json to get the data instead of xml please? Also just realised that the PHP may not be getting called. — null, Jul 19 '13 at 13:36
@SteveGreen depends on what kind of json format you're looking for. Could you give a more specific data example? — Spokey, Jul 19 '13 at 13:41
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/33774/discussion-between-steve-green-and-spokey) — null, Jul 19 '13 at 13:43

score 0 · Answer 1 · answered Jul 19 '13 at 13:39

0

You need to cancel the form submission from happening

change

onclick="validLogin()"/>

to

onclick="validLogin(); return false;"/>

it would be better to use onsubmit on the form and not a click event on the button. It would be even better to not use inline event handlers.

answered Jul 19 '13 at 13:39

epascarello

204,599
20
195
236

Do you mean giving it an ID and then targeting that with the JS? – null Jul 19 '13 at 13:40
I get the same result. – null Jul 19 '13 at 13:42
1

I am not sure where you came up with an ID since I never mentioned an id in my post. So you called return false and nothing happened? – epascarello Jul 19 '13 at 14:20
The form is refreshing, it cancel the Ajax call. You will not get a response. You need to cancel the form submission! You need to return false on the click like I showed. – epascarello Jul 19 '13 at 14:23
:) No I meant to use ID in response to you mentioning not using inline handlers. You are right though. – null Jul 19 '13 at 14:30

score 0 · Accepted Answer · edited May 23 '17 at 11:56

Spokey solved this in chat. Legend.

by using $.ajax({
    type: 'POST',
    url: 'loginProcessAjax.php',
    beforeSend: function() {
        alert("sent");
    },
    success: function(html) {
        alert(html) 
    },
    error: function( x, status, error ) {
        alert(x.status + status + error);
    }
});

we were able to get an error code which then led to

jQuery Ajax - Status Code 0?

which then in turn led to a couple of things. Firstly as espascarello pointed out the form was not returning false so it was resending the data. With that amended the url was not found which was odd so using an absolute path solve it.

Thank you everyone for your help

@epascarello I know :) But it doesn't like the relative one. I've put it into the same folder, tried moving it to where it belongs, all sorts but just...no. Any idea? — null, Jul 19 '13 at 14:26

Ajax not reaching 'success' for login form

2 Answers2