Jquery表单仅在您第一次提交时工作,而不是第二次

Question

我有一个表单,您可以将数据添加到数据库.这一切都是用jquery和ajax完成的,所以当你按下提交时它会验证代码,然后如果一切都正确,它会提交帖子数据而不刷新页面.问题是表单第一次工作,但是当你用表单提交另一个条目时它不起作用.我认为这与它有关

$(document).ready(function(){

但我真的不知道.我已经粘贴了下面的一些代码.它很长,但这应该提供足够的信息来了解它在做什么.整个js文件位于http://www.myfirealert.com/callresponse/js/AddUser.js

$(document).ready(function(){
$('#AddCaller').click(function(e){

    //stop the form from being submitted
    e.preventDefault();

    /* declare the variables, var error is the variable that we use on the end
    to determine if there was an error or not */
    var error = false;
    var Firstname = $('#Firstname').val();
    ...OTHER FORM FIELDS HERE

    /* in the next section we do the checking by using VARIABLE.length
    where VARIABLE is the variable we are checking (like name, email),
    length is a javascript function to get the number of characters.
    And as you can see if the num of characters is 0 we set the error
    variable to true and show the name_error div with the fadeIn effect. 
    if it's not 0 then we fadeOut the div( that's if the div is shown and
    the error is fixed it fadesOut. */


    if(Firstname.length == 0){
        var error = true;
        $('#Firstname_error').fadeIn(500);
    }else{
        $('#Firstname_error').fadeOut(500);
    }
    if(Lastname.length == 0){
        var error = true;
        $('#Lastname_error').fadeIn(500);
    }else{
        $('#Lastname_error').fadeOut(500);
    }
    ...MORE CONDITIONAL STATEMENTS HERE




    //now when the validation is done we check if the error variable is false (no errors)
    if(error == false){
        //disable the submit button to avoid spamming
        //and change the button text to Sending...
        $('#AddCaller').attr({'disabled' : 'true', 'value' : 'Adding...' });

        /* using the jquery's post(ajax) function and a lifesaver
        function serialize() which gets all the data from the form
        we submit it to send_email.php */
        $.post("doadd.php", $("#AddCaller_form").serialize(),function(result){
            //and after the ajax request ends we check the text returned
            if(result == 'added'){

                 //$('#cf_submit_p').remove();
                //and show the success div with fadeIn
                $('#Add_success').fadeIn(500);
                 $('#AddCaller').removeAttr('disabled').attr('value', 'Add A Caller');
                 document.getElementById('Firstname').value = "";
                 document.getElementById('Lastname').value = "";
                 document.getElementById('PhoneNumber').value = "";
                 document.getElementById('DefaultETA').value = "";
                 document.getElementById('Apparatus').value = "";
                 document.getElementById('DefaultLocation').value = "";


                 setTimeout(" $('#Add_success').fadeOut(500);",5000);

            }else if(result == 'alreadythere'){
                                    //checks database to see if the user is already there
                $('#Alreadythere').fadeIn(500);
                $('#AddCaller').removeAttr('disabled').attr('value', 'Add A Caller');
            }
            else{
                //show the failed div
                $('#Add_fail').fadeIn(500);
                //reenable the submit button by removing attribute disabled and change the text back to Send The Message
                $('#AddCaller').removeAttr('disabled').attr('value', 'Send The Message');

            }
        });
    }
});    
});

现在,第一次使用表单时效果很好.然后重新启用该按钮,但是当您尝试创建另一个条目并单击该按钮时,没有任何反应.

谢谢您的帮助!

编辑:表单提交后第一次按钮仍然启用,你可以点击它,但当你点击它没有任何反应...即使你没有填写表格.就像表单的click事件第一次没有触发一样.

EDIT2根据要求,我将发布HTML,它位于受密码保护的网站后面,因此我无法向您发送页面链接.

<form action='addcallers.php' method='post' id='AddCaller_form'>

 <h2>Add Callers</h2>
 <p>
 First Name:
 <div id='Firstname_error' class='error'> Please Enter a First Name</div>
 <div><input type='text' name='Firstname' id='Firstname'></div>
 </p>

 <p>
 Last Name:
 <div id='Lastname_error' class='error'> Please Enter a Last Name</div>
 <div><input type='text' name='Lastname' id='Lastname'></div>
 </p>
 ...MORE FORM FIELDS HERE


 <div style="display:none;">
 <input type='text' name='DefaultLocation' id='DefaultLocation' value= "Sometthing"      readonly=readonly >

 </div>
 </p>

 <p>




 <div id='Add_success' class='success'> The user has been added</div>
 <div id='Alreadythere' class='error'> That user is already in the database</div>
 <div id='Add_fail' class='error'> Sorry, don't know what happened. Try later.</div>
 <p id='cf_submit_p'>
 <input type='submit' id='AddCaller' value='Send The Message'>
 </p>
 </form>  

 </div>

EDIT3页面上还有其他ajax,但它是用直接的javascript编写的.我不确定这是否会以任何方式影响功能.但如果需要,我也可以发布那个ajax.

EDIT4我从http://web.enavu.com/tutorials/create-an-amazing-contact-form-with-no-ready-made-plugins/获得了原始教程并对其进行了修改

编辑在发出一些不同的警报后,我发现它没有做条件语句if(error==false)...Any Idea为什么？

Answer 1

最有可能的是 #DefaultLocation 字段，因为它是只读的，并且您在第一篇文章后重置它：

document.getElementById('DefaultLocation').value = "";

并且永远不会将其值更改回某个值（或者您是？），因此您必须执行以下操作之一：

1. 不要重置它
2. 提交表单后设置它的值
3. 根本不验证它，因为它是只读的，并且您将其用作隐藏输入（顺便说一句，这是错误的）！

另外，它可能是您正在谈论的其他“ajax”代码，因此也请在此处发布该代码，也可能您在页面上的其他位置有其他字段（元素），其 ID 与表单中的 ID 相同。

无论如何，这里有一些提示给您： 1-正确关闭输入标签（将 / 添加到其末尾）：

<input type='text' name='Firstname' id='Firstname' />

2-确保所有 DIV 和 P 都已关闭...因为您似乎在这里有一个开放的 P：

 <p>


 <div id='Add_success' class='success'> The user has been added</div>
 <div id='Alreadythere' class='error'> That user is already in the database</div>
 <div id='Add_fail' class='error'> Sorry, don't know what happened. Try later.</div>
 </p> <---- missing this one
 <p id='cf_submit_p'>

3-您一直在重新声明错误变量，您不需要这样做：

if(Firstname.length == 0){
    var error = true;
....

只需error = true;在不使用var 的情况下使用，这适用于您要更改其值的所有位置，仅在初始化时使用var ：

var error = false;

4-而不是这个：

$('#AddCaller').attr({'disabled' : 'true', 'value' : 'Adding...' });

使用：

$('#AddCaller').attr({'disabled' : 'disabled', 'value' : 'Adding...' });

5-如果您使用DefaultLocation作为隐藏字段，则不要这样：

 <div style="display:none;">
 <input type='text' name='DefaultLocation' id='DefaultLocation' value= "Sometthing"      readonly=readonly />

 </div>

使用：

<input type="hidden" name="DefaultLocation" id="DefaultLocation" value="Something" />