JSFiddle - React, Tailwind, and code Playground

by mauro_nappolini

HTML

<form id="email-form" name="email-form" data-name="Email Form" method="get" aria-label="Email Form">
  <div class="form-input"><label for="hoai">HOAI 2021</label><select id="hoai" name="HOAI-2021" data-name="HOAI 2021" class="w-select">
      <option value="">Select One</option>
      <option value="§35 - Gebäude / Innenräume">§35 - Gebäude / Innenräume</option>
      <option value="§ 35 Abs. 1 Innenräume">§ 35 Abs. 1 Innenräume</option>
      <option value="§ 40 Abs. 1 Freianlagen">§ 40 Abs. 1 Freianlagen</option>
    </select></div>
  <div class="form-input"><label for="honorarzone">Honorarzone</label><select id="honorarzone" name="Honorarzone" data-name="Honorarzone" class="w-select">
      <option value="">Select one</option>
      <option value="I">I</option>
      <option value="II">II</option>
      <option value="III">III</option>
      <option value="IV">IV</option>
      <option value="IIV">IIV</option>
    </select></div>
  <div class="form-input"><label for="anrechenbare-kosten">Anrechenbare Kosten:</label><input type="text" class="w-input" maxlength="256" name="Anrechenbare-Kosten" data-name="Anrechenbare Kosten:" placeholder="0" id="anrechenbare-kosten" required=""></div>
  <div class="form-input"><label for="honorarsatz">Honorarsatz</label><label class="w-checkbox"><input type="checkbox" id="basis" name="basis" data-name="basis" required="" class="w-checkbox-input"><span class="w-form-label" for="basis">Basis</span></label><label class="w-checkbox"><input type="checkbox" id="unteres-mittel" name="unteres-mittel" data-name="unteres-mittel" required="" class="w-checkbox-input"><span class="w-form-label" for="unteres-mittel">Unteres Mittel</span></label><label class="w-checkbox"><input type="checkbox" id="mitte" name="mitte" data-name="mitte" required="" class="w-checkbox-input"><span class="w-form-label" for="mitte">Mitte</span></label><label class="w-checkbox"><input type="checkbox" id="oberes-mittel" name="oberes-mittel" data-name="oberes-mittel"...

JavaScript

// Get the value from the following input/select fields

/*
Get the values from 
1. hoai
2. honorarzone
3. anrechenbare-kosten

/Checkboxes
4. basis
5. unteres-mittel
6. mitte
7. oberes-mittel
8. oberste-grenze

/Checkbox
9. grundlagenermittlung-cb - grundlagenermittlung-input
10. vorplanung-cb - vorplanung-input
11. entwurfsplanung-cb - entwurfsplanung-input
12. genehmigungsplanung-cb - genehmigungsplanung-input
13. ausfhrungsplanung-cb - ausfhrungsplanung-input
14. vorbereitungDerVergabe-cb - vorbereitungDerVergabe-input
15. objekt-berwachung-cb - objekt-berwachung-input
16. objektbetreuung-cb - objektbetreuung-input
17. 
18. 
*/



//Selected HOAI
$('#hoai').change(function() {
    let hoai = $(this).val(); 
   console.log(hoai);
});

let hoaiVal = [];
console.log(hoaiVal);

$('#grundlagenermittlung-cb').change(function() {
      if($(this).prop("checked") == true) {
         console.log("Checked");
       }
       else if($(this).prop("checked") == false) {
         console.log("unchecked");
       }
  });