Replace Text Box With Drop Down Menu Please

Posted on 2005-04-27
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
    LVL 9

    Accepted Solution

    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
    LVL 9

    Expert Comment

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



    LVL 2

    Author Comment

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


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Suggested Solutions

    Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
    Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…

    779 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now