如何顯示插入的查詢數據，而無需使用ajax刷新jquery

Question

我現在所擁有的是一個窗體和一個容器，它顯示提交的數據，並且它使用ajax請求進行提交而不刷新，窗體和顯示數據的容器在同一頁面上。

我曾嘗試使用$("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> 

是否有任何其他方式做到這一點？

我有這些輸入

<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

使用「.append（）」方法而不是.html（）。

UPDATE：

如果你想輸入的所有數據，然後顯示它您可以遍歷每個輸入字段，然後顯示它。首先向輸入元素添加一個類，以便它可以輕鬆編輯。

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