ajax jqueryを使用してリフレッシュせずに挿入されたクエリデータを表示する方法

Question

私は今、フォームと、送信されたデータを表示し、リフレッシュせずに、データを表示するフォームとコンテナ同じページにあります。

私は$("id").val();を使用して、フォーム内の入力値を取得しようとした$('#display').html();

を使用して、それを表示するしかし、私は、フォーム内の多くの入力フィールドを持っていると私はしたいが、それのでjqueryの内部入力値のすべてをコピー＆ペーストいけないしています専門家でなく、汚い、効率的でないようです。

javascriptの

$(document).ready(function(){ 
    $("#add_rec").click(function(e){ 
     var me = $(this); 
     e.preventDefault(); 
     if (me.data('requestRunning')) { 
      return; 
     } 
     var inputs = $("#u_rec_form").serialize(); 

     me.data('requestRunning', true); 
     $.ajax({ 
      type: 'POST', 
      url: 'process.php', 
      data: inputs, 
      success: function(data){ 
        alert(data); 

       }, 
       complete: function() { 
        me.data('requestRunning', false); 
       } 
      }); 

     return false; 

    }); 
}); 

HTML

<form id="u_rec_form"> 
     <div class="row"> 
      <div class="form-group col-xs-5 col-lg-7"> 
      <label for="code">Patient's Username</label> 
      <input type="text" name="cust_username" placeholder="Username" class="form-control" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="form-group col-xs-5 col-lg-7 "> 
      <label for="code">Patient's Password</label> 
      <input type="password" name="cust_password" placeholder="Password" class="form-control input-normal" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="form-group col-xs-5 col-lg-7"> 
      <label for="code">Patient's First Name</label> 
      <input type="text" name="cust_fname" placeholder="First name" class="form-control" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="form-group col-xs-5 col-lg-7"> 
      <label for="code">Patient's Last Name</label> 
      <input type="text" name="cust_lname" placeholder="Last name" class="form-control" /> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="form-group col-xs-5 col-lg-7"> 
      <label for="code">Patient's Date of Birth</label> 
      <input type="text" name="cust_age" placeholder="DD/MM/YYYY" class="form-control" /> 
      </div> 
     </div> 
     <div class="row"> 
      <input type="hidden" name="submitted" value="1"> 
      <button type="submit" id="add_rec" class="btn btn-default">Submit</button> 
     </div> 
    </form> 

はそれを行うための他の方法はありますか？

Iは、これらの入力

<label for="code">First Name: <span id="view_<?php echo $row['id']?>"><?php echo $row['cust_fname']?></span></label><br><br> 
<label for="code">Last Name: <span id="view_<?php echo $row['id']?>"><?php echo $row['cust_lname']?></span></label><br><br> 
<label for="code">Age: <span id="view_<?php echo $row['id']?>"><?php echo $row['cust_age']?></span></label> 

を持って私はこの $（ '入力'）を使用してみました各（関数（）{ VAR inputVal = $（この）.val（）;「 $（。 span '）。append（inputVal）; }）; 各ラベルにすべての入力値が表示され、必要なものが表示されません。

Answer 1

は、.html（）の代わりに ".append（）"メソッドを使用します。

UPDATE：

あなたはすべての入力データを取得し、あなたが各入力フィールドに反復し、それを表示することができ、それを表示したい場合。クラスを最初に入力要素に追加すると、簡単に編集できます。

$('.input-class').each(function(){ 
     var inputVal = $(this).val(); 
     $('#display').append(inputVal); 
})