CODEWITHSUNDEEP
phpjqueryajax
Sandeep
Sandeep

Reputation: 1063

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

enter image description here

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>

Upvotes: 1

Views: 4277

Answers (5)

Vadivel S
Vadivel S

Reputation: 660

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337637

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

Upvotes: 1

Gopalakrishnan
Gopalakrishnan

Reputation: 957

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

Upvotes: 1

Muhammed
Muhammed

Reputation: 1612

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.

Upvotes: 0

Niraj Jani
Niraj Jani

Reputation: 427

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>

Upvotes: 0

Related Questions