Ivon Filho

Ivon Filho

Olá, procurando web designer freelancer para seu projeto?

Como criar campos de formulário de lógica condicional Elementor PRO sem usar plugins

Seguem scripts:

<script>

/* Code from https://element.how/elementor-pro-add-conditional-form-fields/
* You are allowed to use on your website and your clients websites
* No sale or redistribution without permission
* Copyright 2023 by Element.how
* Version 1.1 2023/03/15
*/
document.addEventListener('DOMContentLoaded', conditionalFormFieldFunc);
document.addEventListener('DOMContentLoaded',function(){
jQuery(document).on('elementor/popup/show', (event, id, instance) => {
conditionalFormFieldFunc();
});
});

function conditionalFormFieldFunc() {
function testLogic() {
for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
let conditionalInput = setInputsElemArray(conditionalInputID);
let match = true;
for (const [conditionID, conditionValues] of Object.entries(condition)) {
let inputs = setInputsElemArray(conditionID);
let selectedInputs = [];
inputs.forEach((input, i) => { if (input.checked) { selectedInputs.push(i); } });
if (inputs[0].tagName == 'SELECT') {
selectedInputs.push(inputs[0].selectedIndex);
}
let adjustedConditionValues = conditionValues.map(e => e - 1);
if (!(adjustedConditionValues.every(condition => selectedInputs.indexOf(condition) > -1))) {
match = false;
}
};
if (match) {
conditionalInput.forEach(e => e.closest('.elementor-field-group').style.display = "block")
} else {
conditionalInput.forEach(e => e.closest('.elementor-field-group').style.display = "none")
}
}
}
testLogic();

/* Add event listeners */
for (const [conditionalInputID, condition] of Object.entries(showThisFieldIf)) {
for (const [conditionID, conditionValues] of Object.entries(condition)) {
let inputs = setInputsElemArray(conditionID);
inputs.forEach(input => {
input.addEventListener('input', function () {
testLogic();
})
})
}
}

function setInputsElemArray(ID) {
let selectors = `[name="form_fields[${ID}]"]`;
let inputs = Array.from(document.querySelectorAll(selectors));
if (!inputs.length) {
selectors = `[name="form_fields[${ID}][]"]`;
inputs = Array.from(document.querySelectorAll(selectors));
}
return inputs;
}
};

</script>

<script>
let showThisFieldIf = {
vara: {
filtro: [1],
},
processo: {
filtro: [2],
},
parte_autora: {
filtro: [3],
},
parte_re: {
filtro: [4],
},
data: {
filtro: [5],
},
}
</script>
Rolar para cima

Vamos Conversar?

Melhorar sua performance digital é o nosso desafio. Colecionamos cases de sucesso e queremos fazer o mesmo pela sua marca. Envie uma mensagem pra gente!

Blog

Web Designer Freelancer Brasília DF

Sobre

Apaixonado por WordPress, Ivon Filho atua como web designer e desenvolvedor front-end desde 2010.

Trabalhando como freelancer, atende desde pequenas a grandes empresas que procuram por serviços de excelente qualidade a um custo acessível, além de agências que precisam terceirizar essas demandas.

Criação de sites em WordPress e desenvolvimento de plugins e temas personalizados são as especialidades da “casa”! O verdadeiro conceito de “feito à mão”.

Experiências

Website Developer

Viva Pixel
Freelancer

Website Developer

Conectando Pessoas
2013 – 2016 - 3 anos

Website Developer

7 Pontos Agência Integrada
2012 – 2013 - 1 ano

Formação

Universidade Paulista

Comunicação e Mídias Digitais
2009 – 2011