I am having some problems fixing my JS code. In the snippet code you can see my program,
Now click the first checkbox. A message appears at the bottem, as soon as I type a number in it the message should dissapear and the textbox should not disable ...
When I click a second checkbox the message should append to the previous, but it just overwrites... and then with the same values as the previous one ...
Can anyone give me some idea's about that? Should be something wrong in the test function ...
Thank you in advance.
// JavaScript source code
// ************ arrays *************
var aoCursus = [
{ cursusnaam: "houtsoorten herkennen", duurtijd: "4 weken", prijs: 259 },
{ cursusnaam: "planken zagen", duurtijd: "4 dagen", prijs: 138 },
{ cursusnaam: "parketvloer leggen", duurtijd: "2 dagen", prijs: 57 },
{ cursusnaam: "hout beitsen", duurtijd: "4 uren", prijs: 21 },
{ cursusnaam: "houtbewerking", duurtijd: "2 weken", prijs: 204 }];
var aHoutSoorten = [
["bangkirai", "stuks"],
["beukenhout", "stuks"],
["dennenhout", "stuks"],
["eikenhout", "stuks"],
["kastanjehout", "stuks"],
["lindehout", "stuks"],
["notenhout", "stuks"],
["rubberhout", "stuks"],
["Cederhout", "kg"]];
var nCursus = aoCursus.length;
var nHout = aHoutSoorten.length;
window.onload = function () {
// dropdownlijst
var eCursus = document.getElementById('woodcursus');
// form wordt nu altijd gecancelled, nog in een if then .... gieten
const element = document.querySelector('form');
element.addEventListener('submit', event => {
event.preventDefault();
// actual logic, e.g. validate the form
console.log('Form submission cancelled.');
alert('Form submission cancelled.');
});
}; // einde onload
function test(el)
{
divOutput = document.getElementById("msgbox2");
strValideer = "<ul>";
var txt = document.getElementById(el.id.replace('chk', 'txt'))
if (el.checked === true ) {
txt.disabled = false;
if(txt.value==="")
{
strValideer += "<li><b>" + txt.name + ": </b>verplicht veld</li>";
}
}
else if (el.checked === false)
{
txt.disabled = true;
return;
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
function valideer() {
divOutput = document.getElementById("msgbox1");
var strValideer = "<ul>";
if (document.getElementById("naam").value === "") {
strValideer += "<li><b>naam</b>: verplicht veld</li>";
} if (document.getElementById("voornaam").value === "") {
strValideer += "<li><b>voornaam</b>: verplicht veld</li>";
} if (document.getElementById("straatnr").value === "") {
strValideer += "<li><b>straat en nummer</b>: verplicht veld</li>";
} if (document.getElementById("postgem").selectedIndex === 0) {
strValideer += "<li><b>gemeente</b>: verplicht veld</li>";
} if (document.getElementById("telgsm").value === "") {
strValideer += "<li><b>nummer</b>: verplicht veld</li>";
} if (document.getElementById("email").value === "") {
strValideer += "<li><b>mail</b>: verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
function berekenPrijsenTijd() {
divOutput = document.getElementById("msgbox3");
strValideer = "<ul>";
if (document.getElementById("woodcursus").selectedIndex === 1) {
strValideer += "<li><b>duurtijd: </b> " + aoCursus[0].duurtijd + ", prijs: " + aoCursus[0].prijs + "</li>";
}
if (document.getElementById("woodcursus").selectedIndex === 2) {
strValideer += "<li><b>duurtijd: </b> " + aoCursus[1].duurtijd + ", prijs: " + aoCursus[1].prijs + "</li>";
}
if (document.getElementById("woodcursus").selectedIndex === 3) {
strValideer += "<li><b>duurtijd: </b> " + aoCursus[2].duurtijd + ", prijs: " + aoCursus[2].prijs + "</li>";
}
if (document.getElementById("woodcursus").selectedIndex === 4) {
strValideer += "<li><b>duurtijd: </b> " + aoCursus[3].duurtijd + ", prijs: " + aoCursus[3].prijs + "</li>";
}
if (document.getElementById("woodcursus").selectedIndex === 5) {
strValideer += "<li><b>duurtijd: </b> " + aoCursus[4].duurtijd + ", prijs: " + aoCursus[4].prijs + "</li>";
}
if (document.getElementById("woodcursus").selectedIndex === 6) {
strValideer += "<li><b>duurtijd: </b> " + aoCursus[5].duurtijd + ", prijs: " + aoCursus[5].prijs + "</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
<fieldset>
<legend>Bestel gegevens</legend>
<div class="container">
<div class="row">
<div class="span7" id="houtsoorten">
<div class="control-group">
<label class="control-label">
bangkirai
<input id="chkbangkirai" type="checkbox" onchange="test(this)" >
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txtbangkirai" name="bangkirai" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
beukenhout
<input id="chkbeukenhout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txtbeukenhout" name="beukenhout" placeholder="aantal" disabled oninupt="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
dennenhout
<input id="chkdennenhout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txtdennenhout" name="dennenhout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
eikenhout
<input id="chkeikenhout" type="checkbox" onclick="test(this)">
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txteikenhout" name="eikenhout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
kastanjehout
<input id="chkkastanjehout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txtkastanjehout" name="kastanjehout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
lindehout
<input id="chklindehout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append">
<input class="inpbox input-mini" type="text" id="txtlindehout" name="lindehout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
notenhout
<input id="chknotenhout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append inline">
<input class="inpbox input-mini" type="text" id="txtnotenhout" name="notenhout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
rubberhout
<input id="chkrubberhout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append inline">
<input class="inpbox input-mini" type="text" id="txtrubberhout" name="rubberhout" placeholder="aantal" disabled oninput="test(this)">
<span class="add-on">stuks</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">
Cederhout
<input id="chkCederhout" type="checkbox" onchange="test(this)">
</label>
<div class="controls">
<div class="input-append inline">
<input class="inpbox input-mini" type="text" id="txtCederhout" name="Cederhout" placeholder="kg" disabled oninput="test(this)">
<span class="add-on">kg</span>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label">betalingswijze</label>
<div class="controls">
<label class="radio">
<input type="radio" name="optionsRadios" id="visa" value="visa">
visa
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="overschrijving" value="overschrijving">
overschrijving
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="cash" value="cash">
cash
</label>
</div>
</div>
<div class="control-group">
<label class="control-label">opmerkingen:</label>
<div class="controls">
<textarea rows="5" placeholder="opmerkingen"></textarea>
</div>
</div>
</div>
<div class="span4 valid">
<div id="msgbox2" class="alert alert-error" style="display: block;">validatie bestelgegevens verschijnt hier
</div>
<div class="span1"><!--lege kolom--></div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</div>
</fieldset>
Aucun commentaire:
Enregistrer un commentaire