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的元素被选中。