1

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>
1
  • 1
    ideally there should not be multiple controls with same ID in a form. You can use name instead of id. Like - $('input[name="paidamt"]'). Commented Feb 29, 2016 at 10:08

5 Answers 5

1

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
}
});
Sign up to request clarification or add additional context in comments.

Comments

1

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

Comments

0

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>

Comments

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.

1 Comment

Just found it was already suggested on SO: stackoverflow.com/questions/1960240/jquery-ajax-submit-form
0

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

1 Comment

getting error "TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement."

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.