onchecked Multiple checkbox elements adding / deducting to total amount in plain javascript

This is a very simple example of how to deal when you have MULTIPLE CHECKBOX with an AMOUNT to be ADDED to the GRAND TOTAL. Also to be displayed on right table rows

There is a CATCH --> users might CHECK & UN-CHECK in such case there is a need to ADD & SUBSTRACT functionality as well as updating TABLE on-the-right with description.

HTML Code

<style type="text/css"> #rfare { width: 100%; } #rfare td { width: 50%; padding: 6px; border-bottom: #000 1px dashed; } #ytotal { border-top: red 1px solid !important; border-bottom: red 1px double !important; } </style> <div id="ldiv"> <label>Base Fare : </label> <input type="text" name="ifare" id="ifare" value="102.5"><br> <label>Tips : </label> <input type="text" name="tips" id="tips" value="20.25"><br> <h3>Additional Charges for Special Rides</h3> <input type="checkbox" name="ostation" id="ostation" value="200" onclick='handleChange(this);' data-chk="Out Station Ride Fees"> Out of State Pickup & Drop-Off Fees - $200+<br> <input type="checkbox" name="sevent" id="sevent" value="50" onclick='handleChange(this);' data-chk="Sporting Event Pickup / Drop-Off Fee" > Sports Stadium Pickup / Drop-Off - $50 Fees<br> <input type="checkbox" data-chk="Wedding Party Ride Fee" name="wevent" id="wevent" value="50" onclick='handleChange(this);' > Wedding Party Pickup or Drop-Off Fees - $50<br> <input type="checkbox" name="ometro" id="ometro" data-chk="Out of DFW Metroplex Pickup / Drop-Off Fee" value="40" onclick='handleChange(this);' > Out of DFW Metroplex Pickup / Drop-Off Fees - $40<br><br> </div> <div id="ldiv"> <table id="rfare"> <tr><td colspan="2"></td></tr> <tr id="tkt" style="font-size: 18px; font-weight: bold;"> <td>Type of Fleet</td> <td align="right"><?php echo strtoupper($booknow["cftype"]); ?></td> </tr> <tr id="tkt" style="font-size: 18px; font-weight: bold;"> <td>Fare</td> <td align="right">$ <?php echo number_format($booknow["ifare"],2); ?></td> </tr> <tr id="ytips"></tr> <tr id="yostation"></tr> <tr id="ysevent"></tr> <tr id="ywevent"></tr> <tr id="yometro"></tr> <tr id="ytotal"></tr> <tr> <td>Approx Distance</td> <td align="right"><?php echo $booknow["imiles"]; ?> Miles</td> </tr> <tr></tr> </table> </div>

JAVASCRIPT - CODE

let ifare = document.getElementById("ifare").value; let gtips = document.getElementById("tips").value; let tot =(+ifare + +gtips); let ostn; let lbl; document.getElementById("ytips").innerHTML = '<td style="font-size: 16px; font-weight: bold;">Driver Gratuity</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + gtips + '</td>'; function handleChange(chkbox){ if(chkbox.checked == true){ ostn = chkbox.value; tot += +ostn; //alert('this value $' + tot); lbl = chkbox.getAttribute('data-chk'); qname = 'y' + chkbox.name; document.getElementById(qname).innerHTML = '<td style="font-size: 16px; font-weight: bold;">' + lbl + '</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + ostn + '</td>'; document.getElementById('ytotal').innerHTML = '<td style="font-size: 16px; font-weight: bold;">Total Fare</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + tot + '</td>'; //alert(lbl + ' : ' + qname + ' ===== $' + ostn); }else{ //document.getElementById("submit").setAttribute("disabled", "disabled"); // ostn = 0; ostn = chkbox.value; qname = 'y' + chkbox.name; tot += -ostn; //alert('this value $' + tot); document.getElementById(qname).innerHTML = ''; document.getElementById('ytotal').innerHTML = '<td style="font-size: 16px; font-weight: bold;">Total Fare</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + tot + '</td>'; } } document.getElementById('ytotal').innerHTML = '<td style="font-size: 16px; font-weight: bold;">Total Fare</td><td align="right" style="font-size: 16px; font-weight: bold;">$ ' + tot + '</td>';

Insert Multiple Checkbox Values in MySQL column Using PHP

This is how you can save values of a set of checkbox to an one variable to store the collective values of all checkboxes to one mysql column

