使用JavaScript / jquery刷新文本字段中的值

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

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

Answer 2

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

Answer 3

使用onchange或onblur而不是onfocus！

Answer 4

use onchange. This will activate anytime the value changes:

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

Answer 5

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.com/js/js_events.asp

Answer 6

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"/>