How to get a value of a input field in to array of multiple Object

Question

I have a form with multiple input field, I need to get value of that form and pass into JSON object as shown below. each of the field will have object in the array. How Do I get all multiple field to pass as Array of Object.(form will allow to add multiple field)

I'm using JavaScript and jQuery to get all Value.

<div class="info">
<div class="field">
  <label> field 1 </label>
  <input placeholder="Name" class="name" type="text">
  <input placeholder="email"   class="email" type="text">
  <input placeholder="Address"  class="address" type="text">
</div>
<div class="field">
  <label> field 2</label>
  <input placeholder="Name"  class="name" type="text">
  <input placeholder="email"  class="email" type="text">
  <input placeholder="Address"  class="address" type="text">
</div>
<div class="field">
  <label> field 3 </label>
   <input placeholder="Name"  class="name" type="text">
  <input placeholder="email"   class="email" type="text">
  <input placeholder="Address"  class="address" type="text">
</div>
<div class="field">
  <label> field 4 </label>
  <input placeholder="Name"  class="name" type="text">
  <input placeholder="email"  class="email" type="text">
  <input placeholder="Address"  class="address" type="text">
</div>
</div>

On click event will get the form value and The final JSON object will look like,

{
  "info": [
    {
      "Name": "string 1",
      "email": "this",
      "Address": "that"
    },
    {
      "Name": "string 2",
      "email": "this",
      "Address": "that"
    }
  ]
}

I tried to getting value from each of the input in different field.

  var nameInput = document.getElementsByClassName("name"),

      names = [].map.call(nameInput, function(input) {
        return input.value;
      });

But How do I add email and address field in object and map into array,

I have edited the question, I'm getting single field value by array.map — Sanjay V
– Sanjay V, Commented Jun 22, 2017 at 15:52
but there is no such class named name have you tried getting the values from id tag ? — warl0ck
– warl0ck, Commented Jun 22, 2017 at 15:53
By the way, it's bad UI to label a text field using only a placeholder. It's better to have a text label that is always visible, so users can double-check whether they typed the information in the correct field. — Rory O'Kane
– Rory O'Kane, Commented Jun 22, 2017 at 16:05

Rory O'Kane · Accepted Answer · 2017-06-22 16:42:48Z

This should work. The variable formData has the structure you want.

This code assumes that the key "info" is always the same, so it always looks within .info.

var fieldsValues = [];

$(".info .field").each(function(index, field) {
  var fieldData = {};
  $(field).find("input").each(function(index, input) {
    fieldData[input.placeholder] = input.value;
  });

  fieldsValues.push(fieldData);
});

var formData = {info: fieldsValues};
console.log(formData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="info">
  <div class="field">
    <label> field 1 </label>
    <input placeholder="Name" class="name" type="text" value="some name 1">
    <input placeholder="email" class="email" type="text" value="some email 1">
    <input placeholder="Address" class="address" type="text" value="some address 1">
  </div>
  <div class="field">
    <label> field 2</label>
    <input placeholder="Name" class="name" type="text">
    <input placeholder="email" class="email" type="text">
    <input placeholder="Address" class="address" type="text">
  </div>
  <div class="field">
    <label> field 3 </label>
    <input placeholder="Name" class="name" type="text">
    <input placeholder="email" class="email" type="text">
    <input placeholder="Address" class="address" type="text">
  </div>
  <div class="field">
    <label> field 4 </label>
    <input placeholder="Name" class="name" type="text">
    <input placeholder="email" class="email" type="text">
    <input placeholder="Address" class="address" type="text">
  </div>
</div>

Javier · Accepted Answer · 2017-06-22 16:03:32Z

0

Try something like this:

    var result = {"info":[]};
    $(".info .field").each(function () {
        var info = {};
        $(this).children("input").each(function () {
            eval("info." + $(this).attr("placeholder") + "='" + $(this).val()+"'");
        });
        result.info.push(info);
    });

answered Jun 22, 2017 at 16:03

Javier

384 bronze badges

1 Comment

Rory O'Kane Over a year ago

eval should be avoided when possible. To set the property of an object where the property name is in a variable, you can use obj[name] = val, or info[$(this).attr("placeholder")] = $(this).val() in this case. The version with eval could break if $(this).val() had special characters like " or \ in it.

Collectives™ on Stack Overflow

How to get a value of a input field in to array of multiple Object

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related