2016-02-29 88 views
1

enter image description here如何通過AJAX POST方法

發送多個相同的名字輸入字段值,我有兩個名稱相同的多個輸入字段。我想從另一個頁面使用jquery ajax post方法發送所有字段值,但我沒有獲取所有行輸入字段值。請查看我的代碼。

Javascript代碼

<script type="text/javascript"> 
function getValue() 
{ 
    $.post("paidamt.php", 
    { 
     paidamt : $('#paidamt').val(), 
     uid : $('#uid').val() 
    }, 
     function(data){ 
     /*alert(data);*/ 
     $("#divShow").html(data); 
    }); 
} 
</script> 

HTML代碼

<div> 
<form method="post"> 
<table border="1"> 
<tr> 
<th>Product</th> 
<th>Price</th> 
<th>Paid Amount</th> 
<th>Check</th> 
</tr> 
<?php 
$sql = mysql_query("SELECT * FROM `tbldemo`"); 
while ($result = mysql_fetch_array($sql)) { 
?> 
<tr> 
<td><?php echo $result['pname']; ?> </td> 
<td><?php echo $result['price']; ?></td> 
<td><input type="text" name="paidamt[]" id="paidamt"></td> 
<td><input type="checkbox" name="uid[]" id="uid" 
value="<?php echo $result['id']; ?>"></td> 
</tr> 
<?php } 
?> 
</table><br> 
<input type="button" name="submit" id="submit" 
onclick="getValue(1)" value="Save Amt."> 
</form> 
</div> 
<div id="divShow"> 
</div> 
+1

理想地不應該有與一個形式相同的ID的多個控件。您可以使用名稱而不是id。像 - $('input [name =「paidamt」]')。 – sid

回答

0

我建議加上的,而不是ID級別,因爲相同的類可以重來,但ID不應該。

<script type="text/javascript"> 
function getValue() 
{ 
    var paidamtval = []; 
    $('#paidamt').each(function(){ 
     paidamtval.push($(this).val()); 
    }); 
    $.post("paidamt.php", 
    { 
     paidamt : paidamtval, 
     uid : $('#uid').val() 
    }, 
     function(data){ 
     /*alert(data);*/ 
     $("#divShow").html(data); 
    }); 
} 
</script> 
0

既然你將有很多這樣的,ID - 必須是唯一的,而你的情況是沒有,所以去除「ID =」 paidamt」

<td><input type="text" name="paidamt[]" id="paidamt"></td> 

這是你的第一個錯誤。其次不要使用.post的$,提交此表。請刪除AJAX提交,或者使用類似jQuery Form plugin結合的形式。

+0

剛剛發現的時候,已經建議對SO:http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form –

0

試試這個

var paidamt = $("input[name=paidamt]").map(function(){ 
return $(this).val(); 
}).get().join(","); 

var uid = $("input[name=uid]").map(function(){ 
return $(this).val(); 
}).get().join(","); 


$.ajax(
{ 
type: "POST", 
url: 'paidamt.php', 
data: 
{ 
    paidamt:paidamt, 
    uid:uid 
} 
}); 
2

首先,您已經給出input元素與在循環中重複的id相同。這將在你的HTML最終是無效的,你應該改變idclass

<form method="post"> 
    <table border="1"> 
     <tr> 
      <th>Product</th> 
      <th>Price</th> 
      <th>Paid Amount</th> 
      <th>Check</th> 
     </tr> 
     <?php 
      $sql = mysql_query("SELECT * FROM `tbldemo`"); 
      while ($result = mysql_fetch_array($sql)) { ?> 
       <tr> 
        <td><?php echo $result['pname']; ?> </td> 
        <td><?php echo $result['price']; ?></td> 
        <td><input type="text" name="paidamt[]" class="paidamt"></td> 
        <td><input type="checkbox" name="uid[]" class="uid" value="<?php echo $result['id']; ?>"></td> 
       </tr> 
      <?php } 
     ?> 
    </table><br> 

    <button type="submit" name="submit" id="submit">Save Amt.</button> 
</form> 

當形式提交其實你可以簡單地serialize()包含窗體發送的AJAX請求的輸入值:

$(function() { 
    $('form').submit(function(e) { 
     $.ajax({ 
      url: "paidamt.php", 
      type: 'POST', 
      data: $(this).serialize(), 
      success: function(data) { 
       $("#divShow").html(data); 
      }); 
     }); 
    }); 
}); 
0

你試試這個代碼

$('document').ready(function(){ 
$('#submit').click(function(){ 

jQuery.ajax({ 
      type: "POST", 
      url: "paidamt.php", 
      data: new FormData(this), 
      contentType: false,  
      cache: false,    
      processData:false,  
      success: function(html){ 
       try{ 
       $("#divShow").html(data); 
       }catch (e){ 
       alert(JSON.stringify(e)); 
       } 
      }, 
       error : function(e){alert("error "+JSON.stringify(e)); } 
     }); 
     }); 


     }); 

在你paidamt.php文件

$paidamt=$_POST['paidamt'];// its can array values 
print_r($paidamt);// result display 
+0

收到錯誤「類型錯誤:FormData.constructor的參數1未實現接口HTMLFormElement。」 – Sandeep