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?

Gaurav Chaudhary
– Gaurav Chaudhary

2017-04-07 08:52:15 +00:00
Commented Apr 7, 2017 at 8:52 — Gaurav Chaudhary
– Gaurav Chaudhary, Commented Apr 7, 2017 at 8:52
That didn't work for me..

Marius Stanciu
– Marius Stanciu

2017-04-07 08:54:47 +00:00
Commented Apr 7, 2017 at 8:54 — Marius Stanciu
– Marius Stanciu, Commented Apr 7, 2017 at 8:54

Marius Stanciu · Accepted Answer · 2017-04-07 09:17:24Z

1

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

edited Apr 7, 2017 at 9:17

Marius Stanciu

153 bronze badges

answered Apr 7, 2017 at 9:00

Nico_

1,39617 silver badges32 bronze badges

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

3 Comments

Marius Stanciu Over a year ago

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 Over a year ago

Solved it , delete line 3 from updateValue function because my class already increments the value . Thanks a lot!

Nico_ Over a year ago

Maybe because the updateNoAccessories is triggered by updateValue. Thanks I updated my answer with your edit

Nik Lakhani · Accepted Answer · 2017-04-07 08:56:40Z

0

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!

answered Apr 7, 2017 at 8:56

Nik Lakhani

2171 silver badge10 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related