jquery create array dynamically

Question

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 ?

you should probably go with object, which would maintain unique keys. — code-jaff
– code-jaff, Commented Feb 24, 2015 at 15:58
You should also learn a bit about arrays, since you're basically adding values to one, the behavior is expected. — Deleteman
– Deleteman, Commented Feb 24, 2015 at 16:03
You should try with an associative array, not an indexed one then you'll end up with something like : hs.a = x; hs.b = y; hs.c = z; — JC Sama
– JC Sama, Commented Feb 24, 2015 at 16:04
@JCSama there is no such associative arrays in javascript. You might feel objects as such, but they don't. — code-jaff
– code-jaff, Commented Feb 24, 2015 at 16:12
@code-jaff, Yes that's what I meant objects, thanks for the note. — JC Sama
– JC Sama, Commented Feb 24, 2015 at 22:38

Spencer Wieczorek · Accepted Answer · 2015-02-24 16:02:03Z

2

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;
});

answered Feb 24, 2015 at 16:02

Spencer Wieczorek

21.6k7 gold badges46 silver badges57 bronze badges

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

Comments

code-jaff · Accepted Answer · 2015-02-24 16:09:47Z

1

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

edited Feb 24, 2015 at 16:09

answered Feb 24, 2015 at 16:04

code-jaff

9,3284 gold badges38 silver badges56 bronze badges

Comments

notaverygoodprogrammer · Accepted Answer · 2015-02-24 21:14:46Z

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

Collectives™ on Stack Overflow

jquery create array dynamically

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related