Replace Text Box With Drop Down Menu Please

~ 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.

Thanks
TycoonMillion


RMA CALCULATOR CODE BELOW
####################################################

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

<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 -->
<STYLE>TH {
      TEXT-ALIGN: right
}
INPUT {
      WIDTH: 100px; TEXT-ALIGN: right
}
</STYLE>

<SCRIPT>

function reCalc(theField){

  var theForm = theField.form;

  if(theField.name.indexOf("Charge")==0){

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

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

    if(theField.name=="ChargeYear"){

      chgDay = fldVal/365;

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

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

    }

    if(theField.name=="ChargeMonth"){

      chgDay = fldVal/30;

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

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

    }

    if(theField.name=="ChargeDay"){

      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;

  if(theField.name.indexOf("AccDate")==0){

    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;

      if(accDays>0){

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

    if(elem[i].type=="text"){

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

    }

  }

}

</SCRIPT>

<SCRIPT language=JavaScript>
<!--

      function reset()  {
            parent.frames[A].location = "main.html";
}
//-->
</SCRIPT>

<FORM>
<TABLE>
  <TBODY>
  <TR>
    <TH colSpan=2>RMA Calculator</TH>
  <TR>
  <TR>
    <TH>Annual Charge:</TH>
    <TD><INPUT name=ChargeYear> </TD></TR>
  <TR>
    <TH>Monthly Charge:</TH>
    <TD><INPUT name=ChargeMonth> </TD></TR>
  <TR>
    <TH>Daily Charge:</TH>
    <TD><INPUT name=ChargeDay> </TD></TR>
  <TR>
    <TH>Start Date:</TH>
    <TD><INPUT name=AccDateStart> </TD></TR>
  <TR>
    <TH>End Date:</TH>
    <TD><INPUT name=AccDateEnd> </TD></TR>
  <TR>
    <TH>Days Viewed:</TH>
    <TD><INPUT name=AccDays> </TD></TR>
  <TR>
    <TH>Charge For Days Viewed:</TH>
    <TD><INPUT name=AccCharge> </TD></TR>
  <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>')
</SCRIPT>
</FORM></BODY></HTML>
LVL 2
Ryan BayneWordPress DeveloperAsked:
Who is Participating?
 
ftaco96Commented:
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
                etc.
        </SELECT>
0
 
ftaco96Commented:
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)};
    }

    if(elem[i].type=="text"){

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

    }

  }

}
0
 
Ryan BayneWordPress DeveloperAuthor Commented:
Cool. I tried something like that but I think I was still using Input instead of your Select...I think. Anyway thanks very much.

TycoonMillion
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.