<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script type="text/javascript"> var status; var leadingZeroLength = 2; var json; readTextFile("/sites/cce/support/formdata.js", function(text) { json = JSON.parse(text); console.log(json); }); var filteredData = json; var actualNodeData; var filteredJson; var selectedQuestionArray = []; var defaultOption=document.createElement('option'); defaultOption.text = "Bitte auswählen"; defaultOption.value = -1; defaultOption.setAttribute('selected', 'selected'); defaultOption.setAttribute('disabled', 'disabled'); var webForm = document.getElementsByClassName('container-fluid').item(0); webForm.style.display='none'; $(".tx-powermail").append("<fieldset id='dropdown' class='powermail_fieldset powermail_fieldset_224 layout1'>" + "<h1>Supportproblemermittlung</h1>" + "<label for='radioWrapper'>Ihr Status</label>" + "<div class =radioWrapper>" + "<div class='powermail_fieldwrap powermail_fieldwrap_type_radio powermail_fieldwrap_ihrstatus form-group'>" + "<div class='radio'><label><input type=\"radio\" id=\"radioButton1\" name=\"radioButton\" value='students'>\n" + "Studierende</label></div>"+ "<div class='radio'><label><input type=\"radio\" id=\"radioButton2\" name=\"radioButton\" value='employee'>\n" + "Lehrende & Mitarbeitende</label></div>"+ "<div class='radio'><label><input type=\"radio\" id=\"radioButton3\" name=\"radioButton\" value='guestStudents'>\n" + "Gasthörende</label></div>"+ "</div></div>"+ "<div class='powermail_fieldwrap powermail_fieldwrap_type_input powermail_fieldwrap_name form-group'><label for='powermail_field_auswahlfeld01' id='field1label'>Kategorie</label><select name=\"element01\" id=\"powermail_field_auswahlfeld01\" class=\"selectBox\">\n" + "</select></div>\n" + "<div class='powermail_fieldwrap powermail_fieldwrap_type_input powermail_fieldwrap_name form-group'><label for='powermail_field_auswahlfeld02' id='field2label'>Problem</label><select name=\"element02\" id=\"powermail_field_auswahlfeld02\" class=\"selectBox\">\n" + "</select></div>\n" + "<div class='powermail_fieldwrap powermail_fieldwrap_type_input powermail_fieldwrap_name form-group'><select name=\"element03\" id=\"powermail_field_auswahlfeld03\" class=\"selectBox\">" + "</select></div></fieldset>"); $("#dropdown").append("<div id='faq' ><div id='descriptionwrapper' class='powermail_fieldwrap powermail_fieldwrap_type_input powermail_fieldwrap_name form-group'><label for='description' id='descriptionlabel'><h4>Potentielle Lösung</h4></label><p id='description'></p></div></div>"); $("#faq").append("<div id='buttonArea' class='powermail_fieldwrap powermail_fieldwrap_type_submit powermail_fieldwrap_marker form-group'><input type='button' id='supportformularbutton' class='powermail_submit btn btn-primary' value='Zum Supportformular'></div>"); var element01 = document.getElementById('powermail_field_auswahlfeld01'); element01.setAttribute("style","width:100%"); element01.style.display='none'; clearDropDown(element01); element01.onchange = function(e) { onSelectItem(this, e); } var element02 = document.getElementById('powermail_field_auswahlfeld02'); element02.setAttribute("style","width:100%"); element02.style.display='none'; clearDropDown(element02); element02.onchange = function(e) { onSelectItem(this, e); } var element03 = document.getElementById('powermail_field_auswahlfeld03'); element03.setAttribute("style","width:100%"); element03.style.display='none'; clearDropDown(element03); element03.onchange = function(e) { onSelectItem(this, e); } var textArea = document.getElementById('descriptionwrapper'); textArea.setAttribute("style","width:100%"); textArea.style.display='none'; var buttonArea = document.getElementById('buttonArea'); buttonArea.setAttribute("style","width:100%"); buttonArea.style.display='none'; var labelProblem1 = document.getElementById('field1label'); labelProblem1.style.display='none'; var labelProblem2 = document.getElementById('field2label'); labelProblem2.style.display='none'; var dropdown = document.getElementById('dropdown'); /*var element04 = document.getElementById('powermail_field_testfeld04'); element04.style.display='none'; var element05 = document.getElementById('powermail_field_testfeld05'); element05.style.display='none'; */ $("input[name='radioButton']").change(function(e){ status= e.target.value; element01.style.display='block'; labelProblem1.style.display='block'; element02.style.display='none'; labelProblem2.style.display='none'; textArea.style.display='none'; buttonArea.style.display='none'; filteredJson = json?.data?.filter(function (row) { if(row.targetGroup === status) { return true } else { return false; } }); clearDropDown(element01); element01.add(defaultOption); for(var i=0; i< filteredJson.length; i++) { addDropDownOption(element01, filteredJson[i].id, filteredJson[i].title); } //$(element01[0]).attr('disabled', false); //$(element01[0]).attr('selected', false); $(element01[0]).attr('selected', true); $(element01[0]).attr('disabled', true); element01.selectedIndex = 0; }); $(".tx-powermail>.container-fluid>form").on("submit", function(){ }); $("#supportformularbutton").click(function(){ var newline = String.fromCharCode(13, 10); var text = actualNodeData.textSource; if(text != null && newline != null){ text = replaceAll(text, '<br/>',newline+newline); } $("#powermail_field_ihrenachricht").val(text); var questionText= selectedQuestionArray.join(" > "); $("#powermail_field_gewaehltefragen").val(questionText); var personStatusArea = document.getElementsByClassName('powermail_fieldwrap_ihrstatus').item(0); switch (status) { case 'students' : $("#powermail_field_ihrstatus_1").prop("checked", true); personStatusArea.style.display='none'; break; case 'employee' : $("#powermail_field_ihrstatus_2").prop("checked", true); personStatusArea.style.display='none'; break; case 'guestStudents': $("#powermail_field_ihrstatus_3").prop("checked", true); personStatusArea.style.display='none'; } buttonArea.style.display='none'; textArea.style.display='none'; dropdown.style.display='none'; webForm.style.display='block'; var element01 = document.getElementById('powermail_field_auswahlfeld01'); element01.selectedIndex = 0; }); function onSelectItem(option, selectBox){ var currentDropDownIdCounter = ""; var currentDropDownIdName = ""; // sets the currentItemId to the element id of the choosen element in dropdown field var currentItemId = option.value; // sets the currentDropDownId to the field id of the changed dropdown field var currentDropDownId = selectBox.target.id; if(currentDropDownId !== null && currentDropDownId !== ''){ currentDropDownIdCounter = currentDropDownId.slice(-leadingZeroLength); currentDropDownIdName = currentDropDownId.substring(0, (currentDropDownId.length - leadingZeroLength)); } var selectedOption = option.options[option.options.selectedIndex]; selectedQuestionArray[parseInt(currentDropDownIdCounter)-1] = selectedOption.text; //write description to textfield var nodeDataFromJson = getNodeData(currentItemId); if(nodeDataFromJson.description !== null){ textArea.style.display='block'; buttonArea.style.display='block'; $('#description').html(nodeDataFromJson.description); actualNodeData= nodeDataFromJson; } else{ textArea.style.display='none'; buttonArea.style.display='none'; } // clear and hide all dropDown fields beginning child +1 if(currentDropDownIdCounter !== null && currentDropDownIdName !== null) { currentDropDownIdCounter = parseInt(currentDropDownIdCounter, 10); for(var i=currentDropDownIdCounter+1; i < currentDropDownIdCounter+5; i++) { var nextItemId = currentDropDownIdName+leadingZero(i, leadingZeroLength); try { var nextElement = document.getElementById(nextItemId); clearDropDown(nextElement); var filteredJson = getDropDownData(currentDropDownIdCounter, currentDropDownIdName); if(nextElement !== null) { if(i===(currentDropDownIdCounter+1)) { // the direct next Element // load Data //var filteredJson = getDropDownData(currentDropDownIdCounter, currentDropDownIdName); if(filteredJson.length > 0){ nextElement.add(defaultOption); for(var x=0; x< filteredJson.length; x++) { addDropDownOption(nextElement, filteredJson[x].id, filteredJson[x].title); } //$(nextElement[0]).attr('disabled', false); //$(nextElement[0]).attr('selected', false); //$(nextElement[0]).attr('selected', true); //$(nextElement[0]).attr('disabled', true); nextElement.selectedIndex = 0; // set values and set visible nextElement.style.display='block'; } else { nextElement.style.display='none'; } } else{ // each Element after the direct next Element // set hidden nextElement.style.display='none'; } } } catch(ex){ } } } if(element02.style.display=='block'){ labelProblem2.style.display='block'; } else{ labelProblem2.style.display='none'; } } //compare id with all elements in Json function getNodeData(currentItemId){ var dataArray = json?.data; for(var i=0; i < dataArray.length; i++) { if(dataArray[i].id == currentItemId){ return(dataArray[i]); } var childrenArray = dataArray[i].children; if(childrenArray?.length > 0){ for(var j=0; j< childrenArray.length;j++){ if(childrenArray[j].id==currentItemId){ return childrenArray[j]; } } } } } function getDropDownData(currentDropDownIdCounter, currentDropDownIdName){ filteredData = json?.data; for(var i=1; i <= currentDropDownIdCounter; i++) { var itemId = currentDropDownIdName+leadingZero(i, leadingZeroLength); var element = document.getElementById(itemId); var value = element.value; if(i == 1){ filteredData = filteredData.filter(function (row) { if(row.id === value) { return true } else { return false; } }); filteredData = filteredData[0].children; } else { filteredData = filteredData.filter(function (row) { if(row.id === value) { return true } else { return false; } }); filteredData = filteredData[0].children; } } return filteredData; } function addDropDownOption(selectBox, itemId, itemValue) { try { /*if(checkIfOptionExist(selectBox, 0) === true){ selectBox.selectedIndex = 0; }*/ var option = document.createElement('option'); option.text = itemValue; option.value = itemId; selectBox.add(option); } catch(ex){ console.log("addDropDownOption Error.") } } function checkIfOptionExist ( value, selectBox ) { var optionExists = false, optionsLength = selectBox.length; while ( optionsLength-- ) { if ( selectBox.options[ optionsLength ].value === value ) { optionExists = true; break; } } return optionExists; } function escapeRegExp(string){ return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); } function replaceAll(str, term, replacement) { return str.replace(new RegExp(escapeRegExp(term), 'g'), replacement); } function clearDropDown(selectBox) { if(selectBox !== null && selectBox.options !== null) { selectBox.remove(selectBox.selectedIndex); while (selectBox.firstChild) { selectBox.removeChild(selectBox.firstChild); } } } function leadingZero(number, numberChars) { var leadingNumber = number + ""; while( leadingNumber.length < numberChars ) leadingNumber = "0" + leadingNumber; return leadingNumber; } function readTextFile(file, callback) { var rawFile = new XMLHttpRequest(); rawFile.overrideMimeType("application/json"); rawFile.open("GET", file, true); rawFile.onreadystatechange = function() { if (rawFile.readyState === 4 && rawFile.status == "200") { callback(rawFile.responseText); } } rawFile.send(null); } </script> <style> select{ height:2.6em !important; } h4{ -webkit-margin-before: 0em; -webkit-margin-after: 0em; } p{ -webkit-margin-before: 0em; } </style>