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

因为您已经为输入设置了类似的类，所以可以缩小代码：

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

请注意，ID 必须是唯一的，并且重复地从服务器请求数据效率不高。

Answer 2

您遇到的问题是由多个元素使用相同的ID引起的。

Ids应该是唯一的，但是如果有相同的ID，则只选择具有此ID的第一个元素。

PHP / JS：回应几个变量而不会失去它们的价值

2 个答案: