Shoutbox

Dynamically changing text box, based on a form input? - Printable Version

-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: Dynamically changing text box, based on a form input? (/showthread.php?tid=93785)

Dynamically changing text box, based on a form input? by Jimbo on 02-07-2010 at 09:37 PM

Hey,

How would I be able to retrieve the amount entered into a form, eg. $5.00, and then divide that number by 0.05, and the finally rounding it to the nearest whole number, and display the result?


Maybe this will help:

This is the form I am trying to get the amount from.

HTML code:
<form name="MyForm" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <fieldset>
    <label for="amount">$</label>
    <input id="amount" name="amount" value="5.00" />
    <label for="custom">Steam ID:</label>
    <input id="custom" name="custom" value="<?php echo strstr(curPageURL(), 'STEAM_');?>" />
    <input name="business" type="hidden" value="******************" />
    <input name="cmd" type="hidden" value="_xclick" />
    <input name="currency_code" type="hidden" value="USD" />
    <input name="item_name" type="hidden" value="vip" />
    <input name="no_note" type="hidden" value="1" />
    <input name="no_shipping" type="hidden" value="1" />
    <input src="http://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" type="image" alt="Click here to donate">
   
  </fieldset>
</form>

I am trying to get the amount entered by the user, which as you can see above, defaults to $5.

Many thanks.
RE: Dynamically changing text box, based on a form input? by Chrissy on 02-07-2010 at 10:07 PM

Using PHP?


RE: Dynamically changing text box, based on a form input? by stoshrocket on 02-07-2010 at 10:14 PM

PHP code:
$am = $_POST['amount'];
$ret = ceil($am/0.05);


EDIT:

NB: ceil rounds up to nearest integer value, which I assumed from your post. However, if you needed to round up such that you end up to the nearest pence/cent, you'd have to use round() and an appropriate precision value, along with adding 0.005 to ensure you end up with the correct rounded up value...

PHP code:
$am = $_POST['amount'];
$ret = round(($am/0.05)+0.005, 2);


EDIT 2:

Thinking about it, dividing an integer with no more than 2 dp by 0.05 (effectively multiplying by 20) will mean there will be at most 1dp, so that last edit can be ignored, but kept for reference :P
RE: Dynamically changing text box, based on a form input? by Jimbo on 02-07-2010 at 11:03 PM

quote:
Originally posted by krissy-afc
Using PHP?
Using anything really, PHP, Java, I don't mind.

quote:
Originally posted by stoshrocket
PHP code:
$am = $_POST['amount'];
$ret = ceil($am/0.05);


EDIT:

NB: ceil rounds up to nearest integer value, which I assumed from your post. However, if you needed to round up such that you end up to the nearest pence/cent, you'd have to use round() and an appropriate precision value, along with adding 0.005 to ensure you end up with the correct rounded up value...

PHP code:
$am = $_POST['amount'];
$ret = round(($am/0.05)+0.005, 2);


EDIT 2:

Thinking about it, dividing an integer with no more than 2 dp by 0.05 (effectively multiplying by 20) will mean there will be at most 1dp, so that last edit can be ignored, but kept for reference :P
Thanks, but wont that $_POST variable only be retrieved after the form is submitted? or am I being stupid?

I'm trying to make it change instantly, as a new value is entered into the amount box, or if that isn't possible, a button or something to update the total.

And also, I am not trying to round the amount entered, but the amount produced. For example, say someone donated $6.23 (unlikely, yes, but it could happen),  that / 0.05 is 124.6. What I would want produced is 125, the nearest whole number. Sorry if I didn't make myself clear.

RE: Dynamically changing text box, based on a form input? by Spunky on 02-07-2010 at 11:44 PM

Use a javascript event...

Javascript code:
//define this function somewhere
function roundNumber(num, dec) {
    var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
    return result;
}
 
// x = amount (6.23 for example)
this.value = roundNumber(x / 0.05, 2);
 


I think that should do it... You should know roughly what to do with the code

