How can I execute a javascript function when an input changes?

Question

I am trying to execute a Javascript function when an input changes its value. The input changes its value when other inputs are clicked (those inputs increase or decrease the value).

Here is my html code:

<input type='button' value='–' class='qtyminus' field='quantity{{$accessory-
>id}}' style="font-weight: bold;" />  

<input id='accessory{{$i}}' onchange="updateNoAccessories({{$i}})" 
type='text' name='quantity{{$accessory->id}}' value='1'
class='qty' style="margin-bottom: 0px !important"/>

<input type='button' value='+' class='qtyplus' field='quantity{{$accessory-
    >id}}' style="font-weight: bold;" />

JS function:

function updateNoAccessories(i) {
    var no = document.getElementById("accessory"+i).value;
    document.getElementById("acc"+i).innerHTML = no + ' x';
}

What I want to update from JS function:

<span>You chose:<i><b id="acc0"></b> items,</i><i><b id="acc1"></b> 
things,</i><i><b id="acc2"></b>stuff</i></span>

Possible duplicate of [On input change event?](http://stackoverflow.com/questions/6458840/on-input-change-event) — Gaurav Chaudhary, Apr 07 '17 at 08:52

score 1 · Accepted Answer · edited Apr 07 '17 at 09:17

Your button + and - are not linked to your input with the onchange so your event is never triggerd (maybe you didn't paste that part of your code) and you can use oninput instead of onchange.

You can fix that with something like :

<input type='button' value='–' class='qtyminus' field='quantity{{$accessory-
>id}}' style="font-weight: bold;" onclick='updateValue(-1,$i)'/> 

<input id='accessory{{$i}}' oninput="updateNoAccessories({{$i}})" 
type='text' name='quantity{{$accessory->id}}' value='1'
class='qty' style="margin-bottom: 0px !important"/>

<input type='button' value='+' class='qtyplus' field='quantity{{$accessory-
    >id}}' style="font-weight: bold;" onclick='updateValue(+1,$i)'/>

and the js :

function updateValue(i,id) {
    var no = document.getElementById("accessory"+id).value;
    no = no + i;
    document.getElementById("acc"+id).innerHTML = no;
}

function updateNoAccessories(i) {
    var no = document.getElementById("accessory"+i).value;
    document.getElementById("acc"+i).innerHTML = no + ' x';
}

This seems to work , but it increments the value by 2, not by 1 and I can't figure out why. One small chage was ("acc" + id) in the updateValue function, but now when i click the input "+" increases by 2 — Marius Stanciu, Apr 07 '17 at 09:09
Solved it , delete line 3 from updateValue function because my class already increments the value . Thanks a lot! — Marius Stanciu, Apr 07 '17 at 09:15
Maybe because the updateNoAccessories is triggered by updateValue. Thanks I updated my answer with your edit — Nico_, Apr 07 '17 at 09:15

score 0 · Answer 2 · answered Apr 07 '17 at 08:56

Just replace your onchange event to oninput which will update the value of an element on change in input value.

So your code will be look like this:

<input type='button' value='–' class='qtyminus' field='quantity{{$accessory-
>id}}' style="font-weight: bold;" />  

<input id='accessory{{$i}}' oninput="updateNoAccessories({{$i}})" 
type='text' name='quantity{{$accessory->id}}' value='1'
class='qty' style="margin-bottom: 0px !important"/>

<input type='button' value='+' class='qtyplus' field='quantity{{$accessory-
    >id}}' style="font-weight: bold;" />

Hopefully this should work!

How can I execute a javascript function when an input changes?

2 Answers2