Refresh value in text field with 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:

insert value into the textfield
click somewhere outside the textfield
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

Paul Aldred-Bann · Accepted Answer · 2012-08-06 10:50:58Z

2

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

answered Aug 6, 2012 at 10:50

Paul Aldred-Bann

6,0306 gold badges39 silver badges55 bronze badges

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

Comments

Christofer Eliasson · Accepted Answer · 2012-08-06 12:47:17Z

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

edited Aug 6, 2012 at 12:47

answered Aug 6, 2012 at 10:49

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

4 Comments

Dom Over a year ago

Unfortunately none of the solutions did not work for me. I think best will be if Ill just provide link to the site as my explenation isn't clear. floorstodoors.mldemo.co.uk/spotlight/… Its the Enter Square Metre: field. Thanks for your help.

Christofer Eliasson Over a year ago

@Dom The calculator seems to work for me? Or what is the problem there?

Dom Over a year ago

Thanks for looking. Calculator as you have notived works perfectly fine. Although there is a text field "Enter Square Metre:" under it that allows to change total amount required. You can insert your own value there but in order to change the Total Price you will need to click out outside the text field and then back inside it. When I am trying to acheave is a button that will update the Total Price after changing "Enter Square Metre" clicking on it.

Dom Over a year ago

now ive hit another wall! The calculator above become unresponsive. Which is logical. The solution wont be as simple i guess. Now whenever I add fields in the calculator above "Enter Square Metre:" it will change the value but will not trigger the Total Price. I'm sorry for being such a pain on this one, but is there anything can be done about it please?

Armel Larcier · Accepted Answer · 2012-08-06 10:50:05Z

1

Use onchange or onblur instead of onfocus!

answered Aug 6, 2012 at 10:50

Armel Larcier

16k7 gold badges70 silver badges89 bronze badges

Comments

SReject · Accepted Answer · 2012-08-06 10:51:15Z

0

use onchange. This will activate anytime the value changes:

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

answered Aug 6, 2012 at 10:51

SReject

3,9462 gold badges28 silver badges44 bronze badges

Comments

tuxtimo · Accepted Answer · 2012-08-06 10:51:39Z

0

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

answered Aug 6, 2012 at 10:51

tuxtimo

2,79023 silver badges29 bronze badges

Comments

subodh · Accepted Answer · 2012-08-06 11:15:50Z

0

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

answered Aug 6, 2012 at 11:15

subodh

6,15813 gold badges53 silver badges73 bronze badges

Collectives™ on Stack Overflow

Refresh value in text field with JavaScript/jquery

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related