Submit data within multiple table rows separately with jQuery.ajax()

Question

Currently I am able to submit my form as long as I only have one row within the table. If I add a second row it won't work and I get an error. What I want to achieve is to post the data within each table row separately, but with only a single button press. You can see my HTML mark-up below.

<form>
  <table>
    <tr>
      <td><input type="hidden" name="FirstName" id="FirstName" value="Bob">Bob</td>
      <td><input type="hidden" name="Surname" id="Surname" value="Hoskins">Hoskins</td>
    </tr>

    <tr>
      <td><input type="hidden" name="FirstName" id="FirstName" value="Bruce">Bruce</td>
      <td><input type="hidden" name="Surname" id="Surname" value="Wayne">Wayne</td>
    </tr>
  </table>
</form>

I've been told that I can use jQuery AJAX to submit the data. I'm wondering if there's a way to write this jQuery so that it targets the first table row, submits the data, then the second row, submits the data again, and so on until all the rows are submitted separately in a loop. Below is the basic code I have for submitting the data but it needs to work with my HTML.

$.ajax({
   type: "POST",
   cache: false, 
   url: "WuFoo.aspx",
   data: data,
   success: success
});

FosterZ · Accepted Answer · 2014-04-28 11:20:32Z

1

I think you can do this way, first apply an ID to your table and loop through each tr.

$('#TableID > tr').each(function() {
    var postData = {
    'FirstName':$(this).find('#FirstName').val(),
    'SurName':$(this).find('#Surname').val()
    };
    $.ajax({
    type: "POST",
    cache: false, 
    url: "WuFoo.aspx",
    data: postData ,
    success: success
    });
 });

EDIT : I have updated my answer, I'm not sure this is the best way to do, but this will work to post your data.

edited Apr 28, 2014 at 11:20

answered Apr 28, 2014 at 8:44

FosterZ

3,9216 gold badges41 silver badges64 bronze badges

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

1 Comment

Ollie Clark Over a year ago

Thanks, this looks great - however I'm not too sure about the 'data'. The data I want to send is the values of the hidden inputs just as if I were to submit the form. How would I go about writing that?

Collectives™ on Stack Overflow

Submit data within multiple table rows separately with jQuery.ajax()

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related