Question

我有一个表单来计算结帐的订单值。

我想在表单上显示总计（totalAmt）和订单代码（combinedentries）。

我想要一个很好的总数而不是一个普通的旧文本框。

我希望订单表格底部的两个文本框的内容格式化为文本而不是输入框中的条目。

我希望将总数格式化为与标题横幅相同的绿色背景颜色，并以黑色书写。

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" language="javascript">
function calcTotal(form)
{
    var totalElem = null;
    var prodAmt = 0;
    var packAmt = 0;
    var printAmt = 0;
    var designAmt = 0;
    var totalAmt = 0;
    var combinedentries = null;
    var descrip = null;
    var desc = null;
    var itemname = null;
    var rewardscalc = 0;
    var rewards = 0;


    try
    {
        prodAmt=parseFloat(form["prodamount"].value,2);
        packAmt=parseFloat(form["packamount"].value,2);

        printAmt=parseFloat(form["printOpt"].value,2);
        designAmt=parseFloat(form["graphicOpt"].value,2);

        totalAmt = parseFloat(prodAmt+packAmt+printAmt+designAmt,2);
        rewardscalc = (totalAmt/5);
        rewards = rewardscalc >> 0;
        totalElem=document.getElementById("amount");
        totalElem.value = totalAmt.toString();

    combinedentries = prodAmt.toString() + ":" +  packAmt.toString() + ":" + printAmt.toString() +":" + designAmt.toString() +"/" +rewards;

    descrip=document.getElementById("description");
        descrip.value = "A7F/" + combinedentries

    desc=document.getElementById("desc");
        desc.value = "A7F/" + combinedentries

    itemname=document.getElementById("item_name");
        itemname.value = "A7F/" + combinedentries

    document.getElementById("myText").innerHTML = item_name;

    }
    catch(e)
    {
        alert("calcTotal Error:  " + e.Message);
    }
    finally
    {

    }

}
</script> 

</head>
<body>
<form id="orderform" name = "orderform" onchange="calcTotal(this)">


<font color="#f4f2e6">

<h1 style="color: #f4f2e6; background-color: #2ec447; font-size: 1.5em; margin-left: 0em;padding: 0.4em; width 500px;">  " A7 Leaflets (A7L)"</h1>
<br/>

<h1 style="color: #f4f2e6; background-color: #2ec447; font-size: 1.25em; margin 0.4em; width 500px; padding 0.4em;">   Order Quantity Required</h1>

<input type="radio" name="prodamount" value="36.00" checked> 5,000<br/>
<input type="radio" name="prodamount" value="45.00"> 10,000<br/>
<input type="radio" name="prodamount" value="68.00"> 15,000<br/>
<input type="radio" name="prodamount" value="73.00"> 20,000<br/>
<input type="radio" name="prodamount" value="89.00"> 25,000<br/>
<input type="radio" name="prodamount" value="112.00"> 30,000<br/>
<input type="radio" name="prodamount" value="117.00"> 35,000<br/>
<input type="radio" name="prodamount" value="133.00"> 40,000<br/>
<input type="radio" name="prodamount" value="150.00"> 45,000<br/>
<input type="radio" name="prodamount" value="165.00"> 50,000<br/>

<h1 style="color: #f4f2e6; background-color: #2ec447; font-size: 1.25em; margin 50px; width 500px; padding 0.4em;">   Product Material & Finish</h1>

<input type="radio" name="packamount" value="1.00" checked> 130gm Art Paper Silk Finish <br/>
<input type="radio" name="packamount" value="2.00"> 130gm Art Paper Gloss Finish <br/>
<input type="radio" name="packamount" value="15.00"> 170gm Art Paper Silk Finish <br/>
<input type="radio" name="packamount" value="16.00"> 170gm Art Paper Gloss Finish<br/>

<h1 style="color: #f4f2e6; background-color: #2ec447; font-size: 1.25em; margin 50px; width 500px; padding 0.4em;">   Number Of Sides Printed</h1>

<!-- 3rd option printopt -->
<input type="radio" name="printOpt" value="0.00" checked > Single Sided Print (Included)<br/>
<input type="radio" name="printOpt" value="5.00" > Double Sided Print <br/>

<h1 style="color: #f4f2e6; background-color: #2ec447; font-size: 1.25em; margin 50px; width 500px; padding 0.4em;">   Artwork Options</h1>

<!-- 4th option graphic opt -->
<input type="radio" name="graphicOpt" value="0.00" checked > Supply Own Checked Artwork (Included)<br/>
<input type="radio" name="graphicOpt" value="5.00" > Artwork Checking Service <br/>
<input type="radio" name="graphicOpt" value="10.00" > Single Side Artwork Design Service <br/>
<input type="radio" name="graphicOpt" value="15.00" > Double Side Artwork Design Service <br/>

<font color="#2ec447">
<br/>
<br/>
<!-- box here displaying the total preferable without having to click a recalculate button -->
<br/>

<input type="type" id="amount" name="amount" value="0"/>
<div id="totalAmt"></div>

<input type="hidden" id="description" name="description" value="0"/>
<div id="totalAmt"></div>

<input type="hidden"  id="desc" name="desc" value="0"/>
<div id="totalAmt"></div>

<input type="item_name" onFocus="blur()" id="item_name" name="item_name" label = "£ "value="0"/>
<div id="totalAmt"></div>

<input type="hidden" name="merchant_id" value="info@creaitve.co.uk"> <!-- nochex required -->
<input type="hidden" name="business" value="info@creaitve.co.uk">  <!-- paypal required -->
<input type="hidden" name="currency_code" value="GBP"> <!-- paypal required -->
<input type="hidden" name="cmd" value="_xclick"> <!-- paypal required -->
<input name="instId" type="hidden" value="1243833" /> <!-- worldpay required -->
<input type="hidden" name="currency" value="GBP"> <!-- worldpay required -->
<input type="hidden" name="cartId" value="CreaITve"> <!-- worldpay cart name -->
<input type="hidden" name="description" value="CreaITve"> <!-- nochex cart name -->
<input type="hidden" name="item_name" value="CreaITve"> <!-- paypal cart name  -->
<input type="hidden" name="desc" value="Print Service A7 Flyers" & printOpt> <!-- worldpay product name -->
<input type="hidden" name="description" value="Print Service A7 Flyers" & printOpt> <!-- nochex product name -->
<input type="hidden" name="item_name" value="Print Service A7 Flyers" & printOpt> <!-- paypal product name  -->
<div style="text-align:center"> 

<h1>"the value for number is: " <span id="myText"></span></h1>

<input type='submit' name='worldpay' value='WorldPay' formAction="https://secure.worldpay.com/wcc/purchase" method="POST"><autocomplete="off" onsubmit="return verifyfields()">
<input type='submit' name='nochex' value='NoChex' formAction="https://secure.nochex.com/"><autocomplete="off" onsubmit="return verifyfields()">
<input type='submit' name='paypal' value='Paypal' formAction="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
</div> 

</form>
<script type="text/javascript" language="javascript">
    // Calculate the initial total
    calcTotal(document.getElementById("orderform"));
</script>
</body>
</html>

显示JavaScript变量值但不在文本框中

0 个答案: