I'm having a problem when i click the value from dropdown. It should supposedly show me in weightage(total) automatically.
Can someone help me on how to call the value by default from the marks allocation dropdown form automatically into weightage(total).
Marks Allocation code:
<div class="form-row">
<label>Marks Allocation (%):</label>
<select name="percentage" class="form-control" oninput="this.className = ''">
<?php
$sql = mysqli_query($connection,"SELECT * FROM continous_assess");
while ($row=mysqli_fetch_array($sql))
{ ?>
<option value="">
<?php echo $row['percentage']; ?>
</option>
<?php
}
?>
</select>
</div>
Weightage code:
<div class="form-group">
<label>Weightage</label>
<input type="number" name="first" class="prc" />
<input type="number" name="second" class="prc" />
<input type="number" name="third" class="prc" />
<input type="number" name="fourth" class="prc" />
<input type="number" name="fifth" class="prc" />
<label>Total</label>
<output value="<?php echo $row['percentage'];?>"></output>
</div>
This should help you on your way;
<script type="text/javascript">
function updateVal() {
// Get value
var val = document.getElementById("percentage").value;
// Set value
document.getElementById("exampleInput").value = val;
}
</script>
<select name="percentage" id="percentage" onchange="updateVal()">
<option value="">- Select something -</option>
<option value="example1">Example 1</option>
<option value="example2">Example 2</option>
<option value="example3">Example 3</option>
</select>
<input type="text" name="exampleInput" id="exampleInput">
Related
Please run the below code.
i am a beginner in coding.
I am making a form which contains various fields.
As you can see that in the Education field on click of add education button I am successfully able to add another education field but I am not able to delete the exact field. Please help!
Thanks in advance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment</title>
</head>
<body>
<h1>Candidate Information</h1>
<h2>Submit Your Info</h2>
<form>
<!-- name -->
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter your name" name="name" required><br />
<!-- gender -->
<br/><label for="gender"><b>Gender</b></label><br/>
<br/><label for="male"> Male</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="female"> Female</label>
<input type="radio" id="female" name="gender" value="female" /><br />
<!-- address -->
<br /><label for="address"><b>Address</b></label>
<br /><textarea rows="6" name="address" cols="70" placeholder="Enter your address" maxlength="200" required></textarea><br />
<!-- email -->
<br/><label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter your email" name="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" title="Please enter the correct email" required><br />
<!-- phone -->
<br/><label for="phone"><b>Phone</b></label>
<input type="tel" placeholder="Enter your phone number" name="phone" pattern="[0-9]{10}" title="Phone number can only be 10 digits" required><br /><br />
<!-- education -->
<p><b>Education</b></p>
<div id="education">
<label for="level"><b>Level:</b></label>
<select name="level" id="level">
<option>-Please select a level-</option>
<option value="SSC">SSC</option>
<option value="HSSC">HSSC</option>
<option value="Diploma">Diploma</option>
<option value="BE">BE</option>
<option value="BTech">BTech</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
</select>
<label for="year"><b>Year</b></label>
<input type="number" name="year1" max="2020" min="2000" />
<label for="grade"><b>Grade/%</b></label>
<input type="text" name="grade1" />
</div>
<input name="addeducation" type="button" value="Add Education" onClick="addEducation('education');"><br/><br/>
<script>
var counter = 1;
var limit = 4;
function addEducation(divname) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.className='addeduclass'+counter;
newdiv.innerHTML = "<label><b>Level: </b><label/>" + "<select><option>-Please select a level-</option><option value='SSC'>SSC</option><option value='HSSC'>HSSC</option><option value='Diploma'>Diploma</option><option value='BE'>BE</option><option value='BTech'>BTech</option><option value='BCA'>BCA</option><option value='MCA'>MCA</option></select>" +
"<label><b> Year</b><label/> " + "<input type='number' name='year' max='2020' min='2000'/>" +
"<label><b>Grade/%</b><label/> " + "<input type='text' name='grade'/>"+
"<button type='button' onClick='removeEducation('education',newdiv.className)'>Remove</button>";
document.getElementById(divname).appendChild(newdiv);
counter++;
console.log(counter);
console.log(newdiv.className);
}
}
function removeEducation(edudiv,divname) {
console.log("deleted");
document.getElementsByClassName(edudiv).removeChild(divname);
counter--;
}
</script>
<!-- skills -->
<p><b>Skills</b></p>
<div id="skills">
<label for="skillname"><b>Name</b></label>
<input type="text" name="skillname">
<label for="rating"><b>Rating:</b></label>
<select name="rating" id="rating">
<option>-Please select a rating-</option>
<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>
</div>
<input name="addskill" type="button" value="Add Skill" onClick="addSkill('skills');"><br/>
<script>
var skillcounter = 1;
var skilllimit = 3;
function addSkill(divname1) {
if (skillcounter == skilllimit) {
alert("You have reached the limit of adding " + skillcounter + " inputs");
}
else {
var snewdiv = document.createElement('div');
snewdiv.className="addskillclass"
snewdiv.innerHTML = "<label><b>Name</b></label>" + "<input type='text' name='skillname1'/>"+
"<label><b>Rating:</b></label>" + "<select><option>-Please select a rating-</option><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>";
document.getElementById(divname1).append(snewdiv);
skillcounter++;
console.log(counter);
}
}
// function removeSkill(divname1) {
// }
</script>
<!-- hobby -->
<br/>
<label for="hobby"><b>Hobby</b></label>
<input type="text" placeholder="Enter your hobby" name="hobby"><br /><br />
<!-- photourl -->
<label for="photourl"><b>Photo</b></label>
<input type="url" name="photourl" placeholder="photo url" /><br />
<!-- submit -->
<input type="submit" value="Submit" />
</form>
</body>
</html>
You could simplify this a little like so:
Pass the delete button into the function removeEducation using the keyword this, so change to the following on your delete education buttons:
onClick='removeEducation(this);'
Then in your removeEduction function, you pass in the delete button which is clicked, traverse it to the parent node of the parent div of the button and then use removeChild to remove the parent div of the delete button:
function removeEducation(deleteButton) {
deleteButton.parentNode.parentNode.removeChild(deleteButton.parentNode);
counter--;
}
Just a small piece of advice, it is recommended to add event handling to elements via javascript using .addEventListener instead of inline in the html You can read more about that here (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Assignment</title>
</head>
<body>
<h1>Candidate Information</h1>
<h2>Submit Your Info</h2>
<form>
<!-- name -->
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter your name" name="name" required><br />
<!-- gender -->
<br/><label for="gender"><b>Gender</b></label><br/>
<br/><label for="male"> Male</label>
<input type="radio" id="male" name="gender" value="male" />
<label for="female"> Female</label>
<input type="radio" id="female" name="gender" value="female" /><br />
<!-- address -->
<br /><label for="address"><b>Address</b></label>
<br /><textarea rows="6" name="address" cols="70" placeholder="Enter your address" maxlength="200" required></textarea><br />
<!-- email -->
<br/><label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter your email" name="email" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,}$" title="Please enter the correct email" required><br />
<!-- phone -->
<br/><label for="phone"><b>Phone</b></label>
<input type="tel" placeholder="Enter your phone number" name="phone" pattern="[0-9]{10}" title="Phone number can only be 10 digits" required><br /><br />
<!-- education -->
<p><b>Education</b></p>
<div id="education">
<label for="level"><b>Level:</b></label>
<select name="level" id="level">
<option>-Please select a level-</option>
<option value="SSC">SSC</option>
<option value="HSSC">HSSC</option>
<option value="Diploma">Diploma</option>
<option value="BE">BE</option>
<option value="BTech">BTech</option>
<option value="BCA">BCA</option>
<option value="MCA">MCA</option>
</select>
<label for="year"><b>Year</b></label>
<input type="number" name="year1" max="2020" min="2000" />
<label for="grade"><b>Grade/%</b></label>
<input type="text" name="grade1" />
</div>
<input name="addeducation" type="button" value="Add Education" onClick="addEducation('education');"><br/><br/>
<script>
var counter = 1;
var limit = 4;
function addEducation(divname) {
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.className='addeduclass'+counter;
newdiv.innerHTML = `<label><b>Level: </b><label/>
<select>
<option>-Please select a level-</option>
<option value='SSC'>SSC</option>
<option value='HSSC'>HSSC</option>
<option value='Diploma'>Diploma</option>
<option value='BE'>BE</option>
<option value='BTech'>BTech</option>
<option value='BCA'>BCA</option>
<option value='MCA'>MCA</option>
</select>
<label><b> Year</b><label/> <input type='number' name='year' max='2020' min='2000'/>
<label><b>Grade/%</b><label/> <input type='text' name='grade'/>
<button type='button' onClick="removeEducation('education','${newdiv.className}')">Remove</button>`;
document.getElementById(divname).appendChild(newdiv);
counter++;
console.log(counter);
console.log(newdiv.className);
}
}
function removeEducation(edudiv,divname) {
console.log("deleted");
document.getElementById(edudiv).removeChild(document.getElementsByClassName(divname)[0]);
counter--;
}
</script>
<!-- skills -->
<p><b>Skills</b></p>
<div id="skills">
<label for="skillname"><b>Name</b></label>
<input type="text" name="skillname">
<label for="rating"><b>Rating:</b></label>
<select name="rating" id="rating">
<option>-Please select a rating-</option>
<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>
</div>
<input name="addskill" type="button" value="Add Skill" onClick="addSkill('skills');"><br/>
<script>
var skillcounter = 1;
var skilllimit = 3;
function addSkill(divname1) {
if (skillcounter == skilllimit) {
alert("You have reached the limit of adding " + skillcounter + " inputs");
}
else {
var snewdiv = document.createElement('div');
snewdiv.className="addskillclass"
snewdiv.innerHTML = "<label><b>Name</b></label>" + "<input type='text' name='skillname1'/>"+
"<label><b>Rating:</b></label>" + "<select><option>-Please select a rating-</option><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>";
document.getElementById(divname1).append(snewdiv);
skillcounter++;
console.log(counter);
}
}
// function removeSkill(divname1) {
// }
</script>
<!-- hobby -->
<br/>
<label for="hobby"><b>Hobby</b></label>
<input type="text" placeholder="Enter your hobby" name="hobby"><br /><br />
<!-- photourl -->
<label for="photourl"><b>Photo</b></label>
<input type="url" name="photourl" placeholder="photo url" /><br />
<!-- submit -->
<input type="submit" value="Submit" />
</form>
</body>
</html>
Try this out. It worked. Made few changes to the remove function
I am trying to display the information below the form after you hit submit. Please help me figure this out. The submit button does not display anything. Can somebody please explain?
Here is my HTML code:
<form id="myform" role="form">
<label for="Name">Name:</label>
<input type="text" class="form-control" id="Name">
<div class="dropdown">
<label for="countries">Country:</label>
<select class="form-control" id="countries">
<option value="">Select a Country:</option>
</select>
<label for="states">State:</label>
<select class="form-control" id="states">
<option value="">Select a State</option>
</select>
<input type="submit" onclick="showInput();">
</form>
</div>
<label> Your input:</label>
<p><span id='display'>
</span></p>
Here is my JavaScript code:
function showInput() {
var output_info = document.getElementById("myform").value;
document.getElementById('display').innerHTML = output_info;
}
try this
<?php
if(isset($_POST["submit"]))
{
echo $_POST["Name"];
echo $_POST["countries"];
echo $_POST["states"];
}
?>
<form id="myform" role="form" action="" method="post">
<label for="Name">Name:</label>
<input type="text" class="form-control" name="Name">
<label for="countries">Country:</label>
<select class="form-control" name="countries">
<option value="">Select a Country:</option>
</select>
<label for="states">State:</label>
<select class="form-control" name="states">
<option value="">Select a State</option>
</select>
<input type="submit" name="submit">
</form>
Try include name attribute at input, select elements within form; use .querySelectorAll() with selector "input:not([type=submit]), select" chained to form to select form elements; for loop to iterate elements returned by .querySelectorAll()
<script>
function showInput(e) {
e.preventDefault();
var output_info = document.getElementById("myform");
var display = document.getElementById("display");
var data = output_info.querySelectorAll("input:not([type=submit]), select");
for (var i = 0; i < data.length; i++) {
display.innerHTML += "name:" + data[i].name + " value:" + data[i].value + "<br>"
}
}
</script>
<form id="myform" role="form">
<label for="Name">Name:</label>
<input type="text" class="form-control" name="Name" id="Name" />
<div class="dropdown">
<label for="countries">Country:</label>
<select class="form-control" id="countries" name="countries">
<option value="">Select a Country:</option>
<option value="abc" selected>abc</option>
</select>
<label for="states">State:</label>
<select class="form-control" id="states" name="states">
<option value="">Select a State</option>
<option value="123" selected>123</option>
</select>
<input type="submit" onclick="showInput(event);" />
</div>
</form>
<label>Your input:</label>
<p><span id='display'>
</span>
</p>
Here is a snip of my form i am using. I am using javascript to set the value of the dollars and cents to the 2 and 00 but it does not work. Can anyone correct this? Thank you
<select class="element select medium" id="element_8" name="element_8" onChange="update_txt()">
<option value="" selected="selected"></option>
<option value="First option" >First option</option>
<option value="Second option" >Second option</option>
<option value="Third option" >Third option</option>
</select>
<input id="subtotal" name="subtotal" class="element text currency" size="10" value="" type="text" /> .
<label for="subtotal">Dollars</label>
<input id="subtotalcents" name="subtotalcents" class="element text" size="2" maxlength="2" value="" type="text" />
<label for="subtotalcents">Cents</label>
<script>function update_txt(){
price = document.getElementById('element_8').value;
document.getElementById('element_7').value = price;
document.getElementById('element_7').focus();
document.getElementbyId('subtotal').value ='2';
document.getElementbyId('subtotalcents').value ='00';
}
</script>
It is document.getElementById('subtotal').value ='2';it is capital "B"
function update_txt(){
price = document.getElementById('element_8').value;
document.getElementById('element_7').value = price;
document.getElementById('element_7').focus();
document.getElementById('subtotal').value ='2';
document.getElementById('subtotalcents').value ='00';
}
P.S: There is no element_7 in the code u provided, but hoping it is present in the actual code ur using.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>function update_txt(){
debugger
price = document.getElementById('element_8').value;
document.getElementById('element_7').value = price;
document.getElementById('element_7').focus();
document.getElementById('subtotal').value ='2';
document.getElementById('subtotalcents').value ='00';
}
</script>
</head>
<body>
<select class="element select medium" id="element_8" name="element_8" onChange="update_txt()">
<option value="" selected="selected"></option>
<option value="First option" >First option</option>
<option value="Second option" >Second option</option>
<option value="Third option" >Third option</option>
</select>
<input id="element_7" name="element_7" class="element text currency" size="10" value="" type="text" /> .
<input id="subtotal" name="subtotal" class="element text currency" size="10" value="" type="text" /> .
<label for="subtotal">Dollars</label>
<input id="subtotalcents" name="subtotalcents" class="element text" size="2" maxlength="2" value="" type="text" />
<label for="subtotalcents">Cents</label>
</body>
</html>
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 />
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);
});
});