jquery post - update db - multiple rows

Question

I'm not sure if what I'm trying to do is simple or not but here it is:

I have rows of data in a table. The last 3 fields are text fields that take user input. Each row has it's own UPDATE button.

I'm using the following code to try and do a jQuery .ajax post but I'm seeing my issue - I'm assigning IDs to my input fields and you can only have one ID declared per page so I'm sure that's one issue.

I'm trying to make it so that when you click the UPDATE button, it passes the variables from that row in the INPUT boxes and the hidden INPUT field for the rowID, and calls a .php file that updates the DB.

    $(function() {
    $(".submit").click(function() {
        var status = $("#status").val();
        var ly = $("#ly").val();
        var rt = $("#rt").val();
        var offerout = $("#offerout").val();
        var lineid = $("#lineid").val();
        var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&lineid=' + lineid;

        $.ajax({
            type: "POST",
            url: "post/updatedata.php",
            data: dataString,
            success: function(){
                $('.success').fadeIn(200).show();
                $('.error').fadeOut(200).hide(); 
            }
        });

        return false;
    });
});

and on line of my form (each line is the same but with a different hidden ID variable):

<form method="POST" name="form">
<td>This one</td><td>Los Angeles</td>
<td>CA</td><td>94591</td>
<td>220000</td>
<td>20000</td><td>24500</td>
<td>-5500</td><td>12</td>
<td>0</td><td>0.167</td><td>4</td>
<td>1</td><td>1898</td>
<td></td><td>1</td><td>211335190</td>
<td><input size="6" type="text" id="status" name="status"></td>
<td><input size="6" type="text" id="ly" name="ly"></td>
<td><input size="6" type="text" id="rt" name="rt"></td>
<td><select id="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" id="lineid" value="97">
<td><input type="submit" class="submit" value="Update"></td>
</form>

Thanks in advance, been working for days on this!

better to use: $("#status,#ly,#rt,#offerout,#lineid").serialize(); — Dezigo
– Dezigo, Commented Jun 10, 2011 at 6:41

mu is too short · Accepted Answer · 2011-06-10 05:32:30Z

1

Duplicating id attributes will cause problems. When you say $("#ly"), you'll probably get the first one on the page and that's usually not the one you want. That's easy to solve:

Drop the id attributes in favor of class attributes. You could also use attribute selectors.
Adjust your jQuery selectors to go up to an ancestor and come back down to the thing you want.

First the HTML:

<td><input size="6" type="text" class="status" name="status"></td>
<td><input size="6" type="text" class="ly" name="ly"></td>
<td><input size="6" type="text" class="rt" name="rt"></td>
<td><select class="offerout" name="offerout"><option value="No">No</option><option value="Yes">Yes</option></select></td>
<input type="hidden" name="lineid" class="lineid" value="97">

Then your jQuery:

var $form    = $(this).closest('form');
var status   = $form.find(".status").val();
var ly       = $form.find(".ly").val();
var rt       = $form.find(".rt").val();
var offerout = $form.find(".offerout").val();
var lineid   = $form.find(".lineid").val();

Also, since you are doing a POST request, you should just hand jQuery an object and let it worry about serializing it:

var data = {
    status:   status,
    ly:       ly,
    rt:       rt,
    offerout: offerout,
    lineid:   lineid
};
$.ajax({
    type:    "POST",
    url:     "post/updatedata.php",
    data:    data,
    success: function() {
        $('.success').fadeIn(200).show();
        $('.error').fadeOut(200).hide(); 
    }
});

That should take care of your client-side issues.

answered Jun 10, 2011 at 5:32

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

916 Networks Over a year ago

Thanks - changing to classes was the way to go for sure. I used a combo of the answers to get my code working, thanks!!

Clayton · Accepted Answer · 2011-06-10 05:37:07Z

1

You could store a row number data variable in each submit and use that to determine which row was clicked and thus which inputs you need to pull values from.

$(function() {
    $(".submit").each(function () {
        var rowNum = $(this).attr('data-rownum');
        $(this).click(function () {
            var status = $("#status" + rowNum).val();
            var ly = $("#ly" + rowNum).val();
            var rt = $("#rt" + rowNum).val();
            ....
        });
    });
});

<form method="POST" name="form">
....
<td><input size="6" type="text" id="status1" name="status"></td>
<td><input size="6" type="text" id="ly1" name="ly"></td>
<td><input size="6" type="text" id="rt1" name="rt"></td>    
<input type="hidden" name="lineid" id="lineid1" value="97">
<td><input type="submit" class="submit" value="Update" data-rownum="1"></td>
</form>

edited Jun 10, 2011 at 5:37

answered Jun 10, 2011 at 5:24

Clayton

5,3701 gold badge20 silver badges15 bronze badges

1 Comment

916 Networks Over a year ago

thanks clayton - used part your answer above to get my final code working. thanks!!

Gaurav Porwal · Accepted Answer · 2011-06-10 07:30:39Z

I remove hidden field and assign database id to update button as button will click get that id and corespondent data.

<table width="100%" border="1" cellspacing="0" cellpadding="0">

  <tr>
    <form method="POST" name="form">
      <td>CA</td><td>94591</td>
      <td>220000</td>
      <td>20000</td><td>24500</td>
      <td>-5500</td><td>12</td>
      <td>0</td><td>0.167</td><td>4</td>
      <td>1</td><td>1898</td>
      <td></td><td>1</td><td>211335190</td>
      <td><input size="6" type="text" id="status_97" name="status"></td>
      <td><input size="6" type="text" id="ly_97" name="ly"></td>
      <td><input size="6" type="text" id="rt_97" name="rt"></td>
      <td><select name="offerout" id="offerout_97"><option value="No">No</option><option value="Yes">Yes</option></select></td>
      <td><input type="submit" class="submit" value="Update" name="97"></td>
    </form>
  </tr>

  <tr>
    <form method="POST" name="form">
      <td>CA</td><td>94591</td>
      <td>220000</td>
      <td>20000</td><td>24500</td>
      <td>-5500</td><td>12</td>
      <td>0</td><td>0.167</td><td>4</td>
      <td>1</td><td>1898</td>
      <td></td><td>1</td><td>211335190</td>
      <td><input size="6" type="text" id="status_96" name="status"></td>
      <td><input size="6" type="text" id="ly_96" name="ly"></td>
      <td><input size="6" type="text" id="rt_96" name="rt"></td>
      <td><select name="offerout" id="offerout_96"><option value="No">No</option><option value="Yes">Yes</option></select></td>
      <input type="hidden" name="lineid" id="lineid_96" value="96">
      <td><input type="submit" class="submit" value="Update" name="96"></td>
    </form>
  </tr>

</table>

java script code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
   $(function() {
    $(".submit").click(function() {

        var rowToUpdate = $(this).attr('name');

        var status = $("#status_"+rowToUpdate).val();
        var ly = $("#ly_"+rowToUpdate).val();
        var rt = $("#rt_"+rowToUpdate).val();
        var offerout = $("#offerout_"+rowToUpdate).val();

        var dataString = 'status='+ status + '&ly=' + ly + '&rt=' + rt + '&offerout=' + offerout + '&rowToUpdate='+ rowToUpdate;

        $.ajax({
            type: "POST",
            url: "post/updatedata.php",
            data: dataString,
            success: function(){
                $('.success').fadeIn(200).show();
                $('.error').fadeOut(200).hide(); 
            }
        });

        return false;
    });
});
</script>

I hope this will help you..

this worked great. I used a combo of the answers to get my code working, thanks!!

Collectives™ on Stack Overflow

jquery post - update db - multiple rows

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related