Question

I have a function that calculate price for a product. I’m not JavaScript developer so my knowledge is very limited.

By changing the value in the text field script calculate price for product.

 <input type="text" value="" name="options[22]" class="input-text"
 onfocus="opConfig.reloadPrice()">

Problem is that the script triggers only if the following is done:

1. insert value into the textfield
2. click somewhere outside the textfield
3. click back into the text field

All I need is a button saying refresh that by clicking it will have functionality of step 2 and step above.

I’m not sure if I explained it properly so if there is any more information required to resolve this issue please let me know.

Here is the link to the site.

http://www.floorstodoors.mldemo.co.uk/spotlight/oak-value-lacquered-3-strip.html

The field im trying to amend/add refresh button is Enter Square Metre

Answer 1

I’m not sure I fully understand you, but is this what you need?

<input type="text" value="" name="options[22]" class="input-text">
<input type="button" onclick="opConfig.reloadPrice()" value="Refresh" />

A button with an click-event listener, so that when you click the refresh-button the opConfig.reloadPrice() method gets executed.

Edit based on comment:

I’m not sure what JavaScript library you are using, but you have these two lines in you code that seems to add event-listeners to the input with id qty.

$('qty').observe('focus',function(){
    $('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});     
$('qty').observe('focus',this.getFromQties.bind(this))

They are listening for the focus event, thus only triggers when your input field gains focus.

If you modify those to listen for the keyup event instead, I believe it will work better. Without being familiar with the framework, I guess the only thing to change would be this:

$('qty').observe('keyup',function(){
    $('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});     
$('qty').observe('keyup',this.getFromQties.bind(this))