<form action="" method="post" enctype="multipart/form-data"> <div style="width:200px;border-radius:6px;margin:0px auto"> <table border="1"> <tr> <td colspan="2">Select Technolgy:</td> </tr> <tr> <td>PHP</td> <td><input type="checkbox" name="techno[]" value="PHP"></td> </tr> <tr> <td>.Net</td> <td><input type="checkbox" name="techno[]" value=".Net"></td> </tr> <tr> <td>Java</td> <td><input type="checkbox" name="techno[]" value="Java"></td> </tr> <tr> <td>Javascript</td> <td><input type="checkbox" name="techno[]" value="javascript"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="submit" name="xsubmit"></td> </tr> </table> <?php if(isset($_POST["xsubmit"]{ $checkbox1=$_POST['techno']; $chk=""; foreach($checkbox1 as $chk1) { $chk .= $chk1.","; } } ?>

Add Multiple Checkbox and Dropdown to Total - Javascript

Very Simple, Try this...


<html> <head> </head> <body> <div id="container"><h1>Add-ons</h1> <input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR <br /> <input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR <br /> <input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR <br /> <input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR <br /> </div> <div> I want more add-ons <select id="more" name="more"> <option value="0">0</option> <option value="30">1</option> <option value="50">2</option> <option value="100">3</option> </select><br><br> <span id="span"></span><br><br> User total usage: <span id="usertotal"> </span> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function displayVals() { calcUsage(); var singleValues = $("#more").val(); $("#span").html("<b>more addons:</b> " + singleValues + ' QR'); } var $cbs = $('input[name="ch1"]'); function calcUsage() { var total = $("#more").val(); $cbs.each(function() { if (this.checked) total = parseInt(total) + parseInt(this.value); }); $("#usertotal").text(total + ' QR'); } $("select").change(displayVals); displayVals(); //For checkboxes $cbs.click(calcUsage); </script> </body> </html>​

Calculate Total Multiple Checkbox and Input Javascript

Very Simple...

<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> function totalIt() { var input = document.getElementsByName("product"); var ifare = document.getElementById('ifare').value; //document.getElementById("tfare").value = "$" + ifare.toFixed(2); var total = 0; for (var i = 0; i < input.length; i++) { if (input[i].checked) { total += parseFloat(input[i].value); var tfare = (parseFloat(ifare) + parseFloat(total)); document.getElementById("tfare").value = "$" + tfare.toFixed(2); //alert('ifare : $ ' + tfare); } } document.getElementById("total").value = "$" + total.toFixed(2); var tfare = ifare + document.getElementById("total").value; } </script> </head> <body> <form action="" id="theForm"> Based Fare : <input type="text" name="ifare" id="ifare" value="142.18" /><br> <fieldset> <legend> Fare Details </legend> <label> <input name="product" value="12.95" type="checkbox" id="p1" onclick="totalIt()"/> Toddler Seats $12.95 </label> <label> <input name="product" value="5.99" type="checkbox" id="p2" onclick="totalIt()"/> Airport Toll $5.99 </label> <label> <input name="product" value="1.99" type="checkbox" id="p3" onclick="totalIt()"/> Tax $1.99 </label> <label> <input name="product" value="19.99" type="checkbox" id="p4" onclick="totalIt()"/> Driver Tips $19.99 </label> <label> <input name="product" value="41.99" type="checkbox" id="p5" onclick="totalIt()"/> Fuel Surcharge $41.99 </label> <label> Total <input value="$0.00" readonly="readonly" type="text" id="total"/> <input value="$0.00" readonly="readonly" type="text" id="tfare"/> </label> </fieldset> <input value="Submit" type="submit"/> <input value="Reset" type="reset"/> </form> </body> </html>​

jQuery Ajax - Checkbox Load / Unload - External Page into DIV

Simple Bro / Sissy...

<input type="checkbox" name="rtrip" id="rtrip"> Need A Return-Trip? <script> $('#rtrip').click(function() { if($("#rtrip").checked){ $("#rxtrip1").load("p2p-rtrip.php"); } else { $("#rxtrip1").empty(); } }); </script>

Our New Delivery : NJ Metro Limo

Ajax Checkbox Load External Page

It is pretty simple to load external page in a div element on click checkbox

Do It yourself

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <input type="checkbox" id="isAgeSelected"/> Return Trip <div id="txtAge" style="display:none"></div> <script type="text/javascript"> $('#isAgeSelected').click(function() { $("#txtAge").toggle(this.checked); $("#txtAge").load("rtrip.php"); }); </script> </body> </html>

PHP Checkbox values to ARRAY and to UL LI list

I've been trying lately to store selected checkbox values to an Array and show them in UL and LI lists.

Here is how???

	 Sedan

     Stretch

     SUV

     Coach Bus

     Classic Stretch

     Hummer

     Party Limo

     Classic Stretch

     Passenger Van

     SUV Stretch

     Airport Stretch

    




	if(isset($_POST["csubmit"])){
		print_r($_POST['fleet']);	
		
		$arr = $_POST['fleet'];
		
		echo '
';
		foreach($arr as $key => $value):
			echo '
' . ucwords($value) . '
';
		endforeach;
		echo '
';		
	}

PHP Assign Checkbox Values to Array and to a Standard Variable

Oh Boy! I've banged my head, kicked mouse - cursed unfriendliness of these coding syntax and finally found a way.

What about it???

--- I Have 10 Checkboxes
--- Where only selected Checkbox values need to stored into an ARRAY
Once Checkbox values stored into an Array
--- Assign those values to a Standard PHP Variable

Here is HOW for your references:

	 Sedan

     Stretch

     SUV

     Coach Bus

     Classic Stretch

     Hummer

     Party Limo

     Classic Stretch

     Passenger Van

     SUV Stretch

     Airport Stretch

    

Wow! That's Simple isn't it??? Yeh, You Bet... ----------------------------------------------------- Bay Area Taxi