CODEWITHSUNDEEP
javascriptjqueryarrays
notaverygoodprogrammer
notaverygoodprogrammer

Reputation: 357

jquery create array dynamically

I have a page with 3 input fields. Of these fields I want to get the max value. What I'd like to achieve is that a user can fill in a field, the value of that field is dynamically added to an array, and also this value be displayed in a textfield if this value is greater than the value of the other two input fields. I'd like to be able to do this without the onBlur() function (if possible). Tried using the keyup function, but this will keep adding numbers to the array where only 3 numbers should be available..

This is what I have so far:

$(document).ready(function() {
  $('#a').keyup(function() {
    var x = $('#a').val();
    hs.push(x);
  });
  $('#b').keyup(function() {
    var y = $('#b').val();
    hs.push(y);
  });
  $('#c').keyup(function() {
    var z = $('#c').val();
    hs.push(z);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="a" type="text" />
<input id="b" type="text" />
<input id="c" type="text" />

If I enter 1 in a, 2 in b and 3 in c, then change my mind and change c from 3 to 33, I now have 4 numbers in my array (1,2,3,33), whereas I only want 3 (1,2,33)...

I'm guessing the keyup function is not the way to go here, but would like to keep it as dynamical as possible without forcing the user to change focus from any of the inputs to get a result.

Anyone have an idea how to do this, if even possible ?

Upvotes: 1

Views: 1845

Answers (3)

notaverygoodprogrammer
notaverygoodprogrammer

Reputation: 357

Thanks guys,

You're the best.

I ended up using a combination of both answers. I'm not a programmer, and just started out with Jquery, so my solution will probably not be the best, but it works for me.... This is the end result :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
var hs= {
    'a': null,
    'b': null,
    'c': null,
};

$(document).ready(function() {
  $('input').keyup(function() {
    hs[this.id] = $(this).val();
    var x = hs["a"];
    var y = hs["b"];
    var z = hs["c"];
    $("#d").val(Math.max(x,y,z));
  });
});

</script>
</head>
<body>
  <input id="a" type="text"/>
  <input id="b" type="text"/>
  <input id="c" type="text"/><br><br>
  <input id="d" type="text"/>
</body>
</html>

Thanks again, Hans

Upvotes: 0

code-jaff
code-jaff

Reputation: 9330

Array doesn't seem to be a convenient data structure for this purpose. You might need to have an object which simulates hashmap with keys of input element's ids.

For Eg.

simply 

<input id="a" type="text" />
<input id="b" type="text" />
<input id="c" type="text" />

var hs = {};

$(document).ready(function () {
    $('input').keyup(function () {
        hs[this.id] = $(this).val();
    });
});

FIDDLE

Upvotes: 1

Spencer Wieczorek
Spencer Wieczorek

Reputation: 21575

This is because .push() appends to an array. You will want to change the item at a certain index. In your case hs[0], hs[1], and hs[2] would be changed instead other than push. So you can have hs = [null, null, null] and change the values appropriately. Using an Array isn't the best approach, you probably want to use an object with 3 attributes a, b, and c. Here is how to do that:

  var hs = {
      'a': null,
      'b': null,
      'c': null
  };

Then just set the elements hs.a or hs.b or hs.c:

$('#a').keyup(function() {
  var x = $('#a').val();
  hs.a = x;
});
$('#b').keyup(function() {
  var y = $('#b').val();
  hs.b = y;
});
$('#c').keyup(function() {
  var z = $('#c').val();
  hs.c = z;
});

Upvotes: 2

Related Questions