Question

我有两个相同名称的多个输入字段。我想使用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>

Answer 1

首先，您已将input元素赋予相同的id元素，并在循环中重复。这最终会导致您的HTML无效，您应该将id更改为class：

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

要在AJAX请求中实际发送输入值，您可以在提交表单时简单地serialize()包含表单：

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

Answer 2

我建议添加class而不是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>

Answer 3

由于您将拥有其中的许多内容，因此ID必须是唯一的，在您的情况下并非如此，因此请删除＆＃34; id =＆＃34; paidamt＆＃34;

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

这是你的第一个错误。其次，请不要使用$ .post来提交此表单。删除AJAX提交，或使用jQuery Form plugin等方式绑定表单。

Answer 4

试试这个

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
}
});

Answer 5

您尝试此代码

$('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

如何通过ajax post方法发送多个同名输入字段值

5 个答案: