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.

.html

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

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

• javascript
• jquery

6 Answers 6

You'd add your event to a button, and retrieve a reference to your input by assigning an ID:

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

function reloadPrice() {
    var price = "0.00"; // set your price here

    // get a ref to your element and assign value
    var elem = document.getElementById("price");
    elem.value = price;
}

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 ment:

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

Use onchange or onblur instead of onfocus!

use onchange. This will activate anytime the value changes:

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

First: this is JavaScript and not Java - so you have to be a javascript and not a java developer.

to solve your problem you can make a new button with a onclick attribute and execute your function there which you have in your onfocus attribute in the text-field. or you can take another event - like onchange or onblur for instance..

<input type="text" onchange="..yourfunctionhere...">

http://www.w3schools./js/js_events.asp

All I need is a button saying refresh that by clicking it will have functionality

For that you need a button with onclick listener, do the below things.

<input type="button" value="Refresh" onclick="opConfig.reloadPrice();" />

<input type="text" value="" name="options[22]" class="input-text"/>