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)...任何想法為什么？

Answer 1

最有可能的是，它是#DefaultLocation字段，因為它是只讀的，你在第一篇文章之后重置它：

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

並且永遠不會將它的價值改回某些東西（或者是你？）所以你必須做以下其中一項：

1. 不要重置它
2. 在擺出表格后用東西設定它的價值
3. 不要驗證它，因為它只是一個只讀，你用它作為一個隱藏的輸入（順便說一句是錯的）！

另外，它可能是你正在談論的其他“ajax”代碼，所以請在這里發布，也許你在頁面上的其他地方（元素）有相同的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" />

Answer 2

嘗試從使用單擊事件處理程序更改為表單的提交事件處理程序

改變這個： $('#AddCaller').click

對此： $('#AddCaller_form').submit

Answer 3

不要刪除disabled的屬性，將其設置為false。

這條線

$('#AddCaller').removeAttr('disabled').attr(...

應該

$('#AddCaller').attr('disabled', false).attr(...

Answer 4

我假設通過刪除和添加屬性，元素被刪除並替換為新元素，但處理程序不會重新附加。 嘗試使用$('#AddCaller').live('click', function(){ //code })而不是.click()

Answer 5

此函數向php發送查詢，並可以使用ajax從php文件返回結果。 我留下了評論指南。 第一部分使用try＆catch語句不需要修改。 轉到＃1和＃2

 function ajaxFunction(){
        var ajaxRequest;  


        //Browser compatible. keep it as it is 
        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
        //Browser compatible end



        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                   //#2 opional: create functions to return data from your php file
                   $('#resultArea').html(ajaxRequest.responseText);
            }
        }

        //#1 Set the form method, filename & query here here
        ajaxRequest.open("GET", "serverTime.php?query=something", true);
        ajaxRequest.send(null); 
    }

例：

<input type='submit' value='ajax-submit' onclick='ajaxFunction()' />

Answer 6

快速jquery插件，因為你幾乎可以在你的網站上的每個ajax表單中使用它：

它將禁用所有可能觸發提交事件的字段，並在表單標記上添加一個類，以便您可以應用某些樣式，或在提交表單時顯示加載消息：

jQuery.extend(jQuery.fn, {
  formToggle: function (enable){
    return this.each(function(){
      jQuery(this)[(enable ? 'remove' : 'add') + 'Class']('disabled')
      .find(':input').attr('disabled', !enable);
  },
  enable: function(){ return this.formToggle(true); },
  disable: function(){ return this.formToggle(false); }
}

然后在你的jq ajax代碼：

[...]

var $form = $(your_form).submit(function(){
  $.ajax({
    type: 'post', 
    url: "/whatever/", 
    data: $form.serialize(), 
    success: function (){ alert ('yay');},
    complete: function(){ $form.enable();},
    error: function(){ alert('insert coin')}
  }
  $form.disable(); 
  return false;
});

在表單發送/接收數據時，應該足以正確阻止提交。 如果你真的是偏執狂，你可以添加一個檢查，以便在用戶觸發提交和字段被禁用之間不能發送兩次：if（$ form.is（'。disabled'））return false; 作為提交處理程序的第一行，但它確實不是必需的

Answer 7

在Firebug中設置一些斷點並觀察它是否在某處。 提交和應用效果后，按鈕可能會丟失其單擊處理程序。 您可能需要在提交和填充后再次分配單擊處理程序。

Answer 8

不是100％，但嘗試將代碼設置為單獨的函數，然后在最后重新綁定click事件。

例：

function addCaller(e) {
    // your unchanged code
    $('#AddCaller').click(addCaller(e));
}

$(document).ready(function(){
    // added an unbind just in case
    $('#AddCaller').unbind('click').click(addCaller(e));
});

Answer 9

嘗試改變這個： $('#AddCaller').attr({'disabled' : 'true', 'value' : 'Adding...' }); 進入： $('#AddCaller').attr({'value' : 'Adding...' });

這應該使它工作。