Не могу отправить мою форму дважды с помощью ajax

Question

Привет всем, у меня есть некоторые проблемы с (я думаю простой) отправкой формы с помощью ajax.

В первый раз, когда пользователь отправляет форму, все идет хорошо: содержимое div изменяется и php обрабатывается. Но если в моей БД нет совпадения, он вернет «f» и javascript напишет непригодную форму, которую нельзя повторно отправить с помощью ajax.

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>

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

Я не нашел проблему, но я нашел решение, которое не стирает мою форму, только скрывает ее

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

О, и я должен поблагодарить всех, кто прокомментировал здесь (и опубликовал), каждая информация мне помогла.

Answer 1

Просто исправление, а не явный ответ на исходный вопрос.

Я бы использовал

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

вместо того, чтобы делать все вручную:

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

Что происходит, когда пользователь отправляет пробел?Ваш запрос прерывается.

Просто убедитесь, что в поле имени пользователя есть имя username, а в поле пароля - тот же шаблон.

---

РЕДАКТИРОВАТЬ

Этот код немного странный:

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

Вместо ручного ввода этого кода попробуйте этот код (просто удалите эту часть и вставьте ее):

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

Answer 2

Кажется, я тоже столкнулся с этой проблемой некоторое время назад.

Возможный обходной путь - вместо этого поставить функцию входа в систему по нажатию кнопки отправки (и также вернуть значение false)