Jquery ajax request not working

Question

I've used the same code before, I've checked and checked, and there's no error. It seems that somehow this piece of code is not doing what it's supposed to. And I don't know why. Please help.

The ajax code seem to not perform an ajax request, but rather submits a normal HTTP get/post request depending on what the form is set to in the HTML. Which mean the page keeps refreshing. It seems that the success function doesn't even get called. I've checked that the rest of the code is working up until the line $.ajax({ where it refreshes the page. Could it be the way that I set up the form? Notice that I don't have a submit button because the form sends different action to the server depending on which button is pressed.

Here is the HTML code:

<form id="frmVerify" name="frmVerify" method="post">
<p>Your account has not been verified. You must verify your email to continue logging into your account.</p>
<p>A verification token was sent to your email address, <strong id="username" name="username"><?php echo $_SESSION['username']; ?></strong>. Note that this token expires after 24 hours of issue.</p>
<p>Please check your email to retrieve this token:</p>

  <p>
  <input type="text" name="token" id="token" />
  <button name="action" id="verify" value="<?php echo ACT_VERIFY; ?>">Verify</button>
  </p>
  <p>You can also: </p>
<p>
  <button name="action" id="send" value="<?php echo ACT_SEND_TOKEN; ?>">Send another token</button><br />

  <button name="action" id="change" value="<?php echo ACT_CHANGE_EMAIL; ?>">Change Email</button><br />

  <button name="action" id="delete" value="<?php echo ACT_DELETE_ACCOUNT; ?>">Delete Account</button>
</p>
<p>
  <input type="hidden" name="requester" id="requester" value="Verification" />
</p>
<p><a href="logout.php">Log out</a></p>
</form>

Here is the JQUERY code:

function submitForm(action){
    var username = $("#username").html();
    var token = $("#token").val();
    var requester = $("#requester").val();
    if(validateLogin()){
        $.ajax({
            type: "post",
            url: "verification.php",
            data: "username="+username+"&token="+token+"&action="+action+"&requester="+requester,
            success: function(data) {
                try{
                    var jsonObj = $.parseJSON(data);
                    processOutput(action, jsonObj);
                }catch(e){
                    $("#output").html("PHP module returned non JSON object: <p>"+data+"</p>");
                }//try
            }//success function
        });//ajax
    }else{
        alert("Please fill UserName & Password!");
        return false;
    }//if validate
}

$(document).ready(function(){

$("#verify").click(function(){
    var action = $(this).val();
    submitForm(action);
});

$("#send").click(function(){
    var action = $(this).value();
    submitForm(action);
});

$("#change").click(function(){
    var action = $(this).value();
    submitForm(action);
});

$("#delete").click(function(){
    var action = $(this).value();
    submitForm(action);
});
});

Answer 1

I believe <button> elements are submit buttons by default, so when the buttons are pressed your click handlers call the submitForm() function but then the default behaviour occurs and the form is submitted. Try specifying the buttons with:

<button type="button" ...

Alternatively return false from the click handlers (if you need the buttons to do a traditional submit for browsers with JS disabled).

Note that your code can be greatly simplified since all of your .click() handlers do the same thing:

$(document).ready(function(){
    $("#frmVerify button").click(function(){
        submitForm($(this).val());
        return false;
    });
});

That is, when any button with the form is clicked pass its value to the submitForm() function.

Answer 2

The reason it is behaving like a normal post is that a button element is a submit type by default so it's posting before the javascript is finished executing. Change your html button to the following:

<button type="button" name="action" id="verify" value="<?php echo ACT_VERIFY; ?>">Verify</button>

There may be plenty more to fix with your code but the question was focused on why it was performing a post rather than an ajax post.

Here is a jsfiddle demonstrating the change. -- http://jsfiddle.net/GSVdQ/1/

Answer 3

$(this).value()听起来不正确...