creating array of associative array in jquery

Question

I need to create an array of associative arrays for sending the same to php script as ajax post. How do I do that?

To be a little more specific, I have rows of two inputs named "First Name" and "Last Name". When I press submit button, this should generate an array like:

var name_array = [{"first_name" : string1, "last_name" : string2},
 {"first_name" : string3, "last_name" : string4},
 .
 .
 .]

I will then send this array to php through ajax post. If the above construct is made then what should be the syntax for sending name_array as data to the php script?

Possible duplicate of Dynamically creating keys in JavaScript associative array — Jacques Koekemoer
– Jacques Koekemoer, Commented Mar 18, 2016 at 12:27
You are using jQuery, right? stackoverflow.com/a/20150474/2191572 — MonkeyZeus
– MonkeyZeus, Commented Mar 18, 2016 at 12:28

Vijay Wilson · Accepted Answer · 2016-03-18 13:42:54Z

0

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
    var hold_data = {};
    $(document).on('click','#submit',function()
    {
        $("#myform .field").each(function()
        {
            hold_data[$(this).attr('name')] = $(this).val();
         });
        var json_data = JSON.stringify(hold_data);
        alert(json_data);

         $.ajax(
         {
             url:'', //url location for where you want to submit the data
             type:'post',
             data:{form_data:json_data},
             success:function(res)
             {
                 alert("Successfully sent and your response "+res);
              }
          });
      }); 
});
</script>
</head>

<body>
<form id="myform" action="">
  First name: <input type="text" class="field" name="FirstName"  value="Tom"><br>
  Last name: <input type="text" class="field" name="LastName" value="Raze"><br>
  <input type="button" id="submit" value="Submit">
</form>
</body>

Incase if you are posting to a php page then you can decode the json data as shown below.

The temp value being echoed will be shown as the response res data in ajax

<?php

if(isset($_POST['form_data']))
{
    $temp = json_decode($_POST['form_data']);
    echo temp;
}

?>

answered Mar 18, 2016 at 13:42

Vijay Wilson

5167 silver badges21 bronze badges

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

1 Comment

Sukalyan Ghoshal Over a year ago

Thank you so much. This work just the way I wanted. Thanks again Wilson

Collectives™ on Stack Overflow

creating array of associative array in jquery

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