Jquery Serializing Form Data

Question

I know there have been lots of questions about this and I have it working upto a point..

My form is designed as :

 <tr data-id='123456789'>
 <td><input name="Site" type="text" id="Site" value='123'/></td>
 <td><input name="Location" type="text" id="Location" value='NW'/></td>
 </tr>
 <tr data-id='987654321'>
 <td><input name="Site" type="text" id="Site" value='444'/></td>
 <td><input name="Location" type="text" id="Location" value='NE'/></td>
 </tr>

I'm then serialising using :

var datastring = $("#form2").serialize();

This works but doesn't include the data-id from the TR is there anyway I can include that ?

What I want to send to my php page is :

123456789:123:NW
987654321:444:NE

I'm happy to go with a better way of doing this ! Thanks

• DsRaj: you can pass data-id in hidden field

Answer 1

Here I have write some code this will be help full to you. you can do it instead of serialize of form.

var post_data={data:[]};
$('tr[data-id]').each(function(){
 var tmp=[];
 tmp.push($(this).data('id'));
 $(this).find('input').each(function(){
 tmp.push($(this).val());
 });
 post_data.data.push(tmp.join(":"));
});
alert(JSON.stringify(post_data));
// now you can post data as a form using ajax.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr data-id='123456789'>
 <td><input name="Site" type="text" id="Site" value='123'/></td>
 <td><input name="Location" type="text" id="Location" value='NW'/></td>
 </tr>
 <tr data-id='987654321'>
 <td><input name="Site" type="text" id="Site" value='444'/></td>
 <td><input name="Location" type="text" id="Location" value='NE'/></td>
 </tr>
 </table>

• Tom: Thanks that takes the data I need.

Answer 2

Use hidden input and set all the values in arrays. Don't use ID's or names multiple times.

<tr data-id='123456789'>
 <td>
 <input name="id[]" type="hidden" value='123456789'/>
 <input name="Site[]" type="text" value='123'/>
 </td>
 <td>
 <input name="Location[]" type="text" value='NW'/>
 </td>
</tr>
<tr data-id='987654321'>
 <td>
 <input name="id[]" type="hidden" value='987654321'/>
 <input name="Site[]" type="text" value='444'/>
 </td>
 <td>
 <input name="Location[]" type="text"value='NE'/>
 </td>
</tr>

Answer 3

<tr>
 <td><input name="data_id[]" type="text" id="data_id" value='123456789'/></td>
 <td><input name="Site[]" type="text" id="Site" value='123'/></td>
 <td><input name="Location[]" type="text" id="Location" value='NW'/></td>
</tr>
<tr>
 <td><input name="data_id[]" type="text" id="data_id" value='987654321'/></td>
 <td><input name="Site[]" type="text" id="Site" value='444'/></td>
 <td><input name="Location[]" type="text" id="Location" value='NE'/></td>
</tr>

Fetch all three array in php page and process them in a loop, You can process Site and location on the basis of data_id