Replace Text Box With Drop Down Menu Please

Posted on 2005-04-27
Medium Priority
Last Modified: 2010-04-09
~ I am requesting this in Javascript aswell for my intranet purpose but is this possible with HTML only and can somone please please help me out soon ~

The RMA calculator calculates credit within a customers account when taking into consideration the amount paid and the cancellation date. All the code for this calculator is shown below. I have made some
changes to the code but was originally given it on here. More changes need to be made and I would like some help.

The first entry field is for the package price. I would like someone to replace this with a drop down menu with pre set package totals. Packages I would like includes are shown here...

0. New Customer - No Existing Package                                    £0
1. Monthly Service 1                                                               £12.99
2.              Service 2                                                             £9.99
3.              Service 3     (Post 1st June)                                   £9.99                                
4.              Service 1 + 2                                                       £15.99
5.              Service 1 + 3           (Post 1st June)                       £15.99
6. Annualy  Service 1                                                             £155.88
7.              Service 2                                                             £119.88
8.              Service 3       (Post 1st June)                                 £119.88
9.              Service 1 + 2                                                       £191.88
10.            Service 1 + 3             (Post 1st June)                     £191.88
11. Special Service 1 + 3            (Monthly) Pre 1st June            £DISCOUNT
12.            Service 1 + 3             (Annualy) Pre 1st June          £DISCOUNT
13.            Service 3 (Monthly) Pre 1st June                             £DISCOUNT
14.            Service 3(Annualy) Pre 1st June                              £DISCOUNT

I have shown them in the format that I would like them to appear if possible but theres no problem with me changing this later so just put the numbers in and leave them blank. The amounts linked to each selection can be left blank aswell as I can complete this myself.
Please take into account the fact that these packages change often so I will have to add more selections later. I hope this makes sense.

Basically I want a drop down menu instead of a text box. Selections of prices instead of typing it in. Thanks to anyone who wants to give it a go.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0070)file://G:\Operations\Agents\Intranet\RMA%20Calculator\rmaframeleft.htm -->
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
      MARGIN: 0px 0px 0px 5px; COLOR: #ffffff; BACKGROUND-COLOR: #234594
.1 {
      FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #ffffff; FONT-FAMILY: helvetica

<META content="MSHTML 5.50.4916.2300" name=GENERATOR></HEAD>
<BODY onload=init()>
<P><IMG height=77 src="rmaframeleft_files/globe_logo.gif" width=77
name=globe_logo></P><!-- #BeginEditable "doctitle" --><!-- #EndEditable -->
      TEXT-ALIGN: right
      WIDTH: 100px; TEXT-ALIGN: right


function reCalc(theField){

  var theForm = theField.form;


    var fldVal = theField.value.replace(/[^\d\.]/g,"");

    if(fldVal!=theField.value) theField.value = fldVal;


      chgDay = fldVal/365;

      theForm.ChargeMonth.value = (fldVal/12).toFixed(2);

      theForm.ChargeDay.value = (fldVal/365).toFixed(2);



      chgDay = fldVal/30;

      theForm.ChargeYear.value = (fldVal*12).toFixed(2);

      theForm.ChargeDay.value = (fldVal/30).toFixed(2);



      chgDay = fldVal*1;


  } else {

    theForm.ChargeYear.value = (theForm.ChargeYear.value*1).toFixed(2);

    theForm.ChargeMonth.value = (theForm.ChargeMonth.value*1).toFixed(2);    

    theForm.ChargeDay.value = (theForm.ChargeDay.value*1).toFixed(2);    


  var accDays = 0;

  theForm.AccDays.value = "0";

  theForm.AccCharge.value = "0.00";

  theForm.AccRefund.value = theForm.ChargeYear.value;


    var fldVal = theField.value.replace(/[^\d\/]/g,"");

    if(fldVal!=theField.value) theField.value = fldVal;

    var sDate = getDate(theForm.AccDateStart.value);

    var eDate = getDate(theForm.AccDateEnd.value);

    if(sDate && eDate){

      accDays = parseInt((eDate-sDate)/86400000) + 1;


        theForm.AccDays.value = accDays;




  var chgDay = theForm.ChargeYear.value/365;

  var accDays = theForm.AccDays.value*1;

  if(chgDay>0 && accDays>0){

    var accCharge = chgDay*accDays;

    theForm.AccCharge.value = accCharge.toFixed(2);

    theForm.AccRefund.value = (theForm.ChargeYear.value-accCharge).toFixed(2);




function getDate(dateValue){

  var dPart = dateValue.split("/");

  if(dPart.length==3 && dPart[2].length==2){

    return new Date("20"+dPart[2], dPart[1]-1, dPart[0])


  return false;


function init(){

  elem = document.forms[0].elements;

  for(var i=0;i<elem.length;i++){


      elem[i].onkeyup = function(){reCalc(this)};





<SCRIPT language=JavaScript>

      function reset()  {
            parent.frames[A].location = "main.html";

    <TH colSpan=2>RMA Calculator</TH>
    <TH>Annual Charge:</TH>
    <TD><INPUT name=ChargeYear> </TD></TR>
    <TH>Monthly Charge:</TH>
    <TD><INPUT name=ChargeMonth> </TD></TR>
    <TH>Daily Charge:</TH>
    <TD><INPUT name=ChargeDay> </TD></TR>
    <TH>Start Date:</TH>
    <TD><INPUT name=AccDateStart> </TD></TR>
    <TH>End Date:</TH>
    <TD><INPUT name=AccDateEnd> </TD></TR>
    <TH>Days Viewed:</TH>
    <TD><INPUT name=AccDays> </TD></TR>
    <TH>Charge For Days Viewed:</TH>
    <TD><INPUT name=AccCharge> </TD></TR>
    <TH>Refund/Credit Amount:</TH>
    <TD><INPUT name=AccRefund> </TD></TR></TBODY></TABLE>
<SCRIPT language=JavaScript>
document.write('<form><input type=button value="Refresh" onClick="reset();"></form>')
Question by:Ryan Bayne
  • 2

Accepted Solution

ftaco96 earned 2000 total points
ID: 13880994
Simply replace this...
<INPUT name=ChargeYear>

with this...
<SELECT name=ChargeYear>
            <option value="0">0. New Customer - No Existing Package                                    £0
            <option value="12.99">1. Monthly Service 1                                                               £12.99
            <option value="9.99">2.              Service 2                                                             £9.99
            <option value="9.99">3.              Service 3     (Post 1st June)                                   £9.99                                
            <option value="15.99">4.              Service 1 + 2                                                       £15.99
            <option value="15.99">5.              Service 1 + 3           (Post 1st June)                       £15.99
            <option value="155.88">6. Annualy  Service 1                                                             £155.88

Expert Comment

ID: 13881124
Oh and you should probably also take out any line that changes the value of ChargeYear.

Change this...
<SELECT name=ChargeYear>

to this...
<SELECT name=ChargeYear onchange="reCalc(this);">

OR change your init function like so...

function init(){

  elem = document.forms[0].elements;

  for(var i=0;i<elem.length;i++){

    if (elem[i].name == "ChargeYear") {
        elem[i].onchange = function(){reCalc(this)};


      elem[i].onkeyup = function(){reCalc(this)};




Author Comment

by:Ryan Bayne
ID: 13881619
Cool. I tried something like that but I think I was still using Input instead of your Select...I think. Anyway thanks very much.


Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
There's never been a better time to become a computer scientist. Employment growth in the field is expected to reach 22% overall by 2020, and if you want to get in on the action, it’s a good idea to think about at least minoring in computer science …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question