Question

无论如何，我可以将选择的课程数乘以课程类型，然后在表格附近显示为总数？填写表单的人可以更容易地进行自动计算，而不必自己计算。

  <h4>Lesson Form</h4>
          <form action="mailer.php" data-validate="parsley" method="post" >
          <p><strong>Full Name<span class="red">*</span></strong></p>
          <input name="cf_name" data-required="true"  class="send" type="text" />
          <p><strong>Email Address<span class="red">*</span></strong></p>
          <input name="cf_email" data-required="true" data-type="email" class="send" type="text" />
          <p><strong>Cellphone No.<span class="red">*</span></strong></p>
          <input name="cf_cell" data-required="true" class="send" type="text" />

          <p><strong>Instrument Type<span class="red">*</span></strong></p>
          <select name="cf_instrument" size="1" class="option" >
          <option value="Piano">Piano</option>
          <option value="Vocals">Vocals</option>
          <option value="Guitar">Guitar</option>
          <option value="Bass">Bass</option>
          <option value="Flute">Flute</option></select>

          <p><strong>Lesson Type<span class="red">*</span></strong></p>
          <select name="cf_package_type" size="1" class="option">
          <option value="Beginner Lesson - R100">Beginner Lesson - R100</option>
          <option value="Advanced Lesson - R130">Advanced Lesson - R130</option>
          <option value="Professional Lesson - R160">Professional Lesson - R160</option></select>

          <p><strong>No. of Lessons<span class="red">*</span></strong></p>
          <select id="number-of-lessons" name="cf_number" size="1" class="option" onchange='test()'>
          <option value="1" selected="selected">1</option>
          <option name="2" value="2">2</option>
          <option name="3" value="3">3</option>
          <option name="4" value="4">4</option></select>

          <script src="js/datepair.js"></script>
             <p><strong>Lesson Date & Time<span class="red">*</span></strong></p>
                <p class="datepair" data-language="javascript">
          <input type="text" name="cf_booking_date" class="date start" data-required="true" />
          <input type="text" name="cf_start_time" class="time start" data-required="true" /> to
          <input type="text" name="cf_end_time" class="time end" data-required="true" /></p>

          <script src="js/datepair.js"></script>
                <p id="lesson-2" class="datepair" data-language="javascript">
          <input type="text" name="cf_booking_date" class="date start" data-required="true"  />
          <input type="text" name="cf_start_time" class="time start" data-required="true"  /> to
          <input type="text" name="cf_end_time" class="time end" data-required="true"  /></p>

          <script src="js/datepair.js"></script>
                <p id="lesson-3" class="datepair" data-language="javascript">
          <input type="text" name="cf_booking_date" class="date start" data-required="true"  />
          <input type="text" name="cf_start_time" class="time start" data-required="true"  /> to
          <input type="text" name="cf_end_time" class="time end" data-required="true"  /></p>

          <script src="js/datepair.js"></script>
                <p id="lesson-4" class="datepair" data-language="javascript">
          <input type="text" name="cf_booking_date" class="date start" data-required="true"  />
          <input type="text" name="cf_start_time" class="time start" data-required="true"  /> to
          <input type="text" name="cf_end_time" class="time end" data-required="true"  /></p> 

           <!-- HIDDEN FIELD - HONEYPOT ANTI_SPAM -->
          <input id="website" class="using" name="website" type="text"  />
          <!-- END -->
          <input name="Submit" class="submit" value="Book Now" type="submit" /></form>

如果你可以帮助我，你会这么好吗？

Answer 1

Here's使用Javascript的解决方案。

说明：每次选项改变时，我都会重新计算所选值的乘法。

HTML （您所拥有的简化版本。请注意我是如何更改选项的值。）

<select id="lesson-type" onchange='calculate()'>
    <option value="100">Beginner Lesson - R100</option>
    <option value="130">Advanced Lesson - R130</option>
    <option value="160">Professional Lesson - R160</option>
</select>

<select id="number-of-lessons" onchange='calculate()'>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<label id="result"></label>

<强> JS：

function calculate() {
    var l_type = document.getElementById("lesson-type").value;
    var num_lessons = document.getElementById("number-of-lessons").value;
    document.getElementById("result").innerHTML = l_type * num_lessons;
}

修改在这个Example中，我也会在页面加载后调用该函数。

Answer 2

如果您想使用Javascript创建简单的网络计算器，我建议您查看“Appizy”。

它可以立即将电子表格转换为HTML + CSS + JAVASCRIPT中的独立网络计算工具。您不需要对整个界面和计算公式进行硬编码！

只需使用Open-或LibreOffice创建工作计算器，然后使用Appizy。

我希望它可以提供帮助。最好，尼古拉斯

表格计算器和显示

2 个答案: