PHP/JS：在不丟失值的情況下響應多個變量

Question

我構建的JS/Ajax函數沒有按鈕單擊或頁面刷新。該函數獲取輸入字段的值，並用php回顯結果。但每次變量都被回顯時，下一個變量會擦除前一個變量的值。如何避免這種情況？ EXAMPLE

JS

<script> 
$(document).ready(function() { 
    var timer = null; 
    var dataString; 
     function submitForm(){ 
     $.ajax({ type: "POST", 
      url: "index.php", 
      data: dataString, 
      success: function(result){ 
         $('#special').html('<p>' + $('#resultval', result).html() + '</p>'); 
              } 
       }); 
       return false; } 

    $('#contact_name').on('keyup', function() { 
    clearTimeout(timer); 
    timer = setTimeout(submitForm, 050); 
      var name = $("#contact_name").val(); 
    dataString = 'name='+ name; 
    }); 

    $('#email').on('keyup', function() { 
    clearTimeout(timer); 
    timer = setTimeout(submitForm, 050); 
    var name = $("#email").val(); 
    dataString = 'name='+ name; 
    }); 

    $('#phone').on('keyup', function() { 
    clearTimeout(timer); 
    timer = setTimeout(submitForm, 050); 
    var name = $("#phone").val(); 
    dataString = 'name='+ name; 
    }); 

    $('#address').on('keyup', function() { 
    clearTimeout(timer); 
    timer = setTimeout(submitForm, 050); 
    var name = $("#address").val(); 
    dataString = 'name='+ name; 
    }); 

    $('#website').on('keyup', function() { 
    clearTimeout(timer); 
    timer = setTimeout(submitForm, 050); 
    var name = $("#website").val(); 
    dataString = 'name='+ name; 
    }); 


}); 
</script> 

HTML/PHP

<form action="" method="post" enctype="multipart/form-data" id="contact_form" name="form4"> 
    <div class="row"> 
     <div class="label">Contact Name *</div> <!-- end .label --> 
     <div class="input"> 
      <input type="text" id="contact_name" class="detail" name="contact_name" value="<?php $contact_name ?>" /> 
      <div id="special"><span id="resultval"></span></div> 
     </div><!-- end .input--> 
    </div><!-- end .row --> 
    <div class="row"> 
     <div class="label">Email Address *</div> <!-- end .label --> 
     <div class="input"> 
     <input type="text" id="email" class="detail" name="email" value="<?php $email ?>" /> 
     <div id="special"><span id="resultval"></span></div> 
     </div><!-- end .input--> 
    </div><!-- end .row --> 
    </form> 

Answer 1

您可以使用append()方法：

success: function(result){ 
     $('#special').append('<p>' + result + '</p>'); 
} 

爲您設置同級ES的輸入，你可以運行如下代碼：

$('.detail').on('keyup', function() { 
    clearTimeout(timer); 
    var name = $(this).val(); 
    dataString = 'name='+ name; 
    timer = setTimeout(submitForm, 050); 
}); 

注意標識必須是唯一的，反覆向服務器請求數據的效率不高。

Answer 2

您所遇到的問題是由於對多個元素使用相同的ID造成的。

ID應該是唯一的，但如果有相同的ID，只有第一個具有這種ID的元素被選中。