<form class="admission" name="form" method="POST" action="#" enctype="multipart/form-data" id="new_student">
<h2> Student Details </h2>
<p>Fields marked with <span class="necessary-field">*</span> must be filled.</p>
<label>Admission number
<span class="small">Add your name</span>
</label>
<input type="text" name="Admission_number" id="Admission_number"/><br/>
<label>Admission Date
<span class="small">Add your name</span>
</label>
<input type="text" name="Admission_Date" id="Admission_Date" /><br/>
<h2>Personal Details</h2><p></p>
<label>First Name</label>
<input type="text" name="first_name" id="first_name" /><br/>
<label>Middle Name</label>
<input type="text" name="middle_name" id="middle_name" /><br/>
<label>Last Name
<span class="small">Last name or Surname</span>
</label>
<input type="text" name="last_name" id="last_name" /><br/>
<label>Course </label>
<select id="student_batch_id" name="student_batch_id">
<option value="11">10 - 2010 A</option>
<option value="14">LKG</option>
</select><br/>
<label>Date of Birth</label>
<input type="text" name="dob" id="dob"/><br/>
<label>Gender</label>
<select id="gender" name="gender">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<label>Blood Group</label>
<select id="student_blood_group" name="student_blood_group"><option value="">Unknown</option>
<option value="A+">A+</option>
<option value="A-">A-</option>
<option value="B+">B+</option>
<option value="B-">B-</option>
<option value="O+">O+</option>
<option value="O-">O-</option>
<option value="AB+">AB+</option>
<option value="AB-">AB-</option></select>
<label>Identification Marks</label>
<input type="text" name="id_mark_1" id="id_mark_1" /><br/>
<label> </label>
<input type="text" name="id_mark_2" id="id_mark_2" /><br/>
<label>Place of Birth</label>
<input type="text" name="birth_palace" id="birth_palace" /><br/>
<label>Nationality</label>
<input type="text" name="nationalaity" id="nationalaity" /><br/>
<label>Mother Tongue</label>
<input type="text" name="mother_tongue" id="mother_tongue" /><br/>
<label>Religion</label>
<input type="text" name="religion" id="religion" /><br/>
<label>Cast</label>
<input type="text" name="cast" id="cast" /><br/>
<label>Creed</label>
<input type="text" name="creed" id="creed" /><br/>
<label>category</label>
<select id="student_category_id" name="category_id]">
<option value="">Select a Category</option>
<option value="1">GENERAL</option>
<option value="2">SC/ST</option>
<option value="3">OBC</option>
<option value="4">OEC</option>
<option value="5">NRI</option>
</select><br/>
<h2>Contact Details</h2><p></p>
<label>Address Line1</label>
<input type="text" name="address_line1" id="address_line1" /><br/>
<label>Address Line2</label>
<input type="text" name="address_line2" id="address_line2" /><br/>
<label>Locality</label>
<input type="text" name="locality" id="locality" /><br/>
<label>City</label>
<input type="text" name="city" id="city" /><br/>
<label>State</label>
<input type="text" name="state" id="state" /><br/>
<label>PIN</label>
<input type="text" name="pin_num" id="pin_num" /><br/>
<label>Telephone</label>
<input type="text" name="telephone" id="telephone" /><br/>
<label>Mobile</label>
<input type="text" name="mobile" id="mobile" /><br/>
<label>Upload User Photo</label>
<span class="small">Upload User Photo (60KB max)</span>
<input id="student_photo" name="student_photo" type="file" >
<input type="submit" value="NEXT">
<br/>
</form>
This form is to be validated. I include these below js files to the page.
<script src="../JavaScript/jquery.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.validate.js" type="text/javascript"></script>
And add the java script code:-
<script type="text/javascript">
$(document).ready(function(){
$("#new_student").validate({
rules: {
Admission_number: {
required: true,
minlength: 2
},
Admission_Date: "required"
},
messages: {
Admission_Date: "This is a comment form. Why in the heck would you leave the comment blank?",
Admission_number: {
required: "Stand up for your comments or go home.",
minlength: jQuery.format("You need to use at least {0} characters for your name.")
}
}
});
});
</script>
I am new to jquery but. I couldnt understand where the mistake is
here is the jsFiddle link http://jsfiddle.net/abelkbil/cVjez/
It's working for me...
http://jsfiddle.net/cVjez/10/
All I did was change the jQuery version to 1.7.2 and then added the jQuery.validation.js file from the Microsoft Ajax CDN
Maybe double check that the jquery and jquery validation js libraries are being loaded... the relative path might be wrong or something along those lines.
Related
Below is part of my code. Idea is you pick one option and it's input fields are marked as required, while options that are not picked are hidden.
I would like the displayed additional input field to be marked by the js script as "required", like input fields in --MAIN FORM--
I suppose it needs only one additional line of code added to script, but no idea how to do it. I am just a beginner. I believe it needs additional line like this one: $("."+formClass).slideDown('medium'); with pointing to all displayed inputs and .attr('required', true); but I've no idea how to do it. Any help will be appreciated :-)
Thanks and have a nice Sunday
Here's part of html code and js code:
$('#productType').on('change', function() {
var formClass = $(this).val();
$(".op").hide();
$("." + formClass).slideDown('medium');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--MAIN FORM-->
<form id="product_form" action="php/add.php" method="POST">
<label for="sku">SKU</label>
<input type="text" id="sku" name="sku" required><br>
<label for="name">Name</label>
<input type="text" id="name" name="name" required><br>
<label for="price">Price ($)</label>
<input type="number" id="price" name="price" required><br>
<label for="productType" id="switcher">Product type</label>
<select name="productType" id="productType" required>
<option value="" selected disabled>Product type</option>
<option id="dvd" value="dvd">DVD</option>
<option id="book" value="book">Book</option>
<option id="furniture" value="furniture">Furniture</option>
</select>
<!--ADDITIONAL FORM DEPENDING ON SELECT OPTION-->
<div class="additional-form dvd op" id="dvd-form">
<p>Please provide size in MB</p>
<label for="size">Size (MB)</label>
<input type="number" id="size" name="size">
</div>
<div class="additional-form book op" id="book-form">
<p>Please provide weight in KG</p>
<label for="weight">Weight (KG)</label>
<input type="number" id="weight" name="weight">
</div>
<div class="additional-form op furniture" id="furniture-form">
<p>Please provide dimensions in CM</p>
<label for="height">Height (CM)</label>
<input type="number" id="height" name="height"><br>
<label for="width">Width (CM)</label>
<input type="number" id="width" name="width"><br>
<label for="length">Length (CM)</label>
<input type="number" id="length" name="length">
</div>
</form>
Remove the required attribute from all the inputs inside the elements being hidden, and add it to the ones being shown with .slideDown().
$('#productType').on('change', function() {
var formClass = $(this).val();
$(".op").hide().find(':input').removeAttr('required');
$("." + formClass).slideDown('medium').find(':input').attr('required', true);;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--MAIN FORM-->
<form id="product_form" action="php/add.php" method="POST">
<label for="sku">SKU</label>
<input type="text" id="sku" name="sku" required><br>
<label for="name">Name</label>
<input type="text" id="name" name="name" required><br>
<label for="price">Price ($)</label>
<input type="number" id="price" name="price" required><br>
<label for="productType" id="switcher">Product type</label>
<select name="productType" id="productType" required>
<option value="" selected disabled>Product type</option>
<option id="dvd" value="dvd">DVD</option>
<option id="book" value="book">Book</option>
<option id="furniture" value="furniture">Furniture</option>
</select>
<!--ADDITIONAL FORM DEPENDING ON SELECT OPTION-->
<div class="additional-form dvd op" id="dvd-form">
<p>Please provide size in MB</p>
<label for="size">Size (MB)</label>
<input type="number" id="size" name="size">
</div>
<div class="additional-form book op" id="book-form">
<p>Please provide weight in KG</p>
<label for="weight">Weight (KG)</label>
<input type="number" id="weight" name="weight">
</div>
<div class="additional-form op furniture" id="furniture-form">
<p>Please provide dimensions in CM</p>
<label for="height">Height (CM)</label>
<input type="number" id="height" name="height"><br>
<label for="width">Width (CM)</label>
<input type="number" id="width" name="width"><br>
<label for="length">Length (CM)</label>
<input type="number" id="length" name="length">
</div>
</form>
I am trying to show a div, which has to be hidden by default, with JavaScript (or Jquery).
The condition to show div is based on the selected options of the two drop-down fields.
In the below code if gender is Female (from one drop-down select) and class is less than 3rd (from other drop-down select) then only the <div id="hidden_div"> should show other wise it should be hidden.
Any help in jquery or javascript would work, thanks!
I have tried the below code which is not working:
<form class="form" method="post" action="doitnow.php" id="form1">
<label class="col-md-4 control-label">Name of the Student:</label>
<p class="name">
<input name="Full_Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" required />
</p>
<label>Gender:</label>
<p class="email">
<select name="gender" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input" id="name" placeholder="Select your Gender" required>
<option value="">Select the Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</p>
<label>Mother's Name</label>
<p class="email">
<input name="Mother_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Mother's Name" required />
</p>
<p class="email">
<input name="source" type="text" value="enquiry_form" id="phone" hidden />
</p>
<label>Father's Name</label>
<p class="name">
<input name="Father_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Father's Name" required />
</p>
<label>Class for which admission sought for:</label>
<p class="email">
<select name="qualification" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input" id="name" required>
<option value="">Select the Class</option>
<option value="LKG">LKG</option>
<option value="UKG">UKG</option>
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
<option value="11th">11th</option>
<option value="12th">12th</option>
</select>
</p>
<script type="text/javascript">
function showDiv(select) {
if (select.value == 'Female' && (select.value == 'LKG' || select.value == 'UKG' || select.value == '1st' || select.value == '2nd' || select.value == '3rd')) {
document.getElementById('hidden_div').style.display = "block";
} else {
document.getElementById('hidden_div').style.display = "none";
}
}
</script>
<div id="hidden_div" style="display:none;">
<label>(ONLY FOR GIRL CHILD FOR CLASSES LKG TO III)<br>Select which section admission is required in:</label>
<p class="email">
<select name="category" type="text" class="validate[required,custom[email]] feedback-input" id="name">
<option value="" selected>Select the Section</option>
<option value="Girls_Section">Girls Section</option>
<option value="Boys_Section">Boys Section</option>
</select>
</p>
</div>
<label>Previous school attended:</label>
<p class="email">
<input name="prev_school" type="text" class="validate[required,custom[phone]] feedback-input" id="comment" placeholder="Last School Name" required />
</p>
<label>Mobile No. (Only 10 digits allowed, format: xxxxxxxxxx):</label>
<p class="phone">
<input name="Telephone_Number" type="text" pattern="^\d{3}\d{3}\d{4}$" class="validate[required,custom[phone]] feedback-input" id="Phone" placeholder="Mobile No" required />
</p>
<label>Email Address:</label>
<p class="email">
<input name="Email_Address" type="text" class="validate[required,custom[phone]] feedback-input" id="email" placeholder="Email Address" /> <!--pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$"-->
</p>
<?php
$password = mt_rand(1000, 9999) . "a";
echo '<input name="pass" type="text" value='.$password.' hidden />';
?>
<div class="submit">
<input type="submit" value="SUBMIT fORM" name="submit" id="button-blue" />
<div class="ease"></div>
</div>
</form>
You can try this code and put jQuery library in you localhost link it::
<form class="form" method="post" action="doitnow.php" id="form1">
<label class="col-md-4 control-label">Name of the Student:</label>
<p class="name">
<input name="Full_Name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" required/>
</p>
<label>Gender:</label>
<p class="email">
<select name="gender" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input changer" id="name" placeholder="Select your Gender" required>
<option value="">Select the Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</p>
<label>Mother's Name</label>
<p class="email">
<input name="Mother_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Mother's Name" required/>
</p>
<p class="email">
<input name="source" type="text" value="enquiry_form" id="phone" hidden />
</p>
<label>Father's Name</label>
<p class="name">
<input name="Father_Name" type="text" class="validate[required,custom[phone]] feedback-input" id="name" placeholder="Father's Name" required/>
</p>
<label>Class for which admission sought for:</label>
<p class="email">
<select name="qualification" type="text" onchange="showDiv(this)" class="validate[required,custom[email]] feedback-input changer" id="name" required>
<option value="" >Select the Class</option>
<option value="LKG">LKG</option>
<option value="UKG">UKG</option>
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
<option value="9th">9th</option>
<option value="10th">10th</option>
<option value="11th">11th</option>
<option value="12th">12th</option>
</select>
</p>
<div id="hidden_div" style="display:none;">
<label>(ONLY FOR GIRL CHILD FOR CLASSES LKG TO III)<br>Select which section admission is required in:</label>
<p class="email">
<select name="category" type="text" class="validate[required,custom[email]] feedback-input" id="name">
<option value="" selected>Select the Section</option>
<option value="Girls_Section">Girls Section</option>
<option value="Boys_Section">Boys Section</option>
</select>
</p>
</div>
<label>Previous school attended:</label>
<p class="email">
<input name="prev_school" type="text" class="validate[required,custom[phone]] feedback-input" id="comment" placeholder="Last School Name" required/>
</p>
<label>Mobile No. (Only 10 digits allowed, format: xxxxxxxxxx):</label>
<p class="phone">
<input name="Telephone_Number" type="text" pattern="^\d{3}\d{3}\d{4}$" class="validate[required,custom[phone]] feedback-input" id="Phone" placeholder="Mobile No" required/>
</p>
<label>Email Address:</label>
<p class="email">
<input name="Email_Address" type="text" class="validate[required,custom[phone]] feedback-input" id="email" placeholder="Email Address"/> <!--pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$"-->
</p>
<?php
$password = mt_rand(1000, 9999) . "a";
echo '<input name="pass" type="text" value=' . $password . ' hidden />';
?>
<div class="submit">
<input type="submit" value="SUBMIT fORM" name="submit" id="button-blue"/>
<div class="ease"></div>
</div>
</form>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$(document).on('change', '.changer', function () {
var class_value = $('select[name="qualification"]').val();
var gender_value = $('select[name="gender"]').val();
if (gender_value == 'Female' && (class_value == 'LKG' || class_value == 'UKG' || class_value == '1st' || class_value == '2nd' || class_value == '3rd'))
{
$('#hidden_div').show();
} else {
$('#hidden_div').hide();
}
});
});
})(jQuery);
</script>
You need to check both selects within your javascript function so do this:
function showDiv(){
var select = document.querySelector("select[name='gender']");
var qselect = document.querySelector("select[name='qualifications']");
if(select.value == 'Female' && (qselect.value=='LKG'||qselect.value=='UKG'||qselect.value=='1st'||qselect.value=='2nd'||qselect.value=='3rd')){
document.getElementById('hidden_div').style.display = "block";
} else{
document.getElementById('hidden_div').style.display = "none";
}
}
Note that you no longer need to pass (this) to this function
I have a small set of rows for a program i'm creating. Im trying to create a set of fields that a user can fill in, some time we need more rows than one so i created a javascript dynamically add row set.
I'm trying to style the fields for a fluid layout (between a pc and tablet). Im having difficulty getting them to work with both layout sizes. Secondly if i try to add headings (of some description) to the rows i can never get them to line up at all.
Any Suggestions? I have a link to some of my code here --> https://jsfiddle.net/c92qvuxe/
<div id="materials">
<!-- Start of Table -->
<form name="Add_Units" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<fieldset>
<div id="row">
<input name="Page_0" type="text" value=""/>
<input name="Weight_0" type="text" value=""/>
<select name="Finish_0">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_0" type="text" value=""/>
<input name="Grain_0" type="text" value=""/>
<select name="Size_0">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
</select>
<input name="Supplier_0" type="text" value=""/>
<input name="Stock_0" type="checkbox" value="1"/>
<input name="SheetQty_0" type="text" value=""/>
</div>
<div id="newrow" style="display: none;">
<input name="Page_" type="text" value="" size="5" maxlength="55" />
<input name="Weight_" type="text" value="" size="10" maxlength="55" />
<select name="Finish_">
<option value="Gloss">Gloss</option>
<option value="Silk">Silk</option>
<option value="Matt">Matt</option>
<option value="Offset">Offset</option>
<option value="NCR">NCR</option>
</select>
<input name="PaperName_" type="text" value="" size="10" maxlength="55" />
<input name="Grain_" type="text" value="" size="10" maxlength="55" />
<select name="Size_">
<option value="SRA3">SRA3</option>
<option value="SRA2">SRA2</option>
<option value="SRA1">SRA1</option>
<option value="B2">B2</option>
<option value="B1">B1<option>
<input name="Supplier_" type="text" value="" size="10" maxlength="55" />
<input name="Stock_" type="checkbox" value="1" size="10" />
<input name="SheetQty_" type="text" value="" size="10" maxlength="55" />
</div>
<p>
<input type="button" id="add_row()" onclick="add_row()" value="Add Row" />
<!--<input type="submit" name="Add_Unit" value="Save Units" />-->
</p>
<p> </p>
</fieldset>
</form>
<br />
After the user submits a form, how do I make it so that the user will get a form back on their browser?
I know I need to use location.search
<form id="survey" name="survey">
First Name
<input type="text" id="first" name="first" required/><br><br>
Last Name
<input type="text" id="last" name ="last" required /><br><br>
# of Attendees
<input type="number" id="attend" name="attend" required /><br><br>
Email Address
<input type="email" id="email" name="email" required /><br><br>
Time of Arrival
<input type="text" id="time" name="time" required /> <br><br>
Spend the Night
<select id="night" name="night">
<option value=" "> </option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<input type="submit" onclick="enter()"/>
</form>
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.
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();
});
You use $('.select') while the elements have class name option,
You should use change event instead of keyup
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);
});
});