4

私が構築したJS/Ajax関数は、ボタンのクリックやページの更新なしで送信します。この関数は入力フィールドの値を取得し、phpを使用して結果をエコーアウトします。ただし、変数がエコーされるたびに、次の変数は前の変数の値を消去します。どうすればこれを回避できますか？例

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>
4

2 に答える 2

4

メソッドを使用できます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は一意である必要があり、サーバーから繰り返しデータを要求するのは効率的ではないことに注意してください。

于 2012-07-20T05:27:08.183 に答える
1

あなたが抱えている問題は、複数の要素に同じ ID を使用することによって引き起こされます。

ID は一意である必要がありますが、同じ ID がある場合、そのような ID を持つ最初の要素のみが選択されます。

于 2012-07-20T05:44:37.377 に答える