形式乘法

Question

我需要根据选定的表单选项将这两个字段相乘。

好的，所以它没有所有额外的字段，但一旦我添加了表格的其余部分，计算停止工作。 ：（

          <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" id="cf_package_type" size="1" class="option">
          <option value="100">Beginner Lesson - R100</option>
          <option value="130">Advanced Lesson - R130</option>
          <option value="160">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 name="1" 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>  

          <input type="text" value="100" disabled="disabled" id="result">  

使用了更正的JS：

<script type="text/javascript">
  $("select").change(function(){
      var val1 = + ($("#cf_package_type").val());
      var val2 = + ($("#number-of-lessons").val());
      $("#result").val(val1*val2);
});

</script>

我知道我可能非常偏离轨道，但如果有人可以帮助我，那将是一个救命！[/ p>

这是JS帮助你的小提琴 - http://jsfiddle.net/GuBPL/10/

谢谢。

Answer 1

尝试使用以下代码：

<p><strong>Lesson Type<span class="red">*</span></strong></p>
<select id="cf_package_type" name="cf_package_type" size="1" class="option">
    <option value="100">Beginner Lesson - R100</option>
    <option value="130">Advanced Lesson - R130</option>
    <option value="160">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">
    <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>

<input type="text" disabled="disabled" id="result"> 

和JS：

$(document).ready(function(){
    $("#number-of-lessons").change(function(){
          var val1 = parseInt($("#cf_package_type").val());
          var val2 = parseInt($(this).val());
          $("#result").val(val1*val2);
    });
});

有什么变化？

首先选择获得id="cf_package_type"属性，该属性用于获取其值：

$("#cf_package_type").val()

已移除onchange='test()'，因为我们使用jQuery：

$("#number-of-lessons").change()

获取第二个选择的值：

$(this).val()

因为我们已经开始研究它了。

parseInt用来确定，我们使用整数，而不是字符串。

修改

要计算页面加载的结果，请使用：

$(document).ready(function(){
    var calculate = function(){
          var val1 = parseInt($("#cf_package_type").val());
          var val2 = parseInt($('#number-of-lessons').val());
          $("#result").val(val1*val2);
    };
    $("#number-of-lessons").change(calculate);
    calculate();
});

Answer 2

1. 当元素具有类名$('.select')，
时，您使用option
2. 您应该使用change事件代替keyup
3. 您使用的是$('.cf_package_type') name，而不是class属性

http://jsfiddle.net/GuBPL/4/

$(document).ready(function(){
    $(".option").change(function(){
          var val1 = +$("[name=cf_package_type]").val();
          var val2 = +$("[name=cf_number]").val();
          $("#result").val(val1*val2);
    });
});