CODEWITHSUNDEEP
javascriptjquery
user2382274
user2382274

Reputation: 23

Form multiplication

I need these two fields to be multiplied together based on selected form options.

Okay so it works without all the extra fields but once i added the rest of the form the calculation stopped working. :(

          <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">

Corrected JS used:

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

</script>

I know i'm probably very off-track but if someone could please help me with this it would be a life-saver!

Here's the JS fiddle to help you - http://jsfiddle.net/GuBPL/10/

Thank you.

Upvotes: 1

Views: 133

Answers (2)

hsz
hsz

Reputation: 152206

Try with following code:

<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">

And 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);
    });
});

What's changed ?

First select got id="cf_package_type" attribute, which is used to get its value with:

$("#cf_package_type").val()

Removed onchange='test()' because we do it with jQuery:

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

Get value of second select with:

$(this).val()

because we work on it already.

parseInt used just to be sure, we use integers, not strings.

Edit:

To calculate result on page load, use:

$(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();
});

Upvotes: 3

pawel
pawel

Reputation: 36965

  1. You use $('.select') while the elements have class name option,
  2. You should use change event instead of keyup
  3. you use $('.cf_package_type') while it's a name, not class attribute

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);
    });
});

Upvotes: 0

Related Questions