We Keep Coding

A function that works on an HTML page but not on the other one

I have a problem with the snippet below : everything works perfectly when I press the button on the 1st page. But it tells me that "secondPageItems" is not defined when I press the button on the 2nd page. (here every thing works fine because it's on the same HTML page)
Even stranger, if I put "secondPageItems" and "secondPageHiden" above "firstPageItems" and "firstPageHiden" on my JS sheet, the buttons on the 1st page doesn't work, but the buttons on the second page works fine :(
let firstPageItems = ["radioA", "radioB"];
let firstPageHiden = [hidenItemA1, hidenItemB1];
let secondPageItems = ["radioC", "radioD"];
let secondPageHiden = [hidenItemC1, hidenItemD1];
function Show(x) {
$(x).slideDown("fast");
}
function Hide(x) {
$(x).slideUp("fast");
}
function controlFn(a, b) {
document.getElementById(a+b).checked = true;
}
function control1(x, y) {
let z = "1";
for (i = 0; i < x.length; i++) {
controlFn(x[i], z);
Show(y[i]);
}
}
function control2(x, y) {
let z = "2";
for (i = 0; i < x.length; i++) {
controlFn(x[i], z);
Hide(y[i]);
}
}
function control3(x, y) {
let z = "3";
for (i = 0; i < x.length; i++) {
controlFn(x[i], z);
Hide(y[i]);
}
}
.hidenItem {
display: none;
}
<!-- First page: -->
<div>
<span>Control :</span>
<input id="controlItemAB1" type="button" onclick="control1(firstPageItems, firstPageHiden)" value="Items x1" />
<input id="controlItemAB2" type="button" onclick="control2(firstPageItems, firstPageHiden)" value="Items x2"/>
<input id="controlItemAB3" type="button" onclick="control3(firstPageItems, firstPageHiden)" value="Items x3"/>
</div>
<div>
<input id="radioA1" name="itemA" type="radio" onchange="Show(hidenItemA1)" />
<label for="radioA1">This is Item A1</label>
<input id="radioA2" name="itemA" type="radio" onchange="Hide(hidenItemA1)" />
<label for="radioA2">This is Item A2</label>
<input id="radioA3" name="itemA" type="radio" checked="checked" onchange="Hide(hidenItemA1)" />
<label for="radioA3">This is Item A3</label>
</div>
<div id="hidenItemA1" class="hidenItem"> This is shown only when Item A1 is checked</div>
<div>
<input id="radioB1" name="itemB" type="radio" onchange="Show(hidenItemB1)" />
<label for="radioB1">This is Item B1</label>
<input id="radioB2" name="itemB" type="radio" onchange="Hide(hidenItemB1)" />
<label for="radioB2">This is Item B2</label>
<input id="radioB3" name="itemB" type="radio" onchange="Hide(hidenItemB1)" checked="checked" />
<label for="radioB3">This is Item B3</label>
</div>
<div id="hidenItemB1" class="hidenItem"> This is shown only when Item B1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p/>
<p/>
<!-- Second page: -->
<div>
<span>Control :</span>
<input id="controlItemCD1" type="button" onclick="control1(secondPageItems, secondPageHiden)" value="Items x1" />
<input id="controlItemCD2" type="button" onclick="control2(secondPageItems, secondPageHiden)" value="Items x2"/>
<input id="controlItemCD3" type="button" onclick="control3(secondPageItems, secondPageHiden)" value="Items x3"/>
</div>
<div>
<input id="radioC1" name="itemC" type="radio" onchange="Show(hidenItemC1)"/>
<label for="radioC1">This is Item C1</label>
<input id="radioC2" name="itemC" type="radio" onchange="Hide(hidenItemC1)"/>
<label for="radioC2">This is Item C2</label>
<input id="radioC3" name="itemC" type="radio" checked="checked" onchange="Hide(hidenItemC1)"/>
<label for="radioC3">This is Item C3</label>
</div>
<div id="hidenItemC1" class="hidenItem"> This is shown only when Item C1 is checked</div>
<div>
<input id="radioD1" name="itemD" type="radio" onchange="Show(hidenItemD1)"/>
<label for="radioD1">This is Item D1</label>
<input id="radioD2" name="itemD" type="radio" onchange="Hide(hidenItemD1)"/>
<label for="radioD2">This is Item D2</label>
<input id="radioD3" name="itemD" type="radio" checked="checked" onchange="Hide(hidenItemD1)"/>
<label for="radioD3">This is Item D3</label>
</div>
<div id="hidenItemD1" class="hidenItem"> This is shown only when Item D1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ok so I found the problem.
I don't know why, probably something going on with jQuery, but when I changed
function Show(x) {
$(x).slideDown("fast");
}
Into :
function Show(x) {
$("#"+x).slideDown("fast");
}
(and same for Hide(x)).
And I added some "" for my hidenItemA1, ... , it solved my problem :)
So the final code would be :
let firstPageItems = ["radioA", "radioB"];
let firstPageHiden = ["hidenItemA1", "hidenItemB1"];
let secondPageItems = ["radioC", "radioD"];
let secondPageHiden = ["hidenItemC1", "hidenItemD1"];
function Show(x) {
$("#"+x).slideDown("fast");
}
function Hide(x) {
$("#"+x).slideUp("fast");
}
function controlFn(a, b) {
document.getElementById(a+b).checked = true;
}
function control1(x, y) {
let z = "1";
for (i = 0; i < x.length; i++) {
controlFn(x[i], z);
Show(y[i]);
}
}
function control2(x, y) {
let z = "2";
for (i = 0; i < x.length; i++) {
controlFn(x[i], z);
Hide(y[i]);
}
}
function control3(x, y) {
let z = "3";
for (i = 0; i < x.length; i++) {
controlFn(x[i], z);
Hide(y[i]);
}
}
.hidenItem{
display:none;
}
<!-- First page: -->
<div>
<span>Control :</span>
<input id="controlItemAB1" type="button" onclick="control1(firstPageItems, firstPageHiden)" value="Items x1" />
<input id="controlItemAB2" type="button" onclick="control2(firstPageItems, firstPageHiden)" value="Items x2"/>
<input id="controlItemAB3" type="button" onclick="control3(firstPageItems, firstPageHiden)" value="Items x3"/>
</div>
<div>
<input id="radioA1" name="itemA" type="radio" onchange="Show(hidenItemA1)" />
<label for="radioA1">This is Item A1</label>
<input id="radioA2" name="itemA" type="radio" onchange="Hide(hidenItemA1)" />
<label for="radioA2">This is Item A2</label>
<input id="radioA3" name="itemA" type="radio" checked="checked" onchange="Hide(hidenItemA1)" />
<label for="radioA3">This is Item A3</label>
</div>
<div id="hidenItemA1" class="hidenItem"> This is shown only when Item A1 is checked</div>
<div>
<input id="radioB1" name="itemB" type="radio" onchange="Show(hidenItemB1)" />
<label for="radioB1">This is Item B1</label>
<input id="radioB2" name="itemB" type="radio" onchange="Hide(hidenItemB1)" />
<label for="radioB2">This is Item B2</label>
<input id="radioB3" name="itemB" type="radio" onchange="Hide(hidenItemB1)" checked="checked" />
<label for="radioB3">This is Item B3</label>
</div>
<div id="hidenItemB1" class="hidenItem"> This is shown only when Item B1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p/>
<p/>
<!-- Second page: -->
<div>
<span>Control :</span>
<input id="controlItemCD1" type="button" onclick="control1(secondPageItems, secondPageHiden)" value="Items x1" />
<input id="controlItemCD2" type="button" onclick="control2(secondPageItems, secondPageHiden)" value="Items x2"/>
<input id="controlItemCD3" type="button" onclick="control3(secondPageItems, secondPageHiden)" value="Items x3"/>
</div>
<div>
<input id="radioC1" name="itemC" type="radio" onchange="Show(hidenItemC1)"/>
<label for="radioC1">This is Item C1</label>
<input id="radioC2" name="itemC" type="radio" onchange="Hide(hidenItemC1)"/>
<label for="radioC2">This is Item C2</label>
<input id="radioC3" name="itemC" type="radio" checked="checked" onchange="Hide(hidenItemC1)"/>
<label for="radioC3">This is Item C3</label>
</div>
<div id="hidenItemC1" class="hidenItem"> This is shown only when Item C1 is checked</div>
<div>
<input id="radioD1" name="itemD" type="radio" onchange="Show(hidenItemD1)"/>
<label for="radioD1">This is Item D1</label>
<input id="radioD2" name="itemD" type="radio" onchange="Hide(hidenItemD1)"/>
<label for="radioD2">This is Item D2</label>
<input id="radioD3" name="itemD" type="radio" checked="checked" onchange="Hide(hidenItemD1)"/>
<label for="radioD3">This is Item D3</label>
</div>
<div id="hidenItemD1" class="hidenItem"> This is shown only when Item D1 is checked</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

