我的计算代码有什么问题？

时间：2016-01-10 11:19:58

标签： javascript php 

<body onload='hideTotal()'>
    <div id="wrap">
        <form action="" id="cakeform" onsubmit="return false;">
        <div>
            <div class="cont_order">
               <fieldset>
                <legend>Make your cake!</legend>
                <label >Size Of the Cake</label>
                <label class='radiolabel'><input type="radio"  name="selectedcake" value="Round6" onclick="calculateTotal()" />Round cake 6" -  serves 8 people ($20)</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedcake" value="Round8" onclick="calculateTotal()" />Round cake 8" - serves 12 people ($25)</label><br/>
                <label class='radiolabel'><input type="radio"  name="selectedcake" value="Round10" onclick="calculateTotal()" />Round cake 10" - serves 16 people($35)</label><br/>

                <br/>
                <label >Quantity</label>

                <select id="filling" name='filling' onchange="calculateTotal()">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
               </select>
                <br/>

                <div id="totalPrice"></div>

                </fieldset>
            </div>

            <div class="cont_details">
                <fieldset>
                <legend>Contact Details</legend>
                <label for='name'>Name</label>
                <input type="text" id="name" name='name' />
                <br/>
                <label for='address'>Address</label>
                <input type="text" id="address" name='address' />
                <br/>
                <label for='phonenumber'>Phone Number</label>
                <input type="text"  id="phonenumber" name='phonenumber'/>
                <br/>
                </fieldset>
            </div>
            <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
        </div>  
       </form>
    </div>

这是Javascript 

 var cake_prices = new Array();
 cake_prices["Round6"]=20;
 cake_prices["Round8"]=25;
 cake_prices["Round10"]=35;


 var filling_prices= new Array();
 filling_prices["1"]=1;
 filling_prices["2"]=2;
 filling_prices["3"]=3;
 filling_prices["4"]=4;
 filling_prices["5"]=5;
 filling_prices["6"]=6;
 filling_prices["7"]=7;
 filling_prices["8"]=8;
 filling_prices["9"]=9;
 filling_prices["10"]=10;


function getCakeSizePrice()
{  
    var cakeSizePrice=0;

    var theForm = document.forms["cakeform"];

    var selectedCake = theForm.elements["selectedcake"];

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

        if(selectedCake[i].checked)
        {

            cakeSizePrice = cake_prices[selectedCake[i].value];

            break;
        }
    }
    //We return the cakeSizePrice
    return cakeSizePrice;
}

function calculateTotal()
{

    var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice() + insciptionPrice();

    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Total Price For the Cake $"+cakePrice;

}

function hideTotal()
{
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='none';
}

我正在尝试计算总价值。坦率地说，我只是从多个来源汇编这个代码。仍然没有收到总价值。由于编码知识较少，我无法理解错误？

2 个答案:

答案 0 :(得分：0)

您似乎没有定义以下功能：getFillingPrice() + candlesPrice() + insciptionPrice()

如果您不需要，可以更改：

var cakePrice = getCakeSizePrice() + getFillingPrice() + candlesPrice() + insciptionPrice();

进入这个：

var cakePrice = getCakeSizePrice() * document.getElementById('filling').value;

它将开始工作。

我还建议为数量选择不同的ID名称，以便下次查看代码时更有意义。改变这个：

<select id="filling" name='filling' onchange="calculateTotal()">

这样的事情：

<select id="qty" name='qty' onchange="calculateTotal()">

并修改javascript代码：

var cakePrice = getCakeSizePrice() * document.getElementById('qty').value;

的更新

问：＆＃34;如何在提交后将此表单数据发送到我的邮件ID？＆＃34;

实际上，有多种方法可以做到这一点，但它们都需要服务器端脚本页来发送邮件。例如，在PHP服务器上，您可以使用PHPMailer或类似的类来完成这项工作。但是，在任何情况下，您都需要收集数据并将其发送到该脚本页面。

