We Keep Coding

Show/Hide input field inside appended element

I have the following JS/jQuery code to append rows to an existing table. Upon appending, I want to show the input field only when "select" or "radio" is selected as the option type.
When I add multiple rows, the input field appearance/disappearance is dependent upon the first added row. I want it to show/hide only on the row(s) where any of the two options are selected.
Hope that made sense. Any suggestion would be helpful. Thanks!
HTML:
<table id="tbl-formfields" class="table vertical-align table-condensed" >
<thead>
<tr>
<th>Input Type</th>
<th>Make Required</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tbody">
<tr id="tr-formField">
<td>
<div>
<select name="formOptionType[]" id="formOptionType">
<option value="">-------------------------------------</option>
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="select">Select Options (Dropdown)</option>
<option value="radio">Radio Buttons</option>
<option value="checkbox">Checkbox</option>
</select>
</div>
<div id="block-optionsInput" style="display:none">
<label>Options:</label><br>
<input id="options" type="text" name="fieldOptions[]" data-role="tagsinput"/>
</div>
</td>
<td>
<label><input type="checkbox" name="fieldRequired[]"/> Required</label>
</td>
<td></td>
</tr>
</tbody>
</table>
jQuery:
//****Repeat form field block****
var repeatBlock = "#tbody";
var repeatText = '<tr class="trRepeat">\n\
<td>\n\
<select class="optType" name="formOptionType[]">\n\
<option value="">-------------------------------------</option>\n\
<option value="text">Text</option>\n\
<option value="textarea">Textarea</option>\n\
<option value="select">Select Options (Dropdown)</option>\n\
<option value="radio">Radio Buttons</option>\n\
<option value="checkbox">Checkbox</option>\n\
</select>\n\
<div class="optBlock" style="display:none">\n\
<label>Options:</label><br>\n\
<input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput"/>\n\
</div>\n\
</td>\n\
<td><label><input type="checkbox" name="fieldRequired[]"/> Required</label></td>\n\
<td><a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">\n\
<span class="glyphicon glyphicon-remove"></span></a>\n\
</td></tr>';
$("#btn-addfield").click(function (e) {
e.preventDefault();
$(repeatBlock).append(repeatText);
});
$(repeatBlock).on('click', '.removeField', function (e) {
e.preventDefault();
$(this).parent().parent().remove();
});
//****Show input field when dropdown/radio is selected****
$(repeatBlock).on('change', $(".optType").val(), function (e) {
e.preventDefault();
if ($(this).find(".optType").val() === "radio" || $(this).find(".optType").val() === "select") {
$(this).find(".optBlock").show();
$(".optInput").tagsinput('refresh');
} else {
$(this).find(".optBlock").hide();
}
});