How can I set the value in a textbox on form load?

This is what I tried for setting the textbox values but it doesn't seem to be working. I want the textboxes to have the values in them when the page loads. the function is within the script tag.
function setMSRP()
{
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly"/>
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly"/>
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly"/>
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly"/>
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly"/>
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()"
</form>
</body>

You have some syntax errors in code. Look at the modified example below:
<html>
<head>
<script>
function setMSRP() {
var MSRP = "$29,120.00";
var destinationCharge = "$875.00";
var rebate = "-$10,000.00";
var taxes = "6%"
var titlesAndFees = "$209.00";
document.getElementById("txtMSRP").value = MSRP;
document.getElementById("txtDestinationCharge").value = destinationCharge;
document.getElementById("txtRebates").value = rebate;
document.getElementById("txtTaxes").value = taxes;
document.getElementById("txtElectricTitleAndFees").value = titlesAndFees;
}
</script>
</head>
<body onload="setMSRP()">
<form>
<h1>Calculate Focus Price</h1>
<hr/>
<label for="txtMSRP">MSRP:</label>
<input autofocus id="txtMSRP" type="text" readonly="readonly" />
<br/>
<label for="txtDestinationCharge">Destination Charge:</label>
<input type="text" id="txtDestinationCharge" readonly="readonly" />
<br/>
<label for="txtRebates">Rebates:</label>
<input type="text" id="txtRebates" readonly="readonly" />
<br/>
<label for="txtTaxes">Taxes:</label>
<input type="text" id="txtTaxes" readonly="readonly" />
<br/>
<label for="txtElectricTitleAndFees">Electric Title and Fees:</label>
<input type="text" id="txtElectricTitleAndFees" readonly="readonly" />
<br/>
<input type="button" id="btnCalculateTotal" onclick="calcTotal()">
</form>
</body>
</html>
I want the textboxes to have the values in them when the page loads.
You don't need JS for this:
<input id="txtMSRP" type="text" value="<your_value>" />

If you wanted placeholders inside the input[type=text], simply use
var textbox = document.querySelector("#textbox");
textbox.setAttribute("placeholder", "This is the Placeholder");
Or use the HTML Attribute to set the value/placeholder:
<input type="text" id="textbox" value="Hello" placeholder="Introductory Statement" />

Changing Submit Button from "button" to "submit" Broke My Google Apps Script

I used this to build a form in Google Apps that allows employees to fill out a form and attach a document that all feeds into a spreadsheet.
My issue now is I need to make certain fields required. I did so by adding the "required" attribute to those fields. That didn't work, so I realized I need to change my submit button from type="button" to type="submit," however, upon doing THAT...my form now doesn't work.
I can't find anything in any of the code that points to only type="button" working to submit the form.
I've included my code below, as well as a link to my sheet/script if anyone wants to poke around in there!
Code.gs
var submissionSSKey = '1zzRQwgXb0EN-gkCtpMHvMTGyhqrx1idXFXmvhj4MLsk';
var folderId = "0B2bXWWj3Z_tzTnNOSFRuVFk2bnc";
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob = theForm.myFile;
var folder = DriveApp.getFolderById(folderId);
var doc = folder.createFile(fileBlob);
// Fill in response template
var template = HtmlService.createTemplateFromFile('Thanks.html');
var name = template.name = theForm.name;
var email = template.email = theForm.email;
var brand = template.brand = theForm.brand;
var date = template.date = theForm.date;
var amount = template.amount = theForm.amount;
var split = template.split = theForm.split;
var manufacturer = template.manufacturer = theForm.manufacturer;
var pace = template.pace = theForm.pace;
var reason = template.reason = theForm.reason;
var category = template.category = theForm.category;
var subcategory = template.subcategory = theForm.subcategory;
var message = template.message = theForm.message;
var fileUrl = template.fileUrl = doc.getUrl();
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 13).setValues([[name, email,brand,date,amount,split,manufacturer,pace,reason,category,subcategory,message,fileUrl]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
Form.html
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
}
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//Toggle Secondary Categories
$(function() {
$('input[type="radio"]').click(function() {
if ($(this).attr("id") == "dealer") {
$(".box").not(".dealer").hide();
$(".dealer").show();
}
if ($(this).attr("id") == "online") {
$(".box").not(".online").hide();
$(".online").show();
}
if ($(this).attr("id") == "advertising") {
$(".box").not(".advertising").hide();
$(".advertising").show();
}
if ($(this).attr("id") == "pricing") {
$(".box").not(".pricing").hide();
$(".pricing").show();
}
if ($(this).attr("id") == "correspondence") {
$(".box").not(".correspondence").hide();
$(".correspondence").show();
}
if ($(this).attr("id") == "meetings") {
$(".box").not(".meetings").hide();
$(".meetings").show();
}
if ($(this).attr("id") == "other") {
$(".box").not(".other").hide();
$(".other").show();
}
});
});
//Calculate Split
function check(split)
{
var split=document.forms[0].split.value
var amount=document.forms[0].amount.value
var tip = (amount*split)
document.forms[0].manufacturer.value=tip
var tip2 = (amount-tip)
document.forms[0].pace.value=tip2
}
</script>
<div id="formDiv" class="form">
<!-- Form div will be hidden after form submission -->
<form id="myForm">
<div class="row">
<h1>Co-op Submission Form</h1>
<h2>Please fill out the form completely, including uploading any documentation associated with your co-op claim.</h2>
</div>
<h3>Your Information</h3>
<h4>Name:</h4> <input name="name" type="text" class="form-control" required/><br/>
<h4>Email:</h4> <input name="email" type="text" class="form-control"required/><br/>
<h3>Co-Op Information</h3>
<h4>Brand:</h4>
<select name="brand" class="form-control" required>
<option>Select Option</option>
<option>Bluebird</option>
<option>Brown</option>
<option>Ferris</option>
<option>Giant Vac</option>
<option>Honda</option>
<option>Hurricane</option>
<option>Jonsered</option>
<option>Little Wonder</option>
<option>RedMax</option>
<option>SCAG</option>
<option>Snapper Pro</option>
<option>Sno-Way</option>
<option>SnowEx</option>
<option>Wright</option>
<option>Ybravo</option>
</select><br/>
<h4>Invoice Date:</h4> <input name="date" type="text" class="form-control"/><br/>
<h4> Total Co-Op Amount</h4> <input type="text" name="amount" class="form-control"/><br />
<h4>Co-Op Split:</h4>
<input type="radio" name="split" onclick="check(this.value)" value="1">100%<br>
<input type="radio" name="split" onclick="check(this.value)" value=".5">50/50<br>
<input type="radio" name="split" onclick="check(this.value)" value=".75">75/25<br />
<input type="radio" name="split" onclick="check(this.value)" value=".25">25/75 (Dealer Pays 50%)<br />
<h4>Manufacturer Amount:</h4> <input type="text" name="manufacturer" style="border:none;font-weight:bold;"><br />
<h4>Pace Amount:</h4> <input type="text" name="pace" style="border:none;font-weight:bold;" >
<h4>Description:</h4> <input name="reason" type="text" cols="20" rows="5" class="form-control" required/><br />
<h4>Co-Op Category:</h4>
<input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
<input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
<input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
<input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
<input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
<input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
Other: <input type="text" id="other" name="category" class="form-control"/><br />
<!--Dealer Advertising-->
<div class="dealer box" style="display:none;">
<h4>Dealer Advertising:</h4>
<input type="radio" name="subcategory" value="Billboards">Billboards<br />
<input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
<input type="radio" name="subcategory" value="Magazine/Newspaper">Magazine/Newspaper<br />
<input type="radio" name="subcategory" value="Open House/Trade Show">Open House & Dealer Trade Show<br />
<input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
<input type="radio" name="subcategory" value="Radio">Radio<br />
<input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
<input type="radio" name="subcategory" value="TV">TV<br />
<input type="radio" name="subcategory" value="Direct Mail">Direct Mail (post cards, flyers)<br />
<input type="radio" name="subcategory" value="Sponsorships">Sponsorships<br />
</div>
<!--Digital/Online Advertising-->
<div class="online box" style="display: none;">
<h4>Digital/Online Marketing:</h4>
<input type="radio" name="subcategory" value="CMS/Advertising">CMS/Dealer Website Advertising<br />
<input type="radio" name="subcategory" value="TRM Digital Marketing">TRM Digital Marketing (google, facebook, retargeting, demo site, youtube)
</div>
<!--Meetings and Schools-->
<div class="meetings box" style="display: none;">
</div>
<!--PACE Advertising-->
<div class="advertising box" style="display: none;">
<h4>PACE Advertising:</h4>
<input type="radio" name="subcategory" value="Billboards">Billboards<br />
<input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
<input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
<input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
</div>
<!--Program Pricing Promotions-->
<div class="pricing box" style="display: none;">
<h4>Program Pricing Promotions:</h4>
<input type="radio" name="subcategory" value="Promo Prices, Discounts, Rebates - Unassigned">Promo Prices, Discounts, Rebates - Unassigned<br />
<input type="radio" name="subcategory" value="Promo Pricing">Promo Pricing<br />
<input type="radio" name="subcategory" value="Demo">Demo<br />
<input type="radio" name="subcategory" value="Fleet">Fleet<br />
<input type="radio" name="subcategory" value="Spiffs and Rebates">Spiffs and Rebates<br />
</div>
<!--PACE-to-Dealer Correspondence-->
<div class="correspondence box" style="display: none;">
<h4>PACE-to-Dealer Correspondence:</h4>
<input type="radio" name="subcategory" value="Pacesetter Catalog">Pacesetter Catalog<br />
<input type="radio" name="subcategory" value="Dealer Programs (updates, reprints)">Dealer Programs (updates, reprints)<br />
</div>
<h4>Message:</h4> <textarea name="message" class="form-control"></textarea><br/>
<h4> Supporting Documentation:</h4><input name="myFile" type="file"/><br />
<input type="submit" value="Submit" class="btn" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" />
</form>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
Uploading. Please wait...
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
</div>
<!--Begin Footer-->
<div class="footer">
<div class="bottomStrip">
<div class="col-lg-3 col-lg-push-1">© <script type="text/javascript"> document.write(new Date().getFullYear());</script>, PACE, Inc. All rights Reserved.</div>
<div class="col-lg-4 col-lg-push-5">PACE, Inc., 739 S. Mill St., Plymouth, MI 48170-1821</div>
</div>
</div>
<!--End Footer-->
</body>
</html>
The Sheet (I did remove everything from the 'Name' and 'Email' columns, as that contained several of my co-workers' full names and email addresses!)

There's an onclick handler on the input 'submit' button:
google.script.run.withSuccessHandler(updateOutput).processForm(this.parentNode)
Submitting the form will use this script, not the default input submit behaviour. So when you change the type from button to submit, you have to change the script to prevent the default submit behaviour from triggering.

Jquery, for loop shows all

$("#button").click(function () {
var pp = []
var ing = []
for (var q = 1; q <= 6; q++) {
pp[q - 1] = $('input[name=P' + (q) + ']').is(":checked");
ing[q - 1] = $('div#ingp' + (q) + '').show();
}
for (var q = 1; q <= 6; q++) {
if (pp[q - 1] == true) {
ing[q - 1];
}
}
});
<div class="Pizzas container" id="checkbox_pizza">
<h1>Kies uw Pizza.</h1>
<form id="Pi">
<input type="checkbox" name="P1" id="g"> €6,00 -Margherita (Kaas en tomaten)
<br/>
<input type="checkbox" name="P2" id="h"> €7,20 -Napolitana (tomaten, kaas, kappertjes, ansjovis)
<br/>
<input type="checkbox" name="P3" id="i"> €7,50 -Salami (kaas, tomaten en salami)
<br/>
<input type="checkbox" name="P4" id="j"> €7,50 -Prosciutto (tomaten, kaas, ham)
<br/>
<input type="checkbox" name="P5" id="k"> €7,00 -Funghi (tomaten, kaas, champions)
<br/>
<input type="checkbox" name="P6" id="l"> €8,00 -Tonno (tomaten, kaas, tonijn, ui)
<br/>
<input type="button" id="knop" value="button" />
</form>
</div>
<div class="container" id="Boxx">
<div id="ingrediënten">
<div>
<h1>Kies extra ingredienten</h1>
</div>
<div id="ingp1"></div>
<div id="ingp2"></div>
<div id="ingp3"></div>
<div id="ingp4"></div>
<div id="ingp5"></div>
<div id="ingp6"></div>
<input type="button" id="knop2" value="Totaal" />
</div>
</div>
So the problem I have is that when I look if one or more of P1 to P6 is check then it shows all 6 div with id ingp1 to ingp6.
I want it to show ingp1 when P1 is checked, and ingp3 when P3 is checked. You get it.
How do I do this (small thing I am only allowed to use javascript and jquery).

First of all add a common class names for the elements in the form and the div's in the container as I have given test1,test2 etc.
$('document').ready(function() {
var test
$("#Pi input[ type = 'checkbox']").click(function() {
var test = this.className
if ( this.checked == true )
{
$('#ingredienten .'+test).show()
console.log($('#ingrediënten .'+test))
}
else
{
$('#ingrediënten .'+test).hide()
}
})
})
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
</head>
<body>
<div class="Pizzas container" id="checkbox_pizza">
<h1>Kies uw Pizza.</h1>
<form id="Pi">
<input type="checkbox" class = "test1" name="P1" id="g"> €6,00 -Margherita (Kaas en tomaten)
<br/>
<input type="checkbox" class = "test2" name="P2" id="h"> €7,20 -Napolitana (tomaten, kaas, kappertjes, ansjovis)
<br/>
<input type="checkbox" class = "test3" name="P3" id="i"> €7,50 -Salami (kaas, tomaten en salami)
<br/>
<input type="checkbox" class = "test4" name="P4" id="j"> €7,50 -Prosciutto (tomaten, kaas, ham)
<br/>
<input type="checkbox" class = "test5" name="P5" id="k"> €7,00 -Funghi (tomaten, kaas, champions)
<br/>
<input type="checkbox" class = "test6" name="P6" id="l"> €8,00 -Tonno (tomaten, kaas, tonijn, ui)
<br/>
<input type="button" id="knop" value="button" />
</form>
</div>
<div class="container" id="Boxx">
<div id="ingredienten">
<div>
<h1>Kies extra ingredienten</h1></div>
<div id="ingp1" class = "test1">
</div>
<div id="ingp2" class = "test2">
</div>
<div id="ingp3" class = "test3">
</div>
<div id="ingp4" class = "test4">
</div>
<div id="ingp5" class = "test5">
</div>
<div id="ingp6" class = "test6">
</div>
<input type="button" id="knop2" value="Totaal" />
</div>
</div>
</body>
<html>
Then take the class name of the clicked check-box and search the div with the class name of this check-box and show or hide the div depending on its checked property.

try this
for (var q = 1; q <= 6; q++)
{
if ( $( 'input[ name = "P' + q + '"]').is(":checked") )
{
$( 'div#ingp' + q ).show();
}
}

$("#button").click(function () {
$('input[name^=P]').each(function () {
var idx = this.name.replace('P', '');
$('div#ingp' + idx).toggle(this.checked);
});
});
In words
for each <input> whose name starts with 'P',
find the associated <div> with the proper ID
toggle its visibility based on whether the <input> is checked or not

#Ttech thanks for clarifying the SO to me. Here's my solution. I slightly changed the markup in the part concerning the ids of the extra ingredients section (the divs).
Please, check my working example and see if this is what you need.
$('#ingrediënten div').hide();
$('#knop').on('click', function() {
$('#ingrediënten div').hide();
var $checkedOptions = $('#Pi input[type=checkbox]').filter(':checked'),
$extraIngredients = $('#ingrediënten div');
$checkedOptions.each(function() {
var id = $(this).attr('name');
$extraIngredients.filter('[id=' + id + ']').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="Pizzas container" id="checkbox_pizza">
<h1>Kies uw Pizza.</h1>
<form id="Pi">
<input type="checkbox" name="P1" id="g"> €6,00 -Margherita (Kaas en tomaten)
<br/>
<input type="checkbox" name="P2" id="h"> €7,20 -Napolitana (tomaten, kaas, kappertjes, ansjovis)
<br/>
<input type="checkbox" name="P3" id="i"> €7,50 -Salami (kaas, tomaten en salami)
<br/>
<input type="checkbox" name="P4" id="j"> €7,50 -Prosciutto (tomaten, kaas, ham)
<br/>
<input type="checkbox" name="P5" id="k"> €7,00 -Funghi (tomaten, kaas, champions)
<br/>
<input type="checkbox" name="P6" id="l"> €8,00 -Tonno (tomaten, kaas, tonijn, ui)
<br/>
<input type="button" id="knop" value="button" />
</form>
</div>
<div class="container" id="Boxx">
<div id="ingrediënten">
<div>
<h1>Kies extra ingredienten</h1>
</div>
<div id="P1">
Extra ingredient 1
</div>
<div id="P2">
Extra ingredient 2
</div>
<div id="P3">
Extra ingredient 3
</div>
<div id="P4">
Extra ingredient 4
</div>
<div id="P5">
Extra ingredient 5
</div>
<div id="P6">
Extra ingredient 6
</div>
<br>
<input type="button" id="knop2" value="Totaal" />
</div>
</div>

Add values from checkbox labels

I have 4 checkboxes with labels and a total label in my webpage. The labels are the price e.g. $12, $100. When the user checks a box I want to take the value from the label and put it in the total label. Then if the user deselect the box, then subtract that value from the total label.
I have tried to set a function called checkbox2() where I took the value and stripped the '$' then turned the remaining string into a number. Then checked if the box was checked, if so, then add number. then convert back to string and set the innerHTML. Did not work and I am sure not the way to do this.
How should I go about this?
<div class="cbwrap">
<label for="check2" name="label2" id="label2">
<input type="checkbox" class="cb" id="check2" onclick="checkBox2()"/> $125
</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" id="check3" onclick="checkBox2()"/> $100
</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2()" /> $75
</label>
</div>
<div class ="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2()" /> $50
</label>
</div>
<div class ="pwrap">
<p class="cat1"><b><u>Total</u></b></p>
</div>
<div class="cbwrap">
<label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label>
</div>
<div>
<label for="total" name="agreedLBL" id="agreedLBL">0</label>
</div>
JS:
var k = document.getElementById("totallbl").innerHTML;
if (document.getElementById("check1").checked) {
x = "150";
} else {
x = "0";
var res = k + x;
document.getElementById("totallbl").innerHTML = res;
}

your html was also not correct. Try this
function checkBox2(checkbox) {
if (checkbox.checked) {
var value = checkbox.parentNode.textContent.match(/\s*\d+(?:\.\d{2})?/)[0];
var totalValue = document.getElementById('totallbl').querySelector('b').innerHTML.match(/\s*\d+(?:\.\d{2})?/)[0];
var newTotalValue = parseFloat(value) + parseFloat(totalValue);
document.getElementById('totallbl').querySelector('b').innerHTML = "$" + newTotalValue;
document.getElementById('agreedLBL').innerText = newTotalValue;
} else {
var value = checkbox.parentNode.textContent.match(/\s*\d+(?:\.\d{2})?/)[0];
var totalValue = document.getElementById('totallbl').querySelector('b').innerHTML.match(/\s*\d+(?:\.\d{2})?/)[0];
var newTotalValue = parseFloat(totalValue) - parseFloat(value);
document.getElementById('totallbl').querySelector('b').innerHTML = "$" + newTotalValue;
document.getElementById('agreedLBL').innerText = newTotalValue;
}
}
<div class="cbwrap">
<label for="check2" name="label2" id="label2">
<input type="checkbox" class="cb" id="check2" onclick="checkBox2(this)" /> $125</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" id="check3" onclick="checkBox2(this)" /> $100</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" /> $75</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" /> $50</label>
</div>
<div class="pwrap">
<p class="cat1"><b><u>Total</u></b></p>
</div>
<div class="cbwrap">
<label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label>
</div>
<div>
<label for="total" name="agreedLBL" id="agreedLBL">0</label>
</div>

Basically, you should be setting html in a way so that it's easy to access values associated with checkboxes. Please note data-value="0" on totallbl and value assigned for each input checkbox.
function checkBox2(obj) {
var k = parseInt(document.getElementById("totallbl").dataset.value);
if (obj.checked) {
k += parseInt(obj.value);
} else {
k -= parseInt(obj.value);
}
document.getElementById("agreedLBL").innerHTML = k;
document.getElementById("totallbl").dataset.value = k;
document.getElementById("totallbl").innerHTML = '$' + k;
}
<div class="cbwrap"><label for="check1" name="label2" id="label2"><input type="checkbox" class="cb" id="check1" onclick="checkBox2(this);" value="150" /> $150</label></div>
<div class="cbwrap"><label for="check2" name="label2" id="label2"><input type="checkbox" class="cb" id="check2" onclick="checkBox2(this);" value="125" /> $125</label></div>
<div class="cbwrap"><label><input type="checkbox" class="cb" id="check3" onclick="checkBox2(this);" value="100" /> $100</label></div>
<div class="cbwrap"><label><input type="checkbox" class="cb" onclick="checkBox2(this);" value="75" /> $75</label></div>
<div class="cbwrap"><label><input type="checkbox" class="cb" onclick="checkBox2(this);" value="50" /> $50</label></div>
<div class="pwrap"><p class="cat1"><b><u>Total</u></b></p></div>
<div class="cbwrap"><label for="total" name="totallbl" id="totallbl" data-value="0" style="font-weight:bold;text-decoration:underline">$0</label></div>
<div> <label for="total" name="agreedLBL" id="agreedLBL">0</label></div>

HEllo Dear it complete running example and please add jquery cdn in head tag.
if you not getting exact output then tell me..
<body>
<div class="cbwrap">
<label for="check2" name="label2" id="label2">
<input type="checkbox" class="cb" id="check2" onclick="checkBox2(this)" />
$125</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" id="check3" onclick="checkBox2(this)" />
$100</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" />
$75</label>
</div>
<div class="cbwrap">
<label>
<input type="checkbox" class="cb" onclick="checkBox2(this)" />
$50</label>
</div>
<div class="pwrap">
<p class="cat1">
<b><u>Total</u></b>
</p>
</div>
<div class="cbwrap">
<label for="total" name="totallbl" id="totallbl"><u><b>$0</b></u></label>
</div>
<div>
<label for="total" name="agreedLBL" id="agreedLBL">0</label>
</div>
<script>
function checkBox2(tempCheckBOx) {
var tempLenght = $(".cbwrap label input[type='checkbox']").length;
var tempTotal = 0;
for (var i = 0; i < tempLenght; i++) {
if ($(".cbwrap label input[type='checkbox']").eq(i).prop('checked') == true) {
var tempStore = $(".cbwrap label").eq(i).text();
var tempVal = parseInt(tempStore.trim().substr(1, (tempStore.length + 1)));
tempTotal += tempVal;
}
}
$("#agreedLBL").text("$"+tempTotal);
}
</script>
</body>

$(document).ready(function(){
$('.cb').click(function(){
var totalvaluestored = document.getElementById('totallbl').innerText.replace(/\$/g, '');
var value = this.value;
if(totalvaluestored === "0"){
document.getElementById('totallbl').innerHTML = '$'+value;
this.value = "";
}
else if(totalvaluestored !== "0" && value !== "")
{
value = parseInt(totalvaluestored) + parseInt(value);
document.getElementById('totallbl').innerHTML = '$ '+value;
this.value = "";
}
else{
var value = this.closest('label').innerText;
value = value.replace(/\$/g, '');
this.value = value;
value = parseInt(totalvaluestored) - parseInt(value);
document.getElementById('totallbl').innerHTML = '$ '+value;
}
});
});