CODEWITHSUNDEEP
jqueryhtmlinputnumbers
gael
gael

Reputation: 55

child input field with type="number" won't update after I edit it

I think I'm having an issue with 2 HTML5 input fields of type "number". What I'd like is that when I enter a number in the first field, that number appears multiplied by 2 in the second field. My code works well until I modify the second field (either by typing a number or something else in the input field, or I click on the up/down arrows to modify the field value). Then, when I edit the first field, the second field isn't updated anymore.

Here's my code, any help would be greatly appreciated. Thanks!

http://jsfiddle.net/6EnWT/

<html>
<head></head>
<body>
<form>
    <input type="number" id="parent" />
    <input type="number" id="child" />
</form>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#parent').on('input', function () {
    $('#child').attr('value', $(this).val() * 2);
});
</script>
</body>
</html>

Upvotes: 0

Views: 132

Answers (1)

gulty
gulty

Reputation: 1076

The problem is that it's updating the attribute value. If you inspect your #child field you will see 10 if you enter 5 in the parent but inside the #child input the number you entered before will remain:

<input type="number" id="child" value="10">

You should use val() instead of attr('value' .. ) because thats updating the input field value instead of the attribute value.

Fiddle Fiddle

JS:

$('#parent').on('input', function () {
  $('#child').val($(this).val() * 2);
});

E: The jQuery version in your fiddle is 1.8.3. That's why your fiddle is working. In your code its 1.11 and for that version you could use the code I provided

Upvotes: 1

Related Questions