You are passing $(".optType").val() instead of selector, In the event handler test the selected value and use DOM relationship to traverse and target desired element.
$(repeatBlock).on('change', '.optType', function (e) {
e.preventDefault();
var val = $(this).val()
if (val === "radio" || val === "select") {
$(this).closest('tr').find(".optBlock").show();
$(this).closest('tr').find(".optBlock").find(".optInput").tagsinput('refresh');
} else {
$(this).closest('tr').find(".optBlock").hide();
}
});
//****Repeat form field block****
var repeatBlock = "#tbody";
var repeatText = '<tr class="trRepeat">\n\
<td>\n\
<select class="optType" name="formOptionType[]">\n\
<option value="">-------------------------------------</option>\n\
<option value="text">Text</option>\n\
<option value="textarea">Textarea</option>\n\
<option value="select">Select Options (Dropdown)</option>\n\
<option value="radio">Radio Buttons</option>\n\
<option value="checkbox">Checkbox</option>\n\
</select>\n\
<div class="optBlock" style="display:none">\n\
<label>Options:</label><br>\n\
<input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput"/>\n\
</div>\n\
</td>\n\
<td><label><input type="checkbox" name="fieldRequired[]"/> Required</label></td>\n\
<td><a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">\n\
<span class="glyphicon glyphicon-remove"></span></a>\n\
</td></tr>';
$("#btn-addfield").click(function(e) {
e.preventDefault();
$(repeatBlock).append(repeatText);
});
$(repeatBlock).on('click', '.removeField', function(e) {
e.preventDefault();
$(this).parent().parent().remove();
});
$(repeatBlock).on('change', '.optType', function(e) {
e.preventDefault();
var val = $(this).val()
if (val === "radio" || val === "select") {
$(this).closest('tr').find(".optBlock").show();
//$(this).closest('tr').find(".optBlock").find(".optInput").tagsinput('refresh');
} else {
$(this).closest('tr').find(".optBlock").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn-addfield">Addfield</button>
<table>
<tbody id="tbody"></tbody>
</table>

Wrap all your input in td inside a otpBlock
<tr class="trRepeat">
<td>
<select class="optType" name="formOptionType[]">
<option value="">-------------------------------------</option>
<option value="text">Text</option>
<option value="textarea">Textarea</option>
<option value="select">Select Options (Dropdown)</option>
<option value="radio">Radio Buttons</option>
<option value="checkbox">Checkbox</option>
</select>
<div class="optBlock" style="display:none">
<label>Options:</label><br>
<input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput" />
</div>
</td>
<td>
<div class="optBlock" style="display:none">
<label><input type="checkbox" name="fieldRequired[]"/> Required</label>
</div>
</td>
<td>
<div>
<a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">
<span class="glyphicon glyphicon-remove"></span>Remove</a>
</div>
</td>
</tr>
Use the following JS
//****Show input field when dropdown/radio is selected****
$(repeatBlock).on('change', ".optType", function(e) {
e.preventDefault();
var type = $(this).val(); //Fetch the input type
var container = $(this).closest('tr'); // Get the closest container
container.find('.optBlock').hide(); // Hide all optBlock
container.find('input').filter('[type=' + type + ']').closest('.optBlock').show(); // Show optBlock containing input of type.
});
To Remove
$(repeatBlock).on('click', '.removeField', function(e) {
e.preventDefault();
$(this).closest('tr').remove(); // select the closest tr
});
SNIPPET
var repeatBlock = "#tbody";
var repeatText = '<tr class="trRepeat">\n\
<td>\n\
<select class="optType" name="formOptionType[]">\n\
<option value="">-------------------------------------</option>\n\
<option value="text">Text</option>\n\
<option value="textarea">Textarea</option>\n\
<option value="select">Select Options (Dropdown)</option>\n\
<option value="radio">Radio Buttons</option>\n\
<option value="checkbox">Checkbox</option>\n\
</select>\n\
<div class="optBlock" style="display:none">\n\
<label>Options:</label><br>\n\
<input class="optInput" type="text" name="fieldOptions[]" data-role="tagsinput" />\n\
</div>\n\
</td>\n\
<td>\n\
<div class="optBlock" style="display:none">\n\
<label><input type="checkbox" name="fieldRequired[]"/> Required</label></div></td>\n\
<td><div class=""><a href="javascript:void(0)" class="removeField" style="color:red" title="Remove this field">\n\
<span class="glyphicon glyphicon-remove"></span>Remove</a>\n\
</div></td>\
</tr>';
$("#btn-addfield").click(function(e) {
e.preventDefault();
$(repeatBlock).append($(repeatText));
});
$(repeatBlock).on('click', '.removeField', function(e) {
e.preventDefault();
$(this).closest('tr').remove();
});
//****Show input field when dropdown/radio is selected****
$(repeatBlock).on('change', ".optType", function(e) {
e.preventDefault();
var type = $(this).val();
var container = $(this).closest('tr');
container.find('.optBlock').hide();
container.find('input').filter('[type=' + type + ']').closest('.optBlock').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody id="tbody"></tbody>
</table>
<button id="btn-addfield">ADD</button>

Multiply Cell[2] cell[3] in all the rows. Cell[2]*Cell[3]. Both the cells are Dropboxes

GPAcalculator. So I need to multiply the cells[2] and cell[3] and then add the results. But the both the cells are dropboxes. So how to I get the id of the dropbox in cell[2] and cell[3] of the same row. Note: Adding rows dynamically is allowed.
function multiplyadd() {
var tbody = document.getElementById("gpatable");
var answer = 0,
answer1 = 0;
for (var i = 0; i < tbody.rows.length; i++) {
var row = tbody.rows[i + 1];
var idd = document.getElementById("gpatable").rows[i + 1].cells[2].id;
var strUser = idd.options[idd.selectedIndex].value;
// var credits = row.cells[2].childNodes[0].options[selectedIndex].value;
var credits = parseInt(strUser);
var id1 = document.getElementById(row.cells[3].childNodes[0]);
var grades = parseInt(id1);
// var grades = row.cells[3].childNodes[0].options[selectedIndex].value;
var answer1 = (Number(credits) * Number(grades)).toFixed(3);
answer = answer + answer1;
}
alert(answer);
}
<table id="gpatable" class="table col-md-8 offset-md-2">
<thead class="bg-faded">
<tr>
<th>#</th>
<th width="370px">Course Name</th>
<th>Credits</th>
<th>Grades</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" id="one" value="1">1</th>
<td class="td"><input type="text" name="subname" class="form-control col-md-8"></td>
<td class="td">
<select onchange="updatecreditarray(this.id);" id="select_credit" class="custom-select">
<option selected>-</option>
<option value="1">1.00</option>
<option value="2">2.00</option>
<option value="3">3.00</option>
<option value="4">4.00</option>
</select>
</td>
<td class="td">
<select onchange="updategradearray(this.id);" id="select_grades" class="custom-select">
<option selected>-</option>
<option value="4">A+</option>
<option value="3.75">A</option>
<option value="3.5">A-</option>
<option value="3.25">B+</option>
<option value="3">B</option>
<option value="2.75">B-</option>
<option value="2.5">C+</option>
<option value="2.25">C</option>
<option value="2">C-</option>
<option value="0">F</option>
</select>
</td>
</tr>
</tbody>
</table>
<div class=" row col-md-8 offset-md-2" style="padding:0;">
<button title="Add course" type="button" onclick="addrow();" class="btn btn-secondary col-md-1 col-sm-5 col-xs-12" id="addcourse" name="addcourse"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button title="Remove course" type="button" onclick="subrow();" class="btn btn-secondary col-md-1 col-sm-5 col-xs-12" id="subcourse" name="addcourse"><i class="fa fa-minus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-secondary col-md-3 col-sm-5 col-xs-12" id="calcdown" name="addcourse">Calculate & Download <i class="fa fa-download" aria-hidden="true"></i></button>
<button type="button" onclick="calculate();" class="btn btn-primary col-md-2 offset-md-5 col-sm-4 col-xs-12" id="calc" name="addcourse">Calculate <i class="fa fa-calculator" aria-hidden="true"></i></button>

You need to get all elements with class name custom-select. getElementsByClassName will return an array with 2 elements. Now you can access specific values by index.
var dd = document.getElementsByClassName('custom-select'); //this will get elements with class custom-select
var idxc = dd[0].options[dd[0].selectedIndex].value; // this will get Credits element value
var idxg = dd[1].options[dd[1].selectedIndex].value; // this will get Grade element value
idxc will have Credits value while idxg will have Grade value.
EDIT:
To sum them all you need:
document.getElementById("calc").addEventListener("click", function() {
var dd = document.getElementsByClassName('custom-select');
var sum = 0;
if (dd) { // if custom-select element found
for (var i = 0; i < dd.length - 1; i = i + 2) {
if (!isNaN(dd[i].options[dd[i].selectedIndex].value) && !isNaN(dd[i + 1].options[dd[i + 1].selectedIndex].value)) {
sum += dd[i].options[dd[i].selectedIndex].value * dd[i + 1].options[dd[i + 1].selectedIndex].value;
} else {
console.log("ERR: Please select all values");
i = dd.length; // break loop
sum = 0; // in case of error
}
}
}
console.log(sum);
}, false);
fiddle DEMO

JQuery: Calculation & Variable is not Displaying When Checkbox Checked

Still learning JQuery. Still new to JQuery in fact. Trying to code is:
When the an items checkbox is checked, it calculates the service fee times years. then add the license fee to it. Finally it takes the total and times the quantity, which in then creates the item_cost.
If more than one item is checked, it will also calculate the item_cost and adds each checked item's cost, creating a total_item_cost. And, it will add each checked item's training hours, creating a total_training_hours.
Once item is done calculating, it will then display the item name, years, quantity, training hours, and total cost of each item that is checked at the bottom in the table. It will also display another table with total training hours and the the total cost of all items.
I have coded below but cannot seem to get the items to show in the table.
<script>
$(document).ready(function(){
//First obtaining indexes for each checkbox that is checked
$('input[id^=item_add]').change(function(){
// get checkbox index
var index = $(this).attr('id').replace('item_add','');
//hide tables until box is checked
$('table[id^=add_item_here]').hide();
$('table[id^=add_totals_here]').hide();
//If checkbox is checked, show tables, calculate item cost, get variables, calculate total cost, & calculate total training hours
$('input:checkbox').change(function(){
//If check box is check do...
if($(this).is(':checked')){
// Show totals tables
$('#add_item_here').show();
$('#add_totals_here').show();
// start at 0 for item_cost
var item_cost = 0;
var total_cost = 0;
$('input:checkbox:checked').each(function(){
// Calculating item cost for just that one checkbox
item_cost+=parseInt($('#servicefee'+index).val());
item_cost*=parseInt($('#yrs'+index).val());
item_cost+=parseInt($('#licensefee'+index).val());
item_cost*=parseInt($('#qty'+index).val());
// Get hidden variables to use for calculation and tables.
var item = $('#item'+index).val();
var traininghrs = parseInt($('#traininghrs'+index).val());
var qty = parseInt($('#qty'+index).val());
var yrs = parseInt($('#yrs'+index).val());
} else {
//if not checked keep tables hidden
$('#add_item_here').hide();
$('#add_totals_here').hide();
}
// start at 0 for total_costs
var total_cost = item_cost;
//Add item_cost with other item_costs to calculate total_cost
$('input:checkbox:checked').each(function(){
total_cost+= item_cost;
}
// start at 0 for total training hours
var total_training = 0;
//Add trianing hours with other training hours to calculate total_training
$('input:checkbox:checked').each(function(){
total_training+=parseInt($('#traininghrs'+index).val());
}
});
//Display each item that is checked into a table
$('#add_item_here tr:last').append('<td>' + item +'</td><td>' + yrs +'</td><td>' + qty +'</td><td>' + traininghrs + '</td><td>'+ item_cost + '</td></tr><tr>');
//Display totals into table row into a table
$('#add_totals_here tr:last').append('<td colspan=3 ></td><td>' + total_training + '</td><td>'+ total_cost + '</td></tr><tr>');
});
// Quantity change, if someone changes the quantity
$('#qty'+index).change(function(){
$('input:checkbox').trigger('change');
});
// Years change, if someone changes the years
$('#yrs'+index).change(function(){
$('input:checkbox').trigger('change');
});
}
}
</script>
Need to have each items and their details shown in a table and then need to thave a total table. So far the table format to display looks like:
<table id="add_item_here" style="width:98%;">
<tr><td></td></tr>
</table>
<table id="add_totals_here" style="width:98%;">
<tr><td></td></tr>
</table>
As requested, below is the HTML Form itself.
<form id="myForm" method="post" class="price-quote-form" action="#" >
<div class="tx-row" style="width:100%; float:left; clear:right;">
<div class="tx-column tx-column-size-2-3" style="float:left; margin-top:-20px; ">
<label>
<strong>Jurisdiction / Organization:</strong> <span style="font-size:10px; color:#ff0000;">(required)</span><br />
<input style= "width:90%; height:35px; font-size:18px; border: 1px #396ba5 solid;" type="text" name="jurisdiction" required>
</label>
</div>
<div class="tx-column tx-column-size-1-3" style="float:left; margin-top:-20px; ">
<label>
<strong style="font-size:14px;">State:</strong> <span style="font-size:10px; color:#ff0000;">(required)</span><br />
<select style= "width:90%; height:35px; font-size:18px; border: 1px #396ba5 solid;" id="state" name="state" required>
<option value="" >Select State</option>
<option value="IlIaNd" >Iowa</option>
<option value="IlIaNd" >Illinois</option>
<option value="Minnesota" >Minnesota</option>
<option value="Missouri" >Missouri</option>
<option value="Nebraska" >Nebraska</option>
<option value="IlIaNd" >North Dakota</option>
<option value="SouthDakota" >South Dakota</option>
</select>
</label>
</div>
</div>
<script>
$(document).ready(function(){
$("#state").change(function(){
$(this).on('change', function() {
if(this.value =="IlIaNd"){
$(".box").not(".IlIaNd").hide();
$(".IlIaNd").show();
}else if(this.value =="Minnesota"){
$(".box").not(".Minnesota").hide();
$(".Minnesota").show();
}else if(this.value =="Missouri"){
$(".box").not(".Missouri").hide();
$(".Missouri").show();
}else if(this.value =="Nebraska"){
$(".box").not(".Nebraska").hide();
$(".Nebraska").show();
}else if(this.value =="SouthDakota"){
$(".box").not(".SouthDakota").hide();
$(".SouthDakota").show();
}else{
$(".box").hide();
}
});
}).change();
});
</script>
<div style="width: 100%; float:left; clear:both; height:25px;" > </div>
<div style="border-bottom: 1px solid #cccccc; width: 100%; float:left; clear:both;" > </div>
<div style="width: 100%; float:left; clear:both; height:25px;" > </div>
<div style="width: 100%; float:left; clear:both;" class="IlIaNd box">
<?php IlIaNd_Price_Quote_Form() ?>
</div>
<div style="width: 100%; float:left; clear:both;" class="Minnesota box" >
<p>test 2</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="Missouri box">
<p>test 3</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="Nebraska box" >
<p>test 4</p>
</div>
<div style="width: 100%; float:left; clear:both;" class="SouthDakota box">
<p>test 5</p>
</div>
<center>
<table id="add_item_here" style="width:98%;">
<tbody>
<tr><td>Item</td><td>Years</td><td>Quantity</td><td>Training Hours</td><td>Total Item Cost</td></tr>
</tbody>
</table>
</center>
<center>
<table id="add_totals_here" style="width:98%;">
<tbody>
<tr><td cospan=3></td><td>Total Cost</td></tr>
</tbody>
</table>
</center>
</form>
Here is the PHP Portion of the form, which I am grabbing the items and pricing from a database, and then create checkboxes with the item name, then I have the prices of both fees below it. And I also have a drop down on either how many years and / or quantity.
if (pg_num_rows($result) > 0){
echo "<div class=\"tx-row\" style=\width:100%; clear:both; \" > <div style=\"width: 100%; float:left; clear:both; height:25px;\" > </div>";
while ($row = pg_fetch_object($result)){
$contractid = $row->id;
$item = $row->descr;
$license_fee = $row->license;
$service_fee = $row->service;
$hours = $row->training;
echo "<div class=\"tx-column tx-column-size-1-3\" >
<div id='item".$row->contractid."' style='width:100%;'>
<div style='width:10%; float:left;'>
<input style='height:25px; width:25px;' type='checkbox' id='item_add".$row->id."' name='item_add' value='add' />
</div>
<div style='width:90%; float:left;'>
<p style='width:115%;'><strong>$item</strong> <br /><span style='font-size:10px;'>Service Fee: $$service_fee | License Fee: $$license_fee</span></p>";
if ($contractid == "8" || $contractid == "10" ){
echo "<div style='width:100%; margin-top:-20px;'>
<div style='width:50%; float:left;'>
<span style='font-size:12px;'>Years: </span><select style='height:18px;' name='yrs' id='yrs".$row->id."'>
<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>
</select>
</div>
<div style='width:50%; float:left;'>
<span style='font-size:12px;'>Quantity: </span><select name='qty' id='qty".$row->id."' style='height:18px;'>
<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>
</select>
</div>
<input type='hidden' name='item' id='item".$row->id."' value='".$row->descr."'>
<input type='hidden' name='servicefee' id='servicefee".$row->id."' value='$service_fee'>
<input type='hidden' name='licensefee' id='licensefee".$row->id."' value='$license_fee'>
<input type='hidden' name='traininghrs' id='traininghrs".$row->id."' value='$hours'>
</div>
<div style='width:100%; height:25px; clear:both; float:left;'></div>";
} else {
echo "<div style='width:100%; margin-top:-20px;'>
<span style='font-size:12px;'>Years: </span><select name='yrs' id='yrs".$row->id."' style='height:18px;'>
<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>
</select>
<input type='hidden' name='Qty' id='qty".$row->id."' value='1' >
<input type='hidden' name='item' id='item".$row->id."' value='".$row->descr."'>
<input type='hidden' name='servicefee' id='servicefee' value='".$row->service."'>
<input type='hidden' name='licensefee' id='licensefee".$row->id."' value='".$row->license."'>
<input type='hidden' name='traininghrs' id='traininghrs".$row->id."' value='".$row->training."'>
</div>
<div style='width:100%; height:25px; clear:both; float:left;'></div>";
}
echo "</div>";
echo "</div> ";
echo "</div>";
}
echo "</div>";
}
Hope adding the php and the html form helps anyone who can solve this out.
Here is the fiddle
https://jsfiddle.net/e9mmn55k/5/

$(document).ready(function(){
$('table[id^=add_item_here]').hide();
$('table[id^=add_totals_here]').hide();
//First obtaining indexes for each checkbox that is checked
$('input[name=item_add]').change(function(){
var index = this.id.replace('item_chk','');
if($(this).is(':checked')){
AddNewItem(index);
}
else{
RemoveItem(index);
}
CalculateTotals();
});
function AddNewItem(index){
// Get hidden variables to use for calculation and tables.
var item = $('#item_chk'+index).parent().text().trim();
var traininghrs = parseInt($('#traininghrs'+index).val());
var qty = parseInt($('#qty'+index).val());
var yrs = parseInt($('#yrs'+index).val());
var item_cost = 0;
// Calculating item cost for just that one checkbox
item_cost+=parseInt($('#servicefee'+index).val());
item_cost*=parseInt($('#yrs'+index).val());
item_cost+=parseInt($('#licensefee'+index).val());
item_cost*=parseInt($('#qty'+index).val());
var traininghrs = parseInt($('#traininghrs'+index).val());
//Display each item that is checked into a table
$('#add_item_here tr:last').after('<tr id="row_id'+index + '"><td>' + item +'</td><td>' + yrs +'</td><td>' + qty +'</td><td>' + traininghrs + '</td><td>'+ item_cost + '</td></tr>');
}
function RemoveItem(index){
$('table#add_item_here tr#row_id'+index).remove();
}
function CalculateTotals(){
var total_cost = 0;
var total_training = 0;
$('input:checkbox:checked').each(function(){
var index = this.id.replace('item_chk','');
var item_cost = 0;
// Calculating item cost for just that one checkbox
item_cost+=parseInt($('#servicefee'+index).val());
item_cost*=parseInt($('#yrs'+index).val());
item_cost+=parseInt($('#licensefee'+index).val());
item_cost*=parseInt($('#qty'+index).val());
var traininghrs = parseInt($('#traininghrs'+index).val());
total_cost +=item_cost;
total_training +=traininghrs;
});
if(total_cost > 0 || total_training > 0) {
$('#add_totals_here tr:has(td)').remove();
$('#add_totals_here tr:has(th)').after('<tr><td colspan="3">' + total_training + '</td><td>'+ total_cost + '</td></tr>');
$('#add_item_here').show();
$('#add_totals_here').show();
}
else{
$('table[id^=add_item_here]').hide();
$('table[id^=add_totals_here]').hide();
}
}
// Quantity change, if someone changes the quantity
$('select[name=qty]').change(function(){
var index = this.id.replace('qty','');
if($("#item_chk"+index).is(':checked')){
RemoveItem(index);
AddNewItem(index);
CalculateTotals();
}
});
// Years change, if someone changes the years
$('select[name=yrs]').change(function(){
var index = this.id.replace('yrs','');
if($("#item_chk"+index).is(':checked')){
RemoveItem(index);
AddNewItem(index);
CalculateTotals();
}
});
})
td {
text-align: left;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="Calculate.js"></script>
<body>
<div style="width: 100%; float:left; clear:both;" class="IlIaNd box">
<div id="item11" style="width:50%;">
<div style="width:50%; float:left;">
<input style="height:25px; width:25px;" type="checkbox" id="item_chk11" name="item_add" value="add" /> Adance Search HTML
</div>
<div style="width:50%; float:left;">
<div style="width:50%; float:left;">
<span style="font-size:12px;">Years: </span><select style="height:18px;" name="yrs" id="yrs11">
<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>
</select>
</div>
<div style="width:50%; float:left;">
<span style="font-size:12px;">Quantity: </span><select name="qty" id="qty11" style='height:18px;'>
<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>
</select>
</div>
<input type="hidden" name="itemdescr" id="itemdescr11" value="Adance Search HTML">
<input type="hidden" name="servicefee" id="servicefee11" value="1000">
<input type="hidden" name="licensefee" id="licensefee11" value="3000">
<input type="hidden" name="traininghrs" id="traininghrs11" value="8">
</div>
<div style="width:100%; height:25px; clear:both; float:left;"></div>
</div>
<div id="item12" style="width:50%;">
<div style="width:50%; float:left;">
<input style="height:25px; width:25px;" type="checkbox" id="item_chk12" name="item_add" value="add" /> Adance Search PHP
</div>
<div style="width:50%; float:left;">
<div style="width:50%; float:left;">
<span style="font-size:12px;">Years: </span><select style="height:18px;" name="yrs" id="yrs12">
<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>
</select>
</div>
<div style="width:50%; float:left;">
<span style="font-size:12px;">Quantity: </span><select name="qty" id="qty12" style='height:18px;'>
<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>
</select>
</div>
<input type="hidden" name="itemdescr" id="item_descr12" value="Adance Search PHP">
<input type="hidden" name="servicefee" id="servicefee12" value="1500">
<input type="hidden" name="licensefee" id="licensefee12" value="1000">
<input type="hidden" name="traininghrs" id="traininghrs12" value="2">
</div>
<div style="width:100%; height:25px; clear:both; float:left;"></div>
</div>
<div id="item14" style="width:50%;">
<div style="width:50%; float:left;">
<input style="height:25px; width:25px;" type="checkbox" id="item_chk14" name="item_add" value="add" /> Adance Search WWW
</div>
<div style="width:50%; float:left;">
<div style="width:50%; float:left;">
<span style="font-size:12px;">Years: </span><select style="height:18px;" name="yrs" id="yrs14">
<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>
</select>
</div>
<div style="width:50%; float:left;">
<span style="font-size:12px;">Quantity: </span><select name="qty" id="qty14" style='height:18px;'>
<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>
</select>
</div>
<input type="hidden" name="itemdescr" id="item_descr14" value="Adance Search WWW">
<input type="hidden" name="servicefee" id="servicefee14" value="0">
<input type="hidden" name="licensefee" id="licensefee14" value="250">
<input type="hidden" name="traininghrs" id="traininghrs14" value="0">
</div>
<div style="width:100%; height:25px; clear:both; float:left;"></div>
</div>
<div id="item15" style="width:50%;">
<div style="width:50%; float:left;">
<input style="height:25px; width:25px;" type="checkbox" id="item_chk15" name="item_add" value="add" /> Adance Search HTTP
</div>
<div style="width:50%; float:left;">
<div style="width:50%; float:left;">
<span style="font-size:12px;">Years: </span><select style="height:18px;" name="yrs" id="yrs15">
<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>
</select>
</div>
<div style="width:50%; float:left;">
<span style="font-size:12px;">Quantity: </span><select name="qty" id="qty15" style='height:18px;'>
<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>
</select>
</div>
<input type="hidden" name="itemdescr" id="item_descr15" value="Adance Search HTTP" >
<input type="hidden" name="servicefee" id="servicefee15" value="1000">
<input type="hidden" name="licensefee" id="licensefee15" value="0">
<input type="hidden" name="traininghrs" id="traininghrs15" value="10">
</div>
<div style="width:100%; height:25px; clear:both; float:left;"></div>
</div>
</div>
<center>
<table id="add_item_here" style="width:98%;" border="1">
<tbody>
<tr><th>Item</th><th>Years</th><th>Quantity</th><th>Training Hours</th><th>Total Item Cost</th></tr>
</tbody>
</table>
</center>
<center>
<table id="add_totals_here" style="width:98%;" border="1">
<tbody>
<tr><th colspan="3">Training Hours</th><th>Total Cost</th></tr>
</tbody>
</table>
</center>
</body>
</html>

Ok... Finally got the total hours and cost working on my price quote calculator...
function CalculateTotals(){
var total_cost = 0;
var total_training = 0;
$('input:checkbox:checked').each(function(){
var index = this.id.replace('item_chk','');
var item_cost = 0;
// Calculating item cost for just that one checkbox
item_cost+=parseInt($('#servicefee'+index).val());
item_cost*=parseInt($('#yrs'+index).val());
item_cost+=parseInt($('#licensefee'+index).val());
item_cost*=parseInt($('#qty'+index).val());
var traininghrs = parseInt($('#traininghrs'+index).val());
total_cost +=item_cost;
total_training +=traininghrs;
});
if(total_cost > 0 || total_training > 0) {
$('#add_totals_here tr:last').children().remove();
$('#add_totals_here tr:last').after('<tr ><td colspan="3" style=\"width:66%;\">TOTALS:</td><td style=\"width:18%;\">' + total_training + '</td><td style=\"width:16%;\">$'+ total_cost + '</td></tr>');
$('#add_item_here').show();
$('#add_totals_here').show();
}
else{
$('table[id^=add_item_here]').hide();
$('table[id^=add_totals_here]').hide();
}
To get the complete answer, feel free to email me... But wanna shout out to mbadeveloper. He helped me out a lot and helped me understand jquery a bit more. Thanks mbadeveloper.

getting the current status of bootstrap switch in a table

I implemented bootstrap switch and changed the status to Active and Inactive. I wanted to capture the status of bootstrap switch after toggling in a table. But whenever I try to capture the status, it just shows On always. When bootstrap switch is toggled as Inactive, status should be captured as off, but it isn't happening.
JSFiddle link: https://jsfiddle.net/4erLr6ak/
HTML CODE:
<p class="lead">Multiple prices</p>
<div class="col-md-2">
<input type="text" id="type" name="type" value="" class="login password-field form-control" placeholder="Type of ticket" />
</div>
<div class="col-md-2">
<select class="form-control" id="multi">
<option value="USD">$ USD</option>
<option value="SGD">$ SGD</option>
<option value="EUR">€ EUR</option>
<option value="AUD">$ AUD</option>
<option value="JPY">¥ JPY</option>
<option value="CHN">¥ CHN</option>
<option value="THB">฿ THB</option>
<option value="MYR">RM MYR</option>
</select>
</div>
<div class="col-md-2">
<input type="number" id="ticketprice" name="price" value="" class="login password-field form-control" placeholder="Price of ticket" />
</div>
<div class="col-md-2">
<input type="checkbox" name="my-checkbox" data-on-text="Active" data-off-text="Inactive" checked>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-primary" id="confirm">Confirm</button>
</div>
<table class="table table-bordered multtable" style="margin-top: 7%;">
<thead>
<tr>
<th>Type of ticket</th>
<th>Price of ticket</th>
<th>Status</th>
</tr>
</thead>
<tbody></tbody>
</table>
Javascript code:
$('#confirm').click(function(e) {
var type = $('#type').val();
var currency = $("#multi option:selected").val();
var mprice = $('#ticketprice').val();
var status = $("[name='my-checkbox']").val();
$('.multtable').append('<tr><td>' + type + '</td><td>' + currency + ' ' + mprice + '</td><td>' + status + '</td></tr>');
/*Clear the values in text boxes after adding to table*/
document.getElementById("type").value = "";
document.getElementById("ticketprice").value = "";
console.log(e);
})
$("[name='my-checkbox']").bootstrapSwitch();

to check if the checkbox is checked use:
var status = $("[name='my-checkbox']").is(':checked');
instead of:
var status = $("[name='my-checkbox']").val();
you can use the true/false output to set your value accordingly

Javascript to repeat div containing form by an amount of times as selected by user from dropbox

I'm trying to get the DIV "Passengers" to clone itself based on the value selected in "numpass".
This is only a snippet of the total code as it is a few hundred lines long as there are a lot of details. I have tried multiple ways of doing this and so far nothing has worked. I'm relatively new to Javascript, so any explanation with a reply would be good.
HTML
<table>
<tr>
<td class="form_label">Number of Passengers</td>
<td>
<select id="numpass" name="numpass" class="form_e"/>
<option value="1" selected="selected">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></td>
</tr>
</table>
<div id="passenger">
<div class="form_head">Passenger Details</div>
<br />
<table width="100%">
<tr>
<td class="form_label">First Name: <input type="text" name="cust_fname[]" class="form_f"/> Last Name: <input type="text" name="cust_lname[]" class="form_f"/> Phone: <input type="text" name="phone[]" class="form_g" /> Weight (kg): <input type="text" name="weight[]" class="form_a" /></td>
</tr>
</table>

Consider using a for loop:
$('.numPax').onChange(function(){
// Clear all but the first (consider if they change the value twice)
$('.passenger').not(':first').remove();
var currentNumPax = $('.passenger').length;
var newNumPax = currentNumPax+1;
var lastRepeatDiv = $('.passenger').last();
for(i = 0; i < currentNumPax; i++) {
var newDiv = lastRepeatingDiv.clone();
newDiv.insertAfter(lastRepeatingDiv);
newDiv.find("input").each(function (index, input) {
input.name = input.name.replace("_" + currentCount, "_" + i);
});
});
}

Here is what I came up with.
Javascript
$('#numPax').change(function() {
$('.passenger').not(':first').remove(); //remove all but the first
var currentNumPax = $(this).val(); // get the value from the select
var newDiv, i;
for(i = 0; i < currentNumPax; i++) {
newDiv = $('.passenger').first().clone();
$('#container').append(newDiv);
}
});
HTML
<table>
<tr>
<td class="form_label">Number of Passengers</td>
<td>
<select id="numPax" name="numPax" class="form_e" >
<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>
</select>
</td>
</tr>
</table>
<div id="container">
<div class="passenger">
<div class="form_head">Passenger Details</div>
<br />
<table width="100%">
<tr>
<td class="form_label">First Name: <input type="text" name="cust_fname_1" class="form_f"/> Last Name: <input type="text" name="cust_lname_1" class="form_f"/> Phone: <input type="text" name="phone_1" class="form_g" /> Weight (kg): <input type="text" name="weight_1" class="form_a" />
</td>
</tr>
</table>
</div>
</div>