CODEWITHSUNDEEP
javascriptjqueryarraysobject
Soptareanu Alex
Soptareanu Alex

Reputation: 5206

Keep the values of each input in an js object

I need to keep the values of each input in an js object. This is my html code :

<div class="produs_varianta">
      <input type="text" class="product_name" value="Product One">
      <input type="text" class="product_code" value="Code One">
</div>
 <div class="produs_varianta">
      <input type="text" class="product_name" value="Product Two">
      <input type="text" class="product_code" value="Code Two">
</div>
 <div class="produs_varianta">
      <input type="text" class="product_name" value="Product Three">
      <input type="text" class="product_code" value="Code Three">
</div>

My .js code :

var variante = $('.produs_varianta');
var produs_varianta = [];
variante.each(function(index){
     produs_varianta.push(
     {
         'produs' : 'the value of product_name',
         'cod'    : 'the value of product_code
     }
   );
});

** I tried using $(this).children('.product_name').val() but i've got undefined ! **

Upvotes: 2

Views: 96

Answers (3)

Arun Banik
Arun Banik

Reputation: 470

$(document).ready(function () {
    var variante = $('.produs_varianta');
    var produs_varianta = [];
    variante.each(function (index) {
        produs_varianta.push(
         {
             'produs': $(this).find('.product_name').val(),
             'cod': $(this).find('.product_code').val()
         }
       );
    });

    // NOW READ THE PRODUCTS AND ITS CODES.
    $.each(produs_varianta, function (key) {
        alert(produs_varianta[key].produs + ': ' + produs_varianta[key].cod);
    });
});

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

Use .find() as in $(this).find(".class").val()

var variante = $('.produs_varianta');
var produs_varianta = [];
variante.each( function() {
  produs_varianta.push({
    'produs': $(this).find(".product_name").val(),
    'cod': $(this).find(".product_code").val()
  });
});

console.log(produs_varianta)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="produs_varianta">
  <input type="text" class="product_name" value="Product One">
  <input type="text" class="product_code" value="Code One">
</div>
<div class="produs_varianta">
  <input type="text" class="product_name" value="Product Two">
  <input type="text" class="product_code" value="Code Two">
</div>
<div class="produs_varianta">
  <input type="text" class="product_name" value="Product Three">
  <input type="text" class="product_code" value="Code Three">
</div>

Upvotes: 3

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You need to add a jquery function for this. Your HTML is

<div class="produs_varianta">
      <input type="text" class="product_name" value="Product One">
      <input type="text" class="product_code" value="Code One">
</div>
 <div class="produs_varianta">
      <input type="text" class="product_name" value="Product Two">
      <input type="text" class="product_code" value="Code Two">
</div>
 <div class="produs_varianta">
      <input type="text" class="product_name" value="Product Three">
      <input type="text" class="product_code" value="Code Three">
</div>

And the JQuery will be this

var result = [];
$('.produs_varianta').each(function( ) {
  var elem = $(this);
  var obj = {
     'product_name': elem.find('.product_name').val(),
     'product_code' : elem.find('.product_code').val()
  };
  result.push(obj);     
});

console.log(result);

Here is the attached link of JSFIDDLE

Upvotes: 1

Related Questions