CODEWITHSUNDEEP
phpformsjquery
user638009
user638009

Reputation: 223

Jquery ajax, send several rows of information with same id

I have an html table inside a form.

This table is filled with information from my database. This is how the table looks like: 

<table>
<tr> 
<td >Number</td>
<td >Name</td>
<td >Last Name</td>
</tr> 
<tr> 
<td> <input type="hidden" id="number" value="1">1</td>
<td> <input type="hidden" id="name" value="John">John</td>
<td> <input type="hidden" id="last" value="Snow">Snow</td>
</tr> 
<tr> 
<td> <input type="hidden" id="number" value="2">2</td>
<td> <input type="hidden" id="name" value="Jean">Jean</td>
<td> <input type="hidden" id="last" value="Dow">Dow</td>
</tr> 
.
.
</table>

The number of rows the table has depends on the number of rows the database throws.

If the information is correct the user will hit the form’s submit button.

The submit button will take it to a function in a js file. From there, I need to get the values of the table and send them to a php file.

To achieve that, inside the function, in the js file I’m doing: 

var sNumber = $("# number ").val();
 var sName = $("#name").val();
  var sLast = $("#last").val();
   params = '';
    params += '&number='+sNumber;
    params += '&name='+sName;   
    params += '&last='+sLast;   
     theUrl = 'controller.php';
   $.ajax ({
        url: theUrl,
        data: params,
        async:false,
        success: function (data, textStatus)
        {              
        }
    });

But as the ids of the rows in the table are identical I’m only getting the first row’s information.

Can anyone please help me to send all the information the table has to the php file?

Many thanks

Upvotes: 0

Views: 3061

Answers (4)

Last Rose Studios
Last Rose Studios

Reputation: 2481

Ids should never be identical. There should only be 1 item of a given item per ID. That said, if you want to have items with similar features, you should use classes. That said, you might also want to have the name attribute included.

If you really want to work with Ids, you should mark it up more like 

<table id="users">
<tr> 
<td >Number</td>
<td >Name</td>
<td >Last Name</td>
</tr> 
<tr class="someclass"> 
<td> <input type="hidden" name="number" id="number-1" value="1">1</td>
<td> <input type="hidden" name="name" id="name-1" value="John">John</td>
<td> <input type="hidden" name="last" id="last-1" value="Snow">Snow</td>
</tr> 
<tr class="someclass"> 
<td> <input type="hidden" name="number" id="number-2" value="2">2</td>
<td> <input type="hidden" name="name" id="name-2" value="Jean">Jean</td>
<td> <input type="hidden" name="last" id="last-2" value="Dow">Dow</td>
</tr> 
.
.
</table>

and javascript should be like

//get the table and iterate over every row
$('table').find('.someclass').each(function(){
  //get each inputs name and value
  var somevar = $(this)
  var number = somevar.find('[name=number]').val()
  var name = somevar.find('[name=name]').val()
  var last = somevar.find('[name=last]').val()
  //Do something with these
});

A few other things you could do would be to simply use jQuery.post(). So on submit you would do 

//serialze the form and submit it. 
$.post("controller.php", $('form').serialize(),
   function(data) {
     //handle the response
     alert("Data Loaded: " + data);
   }
);

For this to work you would need to use number[], name[], and last[] as the input names to they get stored as an array.

Upvotes: 0

nunespascal
nunespascal

Reputation: 17724

id attribute on an element has to be unique. Use a class. Use jQuery to look over the set matching the class.

You can send the same variable multiple times in GET and POST.

params = '';
$(".name").each(function(){
  var sName = $(this).val();
  params += '&name='+sName;   
});
//similar for number and last

theUrl = 'controller.php';
$.ajax ({
        url: theUrl,
        data: params,
        async:false,
        success: function (data, textStatus)
        {              
        }
    });

Upvotes: 0

mgraph
mgraph

Reputation: 15338

use class and do as :

var listName = [];
$(".name").each(function(){
    listNames.push($(this).val());
    alert($(this).val());
})​

Upvotes: 1

bart s
bart s

Reputation: 5100

an id must be unique on a page. use class instead of id

when you have no more double id's in your page, take a look at the jQuery each() functionality to get all required data in your ajax call

Upvotes: 2

Related Questions