How to send multiple same name input fields value via ajax post method

Question

I have two same name multiple input fields. I want to send all fields value from another page using jquery ajax post method but i am not getting all rows input fields value. Please review my code.

Javascript code

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

Html Code

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

ideally there should not be multiple controls with same ID in a form. You can use name instead of id. Like - $('input[name="paidamt"]'). — sid, Feb 29 '16 at 10:08

score 1 · Answer 1 · answered Feb 29 '16 at 10:14

Try this one

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

score 1 · Answer 2 · answered Feb 29 '16 at 10:20

Firstly you have given the input elements the same id which is repeated in the loop. This will end up in your HTML being invalid, you should change the id to 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>

To actually send the input values in the AJAX request you can simply serialize() the containing form when the form is submit:

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

score 0 · Answer 3 · answered Feb 29 '16 at 10:09

I suggest to add class instead of id, since identically class can be repeated but id should not.

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

score 0 · Answer 4 · answered Feb 29 '16 at 10:10

0

Since you will have many of these, id - needs to be unique, which in your case isn't, so remove "id="paidamt"

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

That's your first mistake. And secondly don't use $.post, to submit this form. Either remove AJAX submit, or bind form using something like jQuery Form plugin.

answered Feb 29 '16 at 10:10

Muhammed

1,592
1
10
18

Just found it was already suggested on SO: http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form – Muhammed Feb 29 '16 at 10:27

score 0 · Answer 5 · answered Feb 29 '16 at 10:22

You try this code

$('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)); }
        });
        });


        });

in you paidamt.php file

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

getting error "TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement." — Sandeep, Feb 29 '16 at 10:39

How to send multiple same name input fields value via ajax post method

5 Answers5

Linked