JQUERY: how to serialize input fields with same name

Question

I have the following form that has lots of similar type of input fields with same name (eg. 10 fields for 'name', 10 fields for 'address'). How many times these input fields will repeated, can not be said in prior and therefore they cannot be given static different names (eg. 'name1', 'name2', 'address1', 'address2').

Problem: while I am posting data using ajax post (serialized), its only posting the first value of fields with same name (received with php).

Required:

How can I get all the input data posted properly?
Whats the best way to name such input fields that contain similar data for the purpose of catching those data with php (form is generated in php)?

Sample code:

    <form name="content">
     <table>
      <tr>
       <td>
        <input name="full_name" type="text" />
       </td>
       <td>
        <input name="address" type="text" />
       </td>
      </tr>
      <tr>
       <td>
        <input name="full_name" type="text" />
       </td>
       <td>
        <input name="address" type="text" />
       </td>
      </tr>
    </table>
   </form>

Duplicate? http://stackoverflow.com/questions/2627813/how-to-get-an-array-with-jquery-multiple-input-with-the-same-name — subhaze, Jun 09 '14 at 19:21

Jai · Accepted Answer · 2014-06-09T19:41:05.757

4

I think in your case you can use $.serializeArray():

var data = $('form[name="content"]').serializeArray();

this will produce something like this:

data = [
     {
       name : "full_name",
       value : "thefieldvalue"
     },
     {
       name : "address",
       value : "theaddressvalue"
     },
     .....
];

See this:

data:$('form[name="content"]').serializeArray()+'&request=insert_invoice'

not a correct way to send data instead you can try with this below:

data:{
    frmvalues : $('form[name="content"]').serializeArray(), 
    request:insert_invoice
}

edited Jun 09 '14 at 19:41

answered Jun 09 '14 at 19:19

Jai

74,255
12
74
103

data:$('form[name="content"]').serializeArray()+'&request=insert_invoice' *** the following is posting only "request=insert_invoice" . any idea, why? – origin Jun 09 '14 at 19:27
@origin you can take a look at the updated way of sending data. you should send an object containing `{key:value}` pairs. – Jai Jun 09 '14 at 19:42
Thanks bro, but with the above, I am getting the following output while i am using php print_r() - `Array ( [request] => insert_invoice )` – origin Jun 09 '14 at 19:56
would you try with this: `print_r(array('frmvalues' => frmvalues, 'request' => request));` – Jai Jun 09 '14 at 20:02
@origin seems you just printed only one key `request` not the `frmvalues`. – Jai Jun 09 '14 at 20:04

score 4 · Answer 2 · edited Jan 02 '15 at 15:18

4

<input name="full_name[]" type="text" value="foo" />
<input name="full_name[]" type="text" value="bar" />

In PHP it will be:

Array (
    full_name => Array (
         0 => foo
         1 => bar
    )
)

edited Jan 02 '15 at 15:18

Mohammad Areeb Siddiqui

9,795
14
71
113

answered Jun 09 '14 at 19:20

barell

1,470
13
19

3

Question is on Jquery , not PHP – Hittz Jul 20 '17 at 15:05
@Hittz, question is about how to send serialised array using jQuery but it can be achieved in plain HTML. PHP is just to show example on the server side. – barell Aug 31 '17 at 13:27

score 0 · Answer 3 · answered Jun 29 '16 at 08:37

You have to serialize the data and send it through ajax. On the php side unserialize the data and format it through this function to get the output described the comment above mine. Without it, it will won't return the desired output.

 public function serializedFormDatajQuery2Array($serializedArr){
                  $aFormData = array();
                  foreach($serializedArr as $aRow){

                     if(isset($aFormData[$aRow['name']]) && !is_array($aFormData[$aRow['name']])){
                        $sValue = $aFormData[$aRow['name']];
                        $aFormData[$aRow['name']] = array();
                        $aFormData[$aRow['name']][] = $sValue;
                        $aFormData[$aRow['name']][] = $aRow['value'];
                        continue;
                     }

                                if(is_array($aFormData[$aRow['name']])){
                                            $aFormData[$aRow['name']][] = $sValue;
                                            continue;
                                }

                  $aFormData[$aRow['name']] = $aRow['value'];
                  }
                             return $aFormData;
            }

JQUERY: how to serialize input fields with same name

3 Answers3