Can't submit my form twice with ajax

Question

Hey everyone, I have some problems with a (I think simple) form submitting with ajax.

The first time the user submit the form, everything goes OK: The content of the div changes and the php is processed. But if there is no match in my DB it will return "f" and the javascript will write back an unusable form that can't be re-submitted with ajax.

The HTML:

<div class="maincontainer" id="login">

  <form id="loginform" onsubmit="void login();return false;">

    <input name="username" type="text" class="textboxinput"  id="username"  autocomplete="off" />
    <input name="password" type="password" class="textboxinput" id="password"  autocomplete="off" />
    <input type="submit" name="button" class="button" id="button" value="Login" /> 
  </form>
</div>

The Javascript:

function login(){

    //Change the box content to "Logging in"
    $("#login").html("<p style='line-height:170px;text-align:center;width:100%;margin:0px;padding:0px;'>Logging in</p>");

    //Get the values of the username and password field
var username = $('#username').val();
var password = $('#password').val();

    //Make the ajax request
$.ajax({        
        datatype: "text",
        type: "POST",
        url: "process.php",
        data: "username=" + username + "&password=" + password,
        success: function (m) {

        //If there's no match, rewrite the form in the div  
            if ( m == "f"){
                content= "  <form id='loginform' onsubmit='void login();return false;'><input name='username' type='text' class='textboxinput' id='username' autocomplete='off' /><input name='password' type='password' class='textboxinput' id='password' autocomplete='off' /><input type='submit' name='button' class='button' id='button' value='Login' /> <p style='font-size:small;'>Login failed, please try again</p></form>";         
                $("#login").html(content);
            }
        }

    });



};

EDIT

I didn't find the problem but I did find a solution which is not to erase my form, only hide it

HTML:

<div class="maincontainer" id="login">
    <div id="errorbox"></div>
     <form id="loginform" onsubmit="return login();">

    <input name="username" type="text" class="textboxinput username"  id="username" value="username"  onfocus="if(this.value==this.defaultValue) this.value='';"   onblur="if(this.value=='') this.value='username'" autocomplete="off" />
    <input name="password" type="password" class="textboxinput password" id="password" value="password"  onfocus="if(this.value==this.defaultValue) this.value='';"  onblur="if(this.value=='') this.value='password'" autocomplete="off" />
    <input type="submit" name="button" class="button" id="button" value="Login" /> 
    <div id="errorshow"><a href="register.php">Register</a><a href="credsretrieve.php">Forgot your login infos?</a></div>
  </form>
</div>

Javascript:

function login(){

    var username = $('#username').val();
    var password = $('#password').val();

//Do security checks here


    $("#loginform").hide();

    $("#errorbox").html("<p class='logloading'>Logging in</p>");

    $.ajax({        
        datatype: "text",
        type: "POST",
        url: "login.php",
        data: "username=" + username + "&password=" + password + "&method=js",
        success: function (m) {

            if ( m == "f"){ 
                $("#errorbox").html("");
                $('#username').val("");
                $('#password').val("");
                $("#loginform").show();
                $("#errorshow").html("<p class='errormsg'>Wrong username/password combination</p>");
                $("#username").focus();

            }

            else{
                window.location = m;                
            }
        }

    });
    return false;
};

Oh, and I should thank everybody that commented here (and posted) every info helped me a bit.

Answer 1

I think I ran into this problem a while back as well.

A plausible workaround would be to put the login function on the onclick of the submit button instead (and have that return false as well)

Answer 2

Just a fix, not an explicit answer to your original question.

I'd use

data: $('#form_id').serialize()

instead of manually doing all of this:

data: "username=" + username + "&password=" + password,

What happens when the user submits a space? Your query breaks.

Just make sure the username box has a name of username and the password box follows the same pattern.

---

EDIT

This code is a bit odd:

onsubmit='void login();return false;'

Instead of manually inputting this, try this code (just delete that part and insert this):

$('#loginform').live('submit', function(e) {
  login();
  e.preventDefault()
});