无法使用ajax两次提交我的表单

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

嘿大家，我在用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.

用户第一次提交表单时，一切正常：div的内容发生变化，处理完php。但是如果我的数据库中没有匹配，它将返回“f”，并且javascript将写回一个无法使用ajax重新提交的无法使用的表单。

The HTML:

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:

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:

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:

使用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.

哦，我应该感谢在这里发表评论（并发布）的每个人都对我有所帮助。

2 个解决方案

#1

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()
});

#2

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)

一个看似合理的解决方法是将登录功能放在提交按钮的onclick上（并且返回false也是如此）

#1