还有几种方法可以收集数据并将数据发送到发送邮件的脚本页面。一些常用的方法如下：

  1. 您可以使用 javascript验证表单，然后执行重定向到服务器端脚本页面，将数据作为GET变量传递秒。 （此列表中最不喜欢，根本不推荐）
  2. 您可以使用 javascript验证表单，如果有效通过HTML触发表单提交，可以将数据发布到服务器端脚本页面用于邮寄。 （再次不推荐，最好不要在验证时信任javascript）
  3. 您可以通过简单的HTML POST （或GET，但不推荐）将表单发送到另一个页面，其中数据将被验证并邮寄/重定向以供服务器进行错误处理 - 侧脚本。 （下面介绍HTML设置，服务器端是完全不同的故事）
  4. 您可以使用 javascript收集数据并将其与AJAX请求一起发送到服务器端脚本，该脚本验证数据，如果有效则发送电子邮件或返回错误不是 （不错的，但有点棘手，但很酷）

    5. 方法＃4可能有点先进，所以让我解释方法＃3：

    <强> HTML： 

    <body onload='hideTotal()'>
  <div id="wrap">
    <form id="cakeform" 
          method="post" 
          action="<!-- Link to server-side script page here -->">
      <div>
        <div class="cont_order">
          <fieldset>
            <legend>Make your cake!</legend>
            <span>Size Of the Cake</span>
            <br/>
            <input type="radio" 
                   id="r6" 
                   name="selectedcake" 
                   value="Round6" 
                   onclick="calculateTotal()" />
            <label for="r6" 
                   class='radiolabel'>Round cake 6" -  serves 8 people ($20)</label>
            <br/>
            <input type="radio" 
                   id="r8" 
                   name="selectedcake" 
                   value="Round8" 
                   onclick="calculateTotal()" />
            <label for="r8" 
                   class='radiolabel'>Round cake 8" - serves 12 people ($25)</label>
            <br/>
            <input type="radio" 
                   name="selectedcake" 
                   id="r10" 
                   value="Round10" 
                   onclick="calculateTotal()" />
            <label for="r10" 
                   class='radiolabel'>Round cake 10" - serves 16 people($35)</label>
            <br/>
            <br/>
            <label for="qty">Quantity</label>
            <select id="qty" name='qty' onchange="calculateTotal()">
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>
            <br/>
            <div id="totalPrice"></div>
            <input type="hidden" name="total" id="total" />
          </fieldset>
        </div>
        <div class="cont_details">
          <fieldset>
            <legend>Contact Details</legend>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" />
            <br/>
            <label for="address">Address</label>
            <input type="text" id="address" name="address" />
            <br/>
            <label for="phonenumber">Phone Number</label>
            <input type="text" id="phonenumber" name="phonenumber" />
            <br/>
            </fieldset>
        </div>
        <input type='submit' id='submit' value='Submit' />
      </div>
    </form>
  </div>
</body>

    要更改的Javascript函数： 

    function calculateTotal() {
  var cakePrice = getCakeSizePrice() * document.getElementById('qty').value;
  var divobj = document.getElementById('totalPrice'),
      hiddenInput = document.getElementById('total');
  divobj.style.display='block';
  divobj.innerHTML = "Total Price For the Cake $"+cakePrice;
  hiddenInput.value = cakePrice;
}

    简而言之，我们将POST指定为<form>元素的方法，放置了<input>元素并带有type="hidden"属性，从提交中移除了无用的函数{{ 1}}，并修改了<button>函数，以便将总价格存储在隐藏的输入元素中。

    以下是CodePen链接，您可以在其中查看整个代码：http://codepen.io/anon/pen/Vebomx

答案 1 :(得分：-1)

您的脚本中缺少功能，以将蛋糕价格与选定数量，蜡烛价格和铭文价格相乘。我假设蜡烛和铭文价格各为5，并且数量也相乘。您可以更改它或创建一个数组就像填充（数量）。 

                        var cake_prices = new Array();
                    cake_prices["Round6"]=20;
                    cake_prices["Round8"]=25;
                    cake_prices["Round10"]=35;


                    var filling_prices= new Array();
                    filling_prices["1"]=1;
                    filling_prices["2"]=2;
                    filling_prices["3"]=3;
                    filling_prices["4"]=4;
                    filling_prices["5"]=5;
                    filling_prices["6"]=6;
                    filling_prices["7"]=7;
                    filling_prices["8"]=8;
                    filling_prices["9"]=9;
                    filling_prices["10"]=10;

                    // candles price
                    var candles_price = 5;

                    //inscription price 
                    var inscription_price = 5;

                   function getCakeSizePrice()
                   {  
                       var cakeSizePrice=0;

                       var theForm = document.forms["cakeform"];

                       var selectedCake = theForm.elements["selectedcake"];

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

                           if(selectedCake[i].checked)
                           {

                               cakeSizePrice = cake_prices[selectedCake[i].value];

                               break;
                           }
                       }
                       //We return the cakeSizePrice
                       return cakeSizePrice;
                   }

                   function calculateTotal()
                   {

                       var theForm = document.forms["cakeform"];
                       var cakePrice = getCakeSizePrice();

                       cakePrice = cakePrice * filling_prices[theForm.elements['filling'].value];

                       //need to add candles and inscription price
                       var candlesPrice = candles_price * theForm.elements['filling'].value;
                       var inscriptionPrice = inscription_price * theForm.elements['filling'].value;

                       cakePrice += candlesPrice + inscriptionPrice;

                       var divobj = document.getElementById('totalPrice');
                       divobj.style.display='block';
                       divobj.innerHTML = "Total Price For the Cake $"+cakePrice;

                   }

                   function hideTotal()
                   {
                       var divobj = document.getElementById('totalPrice');
                       divobj.style.display='none';
                   }
相关问题
最新问题