I have a select box with a few dropdown options. Under each option there will be a checklist and total (each checklist item has a value). I need to accomplish this using pure javascript.
My problem is I don't know how to make each checklist specific to its dropdown item, and to reset the checkbox values after a user clicks a new dropdown option. I've tried calling the totalIt function in the display function but I can't get it to work.
Fiddle
My HTML is:
<div>
<select id="store">
<option value="A">Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="box A">
Location A<br>
<input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box B">
Location B
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box C">
Location C
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt()" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt()" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
CSS:
.hide {
display: none;
}
JS:
document.querySelector("select#store").addEventListener("change", () => {
display(event.target.value);
});
const boxs = document.querySelectorAll("div.box");
// Select box show/hide div
function display(value) {
for (const box of boxs) {
if (box.classList.contains(value)) {
box.classList.remove("hide");
} else {
box.classList.add("hide");
}
}
}
display("A");
// Total the values of the checkboxes
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementsByName("total")[0].value = total + "%";
}
Try to use the selected box children property. So that only those elements under the box would be updated. You are almost there I just had to tweak the code just a little.
HTML:
<div>
<select id="store">
<option value="A">Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="box A">
Location A <br>
Select your items:
<br>
<input name="proPercent1" value="20" type="checkbox" onclick="totalIt()"/> 20%<br>
<input name="proPercent2" value="15" type="checkbox" onclick="totalIt()"/> 15%<br>
Total:<br>
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box B">
Location B <br>
Select your items:
<br>
<input name="proPercent1" value="20" type="checkbox" onclick="totalIt()"/> 20%<br>
<input name="proPercent2" value="15" type="checkbox" onclick="totalIt()"/> 15%<br>
Total:<br>
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box C">
Location C <br>
Select your items:
<br>
<input name="proPercent1" value="20" type="checkbox" onclick="totalIt()" name="percentage1"/> 20%<br>
<input name="proPercent2" value="15" type="checkbox" onclick="totalIt()"/> 15%<br>
Total:<br>
<input value="0" readonly="readonly" type="text" name="total" />
</div>
JS:
document.querySelector("select#store").addEventListener("change", () => {
display(event.target.value);
});
const boxs = document.querySelectorAll("div.box");
let selectedBox = "";
function display(value) {
for (const box of boxs) {
if (box.classList.contains(value)) {
box.classList.remove("hide");
selectedBox = box;
} else {
box.classList.add("hide");
}
}
}
display("A");
// Total the values of the checkboxes
function totalIt() {
let total = 0;
if(selectedBox.children.proPercent1.checked) total = total + parseInt(selectedBox.children.proPercent1.value)
if(selectedBox.children.proPercent2.checked) total = total + parseInt(selectedBox.children.proPercent2.value)
selectedBox.children.total.value = `${total} %`;
}
Hopefully this helps
Hi,
I get solution to your problem...
document.querySelector("select#store").addEventListener("change", () => {
display(event.target.value);
});
const boxs = document.querySelectorAll("div.box");
// Select box show/hide div
function display(value) {
for (const box of boxs) {
if (box.classList.contains(value)) {
box.classList.remove("hide");
} else {
box.classList.add("hide");
}
}
}
display("A");
// Total the values of the checkboxes
function totalIt(Group) {
let input = document.querySelectorAll(`.${Group} [name=product]`),
total = 0,
totalInput = document.querySelector(`.${Group} [name=total]`)
input.forEach(input => {
if(input.checked) total += parseFloat(input.value);
totalInput.value = total + "%"
})
}
.hide {
display: none;
}
.box {
margin-top:30px;
}
<div>
<select id="store">
<option value="A">Location A</option>
<option value="B">Location B</option>
<option value="C">Location C</option>
</select>
</div>
<div class="box A">
Location A<br>
<input name="product" value="20" type="checkbox" onclick="totalIt('A')" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt('A')" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box B">
Location B
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt('B')" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt('B')" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
<div class="box C">
Location C
<br>
<input name="product" value="20" type="checkbox" onclick="totalIt('C')" /> 20%<br>
<input name="product" value="15" type="checkbox" onclick="totalIt('C')" /> 15%<br>
Total:
<input value="0" readonly="readonly" type="text" name="total" />
</div>
I Convert for loop to forEach array loop
I Change the selector from getElementsByNames to querySelector and querySelectorAll
I Add argument to the function represent the Group
I Noticed that you add class for each Group represent Name
I Use this to make input selector and totalInput selector dedicated for each group... Like document.querySelectorAll(.a [name=product])
Finally I call function and type name group in html
To uncheck a checkbox you set the element.checked value to false, (more here Check/Uncheck checkbox with JavaScript)
const allCheckboxes = document.querySelectorAll('input[type="checkbox"]');
function display (value) {
allCheckboxes.forEach(element => element.checked = false);
// your code
...
}
Related
I want the male female to be a separate total in the input box below. But at present both of them come in one input box, I don't know its mechanism. How can I do according to the design?
$(document).on("change", ".track", function() {
var sum = 0;
$(".track").each(function() {
sum += +$(this).val();
});
$("#total").val(sum);
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<table >
<tr>
<select name='type[]'>
<option value="male"> Male</option>
<option value="female"> Female</option>
</select>
<input type="text" name="amount[]" class="track" value="" /> <br>
</tr>
<tr>
<select name='type[]'>
<option value="female"> Female</option>
<option value="male"> Male</option>
</select>
<input type="text" name="amount[]" class="track" value="" /> <br>
</tr>
</table>
<hr>
<label> Male Total: </label>
<input type="text" id="total" value="" />
<label> Female Total: </label>
<input type="text" id="return" value="" />
Perhaps this example below can help you. It is without using jQuery (but if necessary, it is not difficult to rewrite using jQuery) and uses the form tag to catch a form change event:
const types = document.querySelectorAll('select[name="type[]"]');
const amounts = document.querySelectorAll('input[name="amount[]"]');
const totalMale = document.querySelector('#total-male');
const totalFemale = document.querySelector('#total-female');
const form = document.querySelector('#form');
const changeCallback = () => {
const total = {
male: 0,
female: 0
};
types.forEach((el, i) => {
total[el.value] += Number(amounts[i].value) || 0
});
totalMale.value = total.male;
totalFemale.value = total.female;
}
form.addEventListener('change', changeCallback);
changeCallback();
<form id="form">
<table>
<tr>
<select name='type[]'>
<option value="male"> Male</option>
<option value="female"> Female</option>
</select>
<input type="text" name="amount[]" class="track" value="" /> <br>
</tr>
<tr>
<select name='type[]'>
<option value="female"> Female</option>
<option value="male"> Male</option>
</select>
<input type="text" name="amount[]" class="track" value="" /> <br>
</tr>
</table>
</form>
<hr>
<label> Male Total: </label>
<input type="text" id="total-male" value="" />
<label> Female Total: </label>
<input type="text" id="total-female" value="" />
If the form tag bothers you, then you can do without it by marking all the elements of the form with one selector (for example, class .form-element):
const types = document.querySelectorAll('select[name="type[]"]');
const amounts = document.querySelectorAll('input[name="amount[]"]');
const totalMale = document.querySelector('#total-male');
const totalFemale = document.querySelector('#total-female');
const formElements = document.querySelectorAll('.form-element');
const changeCallback = () => {
const total = {
male: 0,
female: 0
};
types.forEach((el, i) => {
total[el.value] += Number(amounts[i].value) || 0
});
totalMale.value = total.male;
totalFemale.value = total.female;
}
formElements.forEach((el) => {
el.addEventListener('change', changeCallback)
});
changeCallback();
<table>
<tr>
<select name='type[]' class="form-element">
<option value="male"> Male</option>
<option value="female"> Female</option>
</select>
<input type="text" name="amount[]" class="track form-element" value="" /> <br>
</tr>
<tr>
<select name='type[]' class="form-element">
<option value="female"> Female</option>
<option value="male"> Male</option>
</select>
<input type="text" name="amount[]" class="track form-element" value="" /> <br>
</tr>
</table>
<hr>
<label> Male Total: </label>
<input type="text" id="total-male" value="" />
<label> Female Total: </label>
<input type="text" id="total-female" value="" />
I have a problem i dont know how can i read the value stored in <select><option> </option></select> and from radio buttons here i have my code with js and html
function inport(){
var name = document.getElementById("name").value;
var index = document.getElementById("index").value;
var phone = document.getElementById("phone").value;
var grade = document.getElementById("grade").value;
var session = document.getElementById("session").value;
console.log(name);
console.log(index);
console.log(phone);
console.log(grade);
console.log(session);
}
<form>
<div>
<h1>Details</h1>
<div>
<label>Name</label>
<input type="text" id="name">
</div>
<div>
<label>Index</label>
<input type="text" id="index">
</div>
<div>
<label>Phone</label>
<input type="text" id="phone">
</div>
<div id="grade">
<label><input type="radio" name="groupName" value="5"> 5</label>
<label><input type="radio" name="groupName" value="6"> 6</label>
<label><input type="radio" name="groupName" value="7"> 7</label>
<label><input type="radio" name="groupName" value="8"> 8</label>
<label><input type="radio" name="groupName" value="9"> 9</label>
<label><input type="radio" name="groupName" value="10"> 10</label>
<div>
</div>
<div>
<label>Session</label>
<select id="session">
<option value="checkbox">Decembar</option>
<option value="checkbox">November</option>
<option value="checkbox">Octomber</option>
<option value="checkbox">September</option>
<option value="checkbox">August</option>
<option value="checkbox">July</option>
<option value="checkbox">June</option>
<option value="checkbox">May</option>
<option value="checkbox">April</option>
<option value="checkbox">March</option>
<option value="checkbox">February</option>
<option value="checkbox">January</option>
</select>
</div>
<div>
<input type="button" value="Input student"id="import" onclick="inport();">
</div>
</div>
</form>
When i try to console.log my values of grade and session i want to get the number or month selected how can get the value should i change something in my html ? It works fine with first 3 because i just read from <input type="text"> but in other 2 i tried getting the value from radio button and select options. I think you can run this code snipped and see the output if you need more info let me know :).
Add name attribute in input.
JS Code
document.getElementById("show_radio").onclick = function () {
var radio = document.getElementsByName("gender");
var radio_selected;
for (var a = 0; a < radio.length; a++) {
if (radio[a].checked) {
radio_selected = radio[a].value;
}
}
document.getElementById("selected_radio").innerHTML = radio_selected;
}
<form>
<input type="radio" name="gender" value="Male" checked=""> Male<br>
<input type="radio" name="gender" value="Female"> Female<br>
<input type="radio" name="gender" value="I'd rather not inform"> I'd rather not inform
</form>
<button id="show_radio">Show</button>
<p id="selected_radio"></p>
I have a Javascript file that will automatically calculate total plus the percentage.At first I thought my code was correct.
javascript.js
function getPayPalProcessingFee() {
var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val();
qty = parseInt(qty);
//var cat_buttons = jQuery("input[name=cat]")
//var current_index = cat_buttons.index(cat_buttons.find(':checked'));
var current_index = $("input[name=cat]:checked").attr('id');
switch (current_index){
case 'cat-both':
return 3*qty;
break;
case 'cat-aerial':
return 1.8*qty;
break;
case 'cat-loto':
return 1.8*qty;
break;
default:
return 0;
}
}
function trainthetrainerForm_calculateItemAmount() {
var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val();
var current_val = jQuery("input[name=cat]:checked").val();
var amount = parseInt(qty) * current_val;
amount = parseFloat(amount).toFixed(2);
return amount;
}
function trainthetrainerForm_calculateFee() {
var fee = getPayPalProcessingFee();
return fee;
}
function trainthetrainerForm_displayTotalAmount() {
var amount = trainthetrainerForm_calculateItemAmount();
console.log(amount);
var fee = getPayPalProcessingFee();
console.log(fee);
var totalamount = parseFloat(amount) + parseFloat(fee);
console.log(totalamount);
totalamount = parseFloat(totalamount).toFixed(2);
console.log(totalamount);
jQuery('#paypal_submit_form input[name=tmp_total_amount]').val(totalamount);
}
function submitTrainthetrainerForm() {
var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val();
jQuery('#paypal_submit_form input[name=quantity_1]').val(qty);
var totalAmount = 0;
var amount = trainthetrainerForm_calculateItemAmount();
var processingFee = trainthetrainerForm_calculateFee();
totalAmount = amount + processingFee;
jQuery('#paypal_submit_form input[name=business]').val('shana#same.org');
jQuery('#paypal_submit_form input[name=amount]').val(totalAmount);
jQuery('#paypal_submit_form input[name=amount_2]').val(processingFee);
jQuery('#paypal_submit_form').submit();
return true;
}
jQuery(document).ready(function (){
$(document).on('change',$("#bal_number_of_members"),function(){
trainthetrainerForm_displayTotalAmount();
});
jQuery("#bal_submit_btn").click(function() {
submitTrainthetrainerForm();
});
trainthetrainerForm_displayTotalAmount();
});
form.html
<h2 class="contentheading" style="margin-top: 0px;">2016 “Train-The-Trainer” Workshops<br /><br /> AERIAL</h2>
<div>
<p>$50.00 per class/person<br />Sign up for both for $90.00</p>
</div>
<div>
<form id="paypal_submit_form" https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="cmd" type="hidden" value="_cart" />
<input name="upload" type="hidden" value="1" />
<input name="charset" type="hidden" value="utf8" />
<input name="business" type="hidden" />
<input name="currency_code" type="hidden" value="USD" />
<input name="custom" type="hidden" />
<input name="amount" type="hidden" />
<input name="first_name" type="hidden" />
<input name="last_name" type="hidden" />
<input name="address1" type="hidden" />
<input name="city" type="hidden" />
<input name="state" type="hidden" />
<input name="zip" type="hidden" />
<input name="email" type="hidden" />
<input name="night_phone_b" type="hidden" />
<input name="address_override" type="hidden" value="1" />
<div id="paypal_prs" style="font-size: 12px;">
<p>
<input id="cat-both" checked="checked" name="cat" type="radio" value="90" />
<label for="cat-both">Both</label>
<input id="cat-aerial" name="cat" type="radio" value="50" />
<label for="cat-aerial">Aerial</label>
<input id="cat-loto" name="cat" type="radio" value="50" />
<label for="cat-loto">Lockout/Tagout</label>
</p>
<br /> Members:
<select id="bal_number_of_members" style="font-size: 12px; padding: 3px;" name="number_of_members">
<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>
<option value="11">11</option>
</select>
<br /> Total Amount (Cost + Processing Fee):
<input style="width: 50px; margin-right: 10px; padding: 2px; padding-bottom: 1px; font-size: 12px;" name="tmp_total_amount" readonly="readonly" type="text" value="93" />
<input id="bal_submit_btn" style="padding: 3px 5px; font-size: 12px; cursor: pointer;" type="button" value="Pay Here" />
<input name="item_name_1" type="hidden" value="2016 Train-The-Trainer Workshops(AERIAL LIFTS & LOCKOUT/TAGOUT)" />
<input name="amount_1" type="hidden" value="90" />
<input name="quantity_1" type="hidden" value="1" />
<input name="item_name_2" type="hidden" value="Processing fee" />
<input name="amount_2" type="hidden" value="0" />
<input name="quantity_2" type="hidden" value="1" />
</div>
<input name="notify_url" type="hidden" value="http://some.org/tmp_ipn.php" />
<input name="return" type="hidden" value="http://some.org/" />
<input name="cancel_return" type="hidden" value="http://some.org/index.php?view=article&id=278" />
<input name="no_shipping" type="hidden" value="1" />
</form>
</div>
<div style="font-size: 11px; margin-top: 10px; color: red;">
Additional 2.9% + $0.30 processing fee will be charged with all orders paid by credit card.
</div>
<div style="margin-top: 50px;">
<a style="font-size: 18px;" href="images/Flyer_2016.pdf" target="_blank">Download Order Form</a>
</div>
<p style="font-size: 14px;">
<strong>Please fax or email the order form to the office.</strong>
</p>
If the user check input id=both, the value will be 90 multiplied by option value from select id =bal_number_of_members.
Else if the user click either input id = cat-aeral and input id = cat-loto, the value wold be 50 multiplied by option value from select id = bal_number_of_members.
With this set up, if I check id=both, and option value from select id =bal_number_of_members
1 = 90 //value of 90 + 3
2 = 186.00 //93 * 2
3 = 279.00
4 = 372.00
5 = 465.00
6 = 558.00
7 = 651.00
8 = 744.00
9 = 873.00
Our accounting officer notice this calculation is not correct
It should be
1 = 93.00 //3.00
2 = 185.68 // 5.68
......
How to correctly get total with percentage?
This is what she want
Additional 2.9% + $0.30 processing fee will be charged with all orders paid by credit card.
Here is a working example of the solution JS Fiddle
function trainthetrainerForm_calculateItemAmount() {
var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val();
var current_val = jQuery("input[name=cat]:checked").val();
//console.log(current_val);
var amount = parseInt(qty) * current_val;
amount = parseFloat(amount).toFixed(2);
return amount;
}
function trainthetrainerForm_displayTotalAmount() {
var amount = trainthetrainerForm_calculateItemAmount();
console.log(parseFloat(amount));
var totalamount = parseFloat(amount)+((parseFloat(amount)*0.029)+0.30);
console.log(totalamount);
totalamount = parseFloat(totalamount).toFixed(2);
console.log(totalamount);
jQuery('#paypal_submit_form input[name=tmp_total_amount]').val(totalamount);
}
function submitTrainthetrainerForm() {
var qty = jQuery('#paypal_submit_form select[name=number_of_members]').val();
jQuery('#paypal_submit_form input[name=quantity_1]').val(qty);
var totalAmount = 0;
var amount = trainthetrainerForm_calculateItemAmount();
var processingFee = trainthetrainerForm_calculateFee();
totalAmount = amount + processingFee;
jQuery('#paypal_submit_form input[name=business]').val('shana#same.org');
jQuery('#paypal_submit_form input[name=amount]').val(totalAmount);
jQuery('#paypal_submit_form input[name=amount_2]').val(processingFee);
jQuery('#paypal_submit_form').submit();
return true;
}
jQuery(document).ready(function() {
$(document).on('change', $("#bal_number_of_members"), function() {
trainthetrainerForm_displayTotalAmount();
});
jQuery("#bal_submit_btn").click(function() {
submitTrainthetrainerForm();
});
trainthetrainerForm_displayTotalAmount();
});
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<h2 class="contentheading" style="margin-top: 0px;">2016 “Train-The-Trainer” Workshops<br /><br /> AERIAL</h2>
<div>
<p>$50.00 per class/person
<br />Sign up for both for $90.00</p>
</div>
<div>
<form id="paypal_submit_form" action="https://www.paypal.com/***" method="post">
<input name="cmd" type="hidden" value="_cart" />
<input name="upload" type="hidden" value="1" />
<input name="charset" type="hidden" value="utf8" />
<input name="business" type="hidden" />
<input name="currency_code" type="hidden" value="USD" />
<input name="custom" type="hidden" />
<input name="amount" type="hidden" />
<input name="first_name" type="hidden" />
<input name="last_name" type="hidden" />
<input name="address1" type="hidden" />
<input name="city" type="hidden" />
<input name="state" type="hidden" />
<input name="zip" type="hidden" />
<input name="email" type="hidden" />
<input name="night_phone_b" type="hidden" />
<input name="address_override" type="hidden" value="1" />
<div id="paypal_prs" style="font-size: 12px;">
<p>
<input id="cat-both" checked="checked" name="cat" type="radio" value="90" />
<label for="cat-both">Both</label>
<input id="cat-aerial" name="cat" type="radio" value="50" />
<label for="cat-aerial">Aerial</label>
<input id="cat-loto" name="cat" type="radio" value="50" />
<label for="cat-loto">Lockout/Tagout</label>
</p>
<br /> Members:
<select id="bal_number_of_members" style="font-size: 12px; padding: 3px;" name="number_of_members">
<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>
<option value="11">11</option>
</select>
<br /> Total Amount (Cost + Processing Fee):
<input style="width: 50px; margin-right: 10px; padding: 2px; padding-bottom: 1px; font-size: 12px;" name="tmp_total_amount" readonly="readonly" type="text" value="93" />
<input id="bal_submit_btn" style="padding: 3px 5px; font-size: 12px; cursor: pointer;" type="button" value="Pay Here" />
<input name="item_name_1" type="hidden" value="2016 Train-The-Trainer Workshops(AERIAL LIFTS & LOCKOUT/TAGOUT)" />
<input name="amount_1" type="hidden" value="90" />
<input name="quantity_1" type="hidden" value="1" />
<input name="item_name_2" type="hidden" value="Processing fee" />
<input name="amount_2" type="hidden" value="0" />
<input name="quantity_2" type="hidden" value="1" />
</div>
<input name="notify_url" type="hidden" value="http://some.org/tmp_ipn.php" />
<input name="return" type="hidden" value="http://some.org/" />
<input name="cancel_return" type="hidden" value="http://some.org/index.php?view=article&id=278" />
<input name="no_shipping" type="hidden" value="1" />
</form>
</div>
<div style="font-size: 11px; margin-top: 10px; color: red;">
Additional 2.9% + $0.30 processing fee will be charged with all orders paid by credit card.
</div>
<div style="margin-top: 50px;">
<a style="font-size: 18px;" href="images/Flyer_2016.pdf" target="_blank">Download Order Form</a>
</div>
<p style="font-size: 14px;">
<strong>Please fax or email the order form to the office.</strong>
</p>
You need to calculate the base amount first for the selected quantities and then apply above fees on that amount. For example,
If user has selected 'both' and no. of members as 2, then the base amount will be 180. Now apply the fees to this base amount, which will be
(180*0.029)+0.30 = 5.52. So your total amount will be 185.52
what you have done in current_index appears incorrect. additional 2.9% + 0.30 should be applied to total base amount i.e. 90 (for both) * qty
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);
});
});
Here i have bunch of check boxes with in their respective div's.
I would like append a textbox to div#tables for every div which is having at least one check-box as checked, and vice versa.
Demo: Fiddle
How can i do this ?
Could anyone help me out ?
HTML
<select id="count" style="float:left;">
<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>
</select>
<div style="float:left;" id="tables"></div>
<br/>
<br/>
<div class="checkbox" data-toggle="false" data-min="2" data-type="t1" style='float:left;background:yellow;width:100px'>
<input id="checkbox-1" type="checkbox" name="Data1" value="option1" />
<label for="checkbox-1">HTML</label>
<br />
<input id="checkbox-2" type="checkbox" name="Data2" value="option2" />
<label for="checkbox-2">CSS</label>
<br />
<input id="checkbox-3" type="checkbox" name="Data3" value="option3" />
<label for="checkbox-3">HTML</label>
<br />
<input id="checkbox-7" type="checkbox" name="Data7" value="option7" />
<label for="checkbox-7">HTML</label>
<br />
</div>
<div class="checkbox" data-toggle="false" data-min="3" data-type="t1" style='float:left;margin-left:100px;background:brown;width:100px'>
<input id="checkbox-4" type="checkbox" name="Data4" value="option4" />
<label for="checkbox-4">CSS</label>
<br />
<input id="checkbox-5" type="checkbox" name="Data5" value="option5" />
<label for="checkbox-5">HTML</label>
<br />
<input id="checkbox-6" type="checkbox" name="Data6" value="option6" />
<label for="checkbox-6">CSS</label>
<br />
<input id="checkbox-8" type="checkbox" name="Data8" value="option8" />
<label for="checkbox-8">HTML</label>
</div>
jQuery
$(document).ready(function () {
$('#count').on('change', function () {
//do stuff here
//my random "on change" behaviour {
var chkboxes = $('input[type=checkbox]:checked');
var txtboxes = $('input[type=text]');
for (var i = 0; i < chkboxes.length; i++) {
$(chkboxes[i]).prop('checked', false);
}
for (var i = 0; i < txtboxes.length; i++) {
$(txtboxes[i]).remove();
}
});
$('input[type=checkbox]').on('change', function (e) {
//this was deselected no need to check?
if ($(this).prop('checked')) {
var parent = $($(this).parent()[0]);
var newtextbox = '<input type="text" value="' + parent + '"/>';
$("#tables").append(newtextbox); //append table
}
if (!$(this).prop('checked')) {
return false;
}
});
});
Thanks in advance.
I added id to your appended textarea in order to be able to know if their exists or not.
var newtextbox = '<input id="textarea_'+classname+'" type="text" value="' + parent + '"/>';
And for vice versa, I used remove jquery method.
$("#textarea_"+classname).remove();
Can you check this fiddle ?
DEMO