mardi 24 avril 2018

JavaScript Checkbox

I am having troubles with a script with JS, I am still learning but I am stuck for a while.

The solution should be, IF a checkbox is checked and the value is "" <-- the msgbox should say an message that the textbox should be filled with a value, and so for each checked checkbox, if you uncheck the checkbox, it should dissapear.

Code of 2 checkboxes in html page

<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="chk_bangkirai" type="checkbox" onchange="enableTextBox()" >
            </label>
            <div class="controls">
              <div class="input-append">
                <input class="inpbox input-mini" type="text" id="bangkirai" name="bangkirai" placeholder="aantal" disabled onchange="enableTextBox()">
                  <span class="add-on">stuks</span>
                </div>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">beukenhout
                <input id="chk_beukenhout" type="checkbox" >
              </label>
              <div class="controls">
                <div class="input-append">
                  <input class="inpbox input-mini" type="text" id="beukenhout" name="beukenhout" placeholder="aantal" disabled>
                    <span class="add-on">stuks</span>
                </div>
              </div>
            </div>

and the JavaScript, I made for each checkbox an other function, but I need to combine the error message in the same msgbox.

function enableTextBox() {

    divOutput = document.getElementById("msgbox2");
    strValideer = "<ul>";

    if (document.getElementById("chk_bangkirai").checked === true) {
        document.getElementById("bangkirai").disabled = false;
    } else {
        document.getElementById("bangkirai").disabled = true;
    }
    if (document.getElementById("bangkirai").value === "") {
        strValideer += "<li><b>bangkirai: </b>verplicht veld</li>";
    }
    strValideer += "</ul>";
    divOutput.innerHTML = strValideer;
}

function enableTextBox2() {
    divOutput = document.getElementById("msgbox2");
    strValideer = "<ul>";
    if (document.getElementById("chk_beukenhout").checked === true) {
        document.getElementById("beukenhout").disabled = false;
    } else {
        document.getElementById("beukenhout").disabled = true;
    }
    if (document.getElementById("beukenhout").value === "") {
        strValideer += "<li><b>beukenhout: </b>verplicht veld</li>";
    }
    strValideer += "</ul>";
    divOutput.innerHTML = strValideer;
}

I should probably use an array or an for each itteration ... but I can only find examples with forms ...

I will keep looking for a solution myself, but I hope I can get some inspiration here by experienced coders.

Thanks in advance




Aucun commentaire:

Enregistrer un commentaire