Home/ Questions/Q 8666165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T17:39:36+00:00

I’ve seen several forms on webshops where you just change the amount of items

  • 0

I’ve seen several forms on webshops where you just change the amount of items you want, and it instantly changes the price. No reloading and no submit (or calculate) button.

I’m looking for something like that, but very simple.

Amount of pages: [textfield]
price: [answer]

That’s all.
The code must take the input from the [textfield] and multiply it with a certain number (which I can change in the code). The result of that calculation should be presented at [answer].

I’ve been looking around on Google, but I can only find very difficult and big forms that use a submit button. And my php/ajax/javascript isn’t good enough to write te code myself.
I know that there are several Submit forms on Stackoverflow, but I don’t understand how I can edit them to do what I want it to do.

You don’t have to make it look fancy, I’ve made a nice form to put the code in.
Obviously it has to work on every major browser.

Edit:
I’ve tried the code supplied by Khòi.

I’ve tried playing with this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="jquery-1.8.2.min.js" type="text/javascript" defer="defer">
$('#pages').change(function(ev){
var total = $('#pages').val() * 0.2;
$('#total').html((total).toFixed(2));
});?
</script>
</head>
<body>

Pages: <input type="text" name="pages" id="pages" />
<br/><br/>
Total: <span id="total">0.00</span>

</body>
</html>

But that doesn’t work ??
I did download the Jquery file and put into the same folder as this page is.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I’d advise you to learn some basic JQuery. Things like these can be done very efficently with JQuery and the learning curve isn’t too steep.

    I made you a fiddle to get you started:

    http://jsfiddle.net/jRs3n/

    Here is the full code for a single working HTML page:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<script  type="text/javascript">
$(document).ready(function() {
    $('#pages').keyup(function(ev){
        var total = $('#pages').val() * 0.2;
        $('#total').html((total).toFixed(2));
    });
});
</script>
</head>
<body>

Pages: <input type="text" name="pages" id="pages" />
<br/><br/>
Total: <span id="total">0.00</span>

</body>
</html>
    • 0