EDIT: An untested example...

Javascript code:
<form name="MyForm" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <fieldset>
    <label for="amount">$</label>
    <input id="amount" name="amount" value="5.00" onchange="var id=document.getElementById('result');id.value='Result: $'+Math.round(((this.value*1)/0.05)*Math.pow(10,2))/Math.pow(10,2)"/>    <label for="custom">Steam ID:</label>
    <input id="custom" name="custom" value="<?php echo strstr(curPageURL(), 'STEAM_');?>" />
    <input name="business" type="hidden" value="******************" />
    <input name="cmd" type="hidden" value="_xclick" />
    <input name="currency_code" type="hidden" value="USD" />
    <input name="item_name" type="hidden" value="vip" />
    <input name="no_note" type="hidden" value="1" />
    <input name="no_shipping" type="hidden" value="1" />
    <input src="http://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" type="image" alt="Click here to donate">
   
  </fieldset>
</form>
 
<div id="result"></div>


RE: Dynamically changing text box, based on a form input? by Jimbo on 02-08-2010 at 12:15 AM

Thanks a lot for the help Spunky, I really appreciate it. However, I tried messing with your code in a number of ways, and still cannot get it to display anything in the "result" element.


RE: Dynamically changing text box, based on a form input? by Spunky on 02-08-2010 at 12:22 AM

Edited silly mistake, but I still need to do more testing


RE: Dynamically changing text box, based on a form input? by stoshrocket on 02-08-2010 at 12:36 AM

quote:
Originally posted by Jimbo
Thanks, but wont that $_POST variable only be retrieved after the form is submitted? or am I being stupid?

I'm trying to make it change instantly, as a new value is entered into the amount box, or if that isn't possible, a button or something to update the total.

And also, I am not trying to round the amount entered, but the amount produced. For example, say someone donated $6.23 (unlikely, yes, but it could happen),  that / 0.05 is 124.6. What I would want produced is 125, the nearest whole number. Sorry if I didn't make myself clear.
Sorry, didn't realised you wanted it to calculate on the fly (should've guessed from the title...). As a note, the ceil(..) will produce a rounded value after the calculation.

As for the javascript, shouldn't "result" be either an input as your are trying to change it's "value", or change value to "innerText" so the text is placed within the div?
RE: Dynamically changing text box, based on a form input? by Jimbo on 02-08-2010 at 12:37 AM

Thanks again, but I still can't get it to work, its probably just me though. I don't have to define that function anymore right, since I can't see you using that in the form?


RE: Dynamically changing text box, based on a form input? by Spunky on 02-08-2010 at 12:40 AM

This is tested... For some reason I can't update a div text so I've just used the tooltip for now.... No, you no longer need to define the function as I've put it all in line for you (but doesn't filter out NaN errors etc.

Javascript code:
<form name="MyForm" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <fieldset>
    <label for="amount">$</label>
    <input id="amount" name="amount" value="5.00" onkeyup="this.title='$'+Math.round((this.value*1)/0.05)"/>
    <label for="custom">Steam ID:</label>
    <input id="custom" name="custom" value="" />
    <input name="business" type="hidden" value="******************" />
    <input name="cmd" type="hidden" value="_xclick" />
    <input name="currency_code" type="hidden" value="USD" />
    <input name="item_name" type="hidden" value="vip" />
    <input name="no_note" type="hidden" value="1" />
    <input name="no_shipping" type="hidden" value="1" />
    <input src="http://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" type="image" alt="Click here to donate">
  </fieldset>
</form>
 


EDIT: Keep it in the onkeyup event else backspaces won't work and the script won't update after the user deletes a character. You may also need to add a 0 to the end of the tooltip in the event the number rounds to 1 (or even 0) decimal places as zeros get omitted

EDIT2: Big misunderstanding about the rounding. Fixed.
RE: Dynamically changing text box, based on a form input? by Jimbo on 02-08-2010 at 01:08 AM

Thanks so much Spunky :)