CODEWITHSUNDEEP
jqueryserialization
Tom
Tom

Reputation: 1618

Jquery Serializing Form Data

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

Upvotes: 0

Views: 49

Answers (3)

Haresh Vidja
Haresh Vidja

Reputation: 8496

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>

Upvotes: 2

Sher Singh
Sher Singh

Reputation: 287

<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

Upvotes: 0

oshell
oshell

Reputation: 9103

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>

Upvotes: 0

Related Questions