-
admhmemPerguntado em 4 de março de 2025 às 20:54
Olá tudo bem?
Eu tenho um formulário cujo link encontra-se abaixo:
https://form.jotform.com/250625548353055
Trata-se de envio de dados de apuração de centro de custos com envio de produção de um determinado centro de custo baseado naquilo que produziu para outros centros de custos. Todos deverão preencher, mas cada um contribui para determinados centros de custos, sendo prudente que eles sejam selecionados e, no lançamento, apareçam somente os centros de custos para os quais o usuário vai lançar a produção.
Por exemplo: Se eu produzo somente para as UTIs Adulto e Pediátrica, ao selecioná-las, deveria aparecer somente esses dois centros de custo na Tabela de entrada para que eu lançasse o valor da minha produção.
Estou tentando configurar para que quando eu selecionar as opções do widget multipla escolha elas sejam transferidas para o rótulo do meu widget tabela de entrada, mas todas as formas que tentei não deram certo.
Alguma ideia para me ajudar?
Desde já agradeço!
-
Kris Ann Jotform SupportRespondido em 5 de março de 2025 às 07:56
Hi Maxwel,
Thanks for reaching out to Jotform Support. Our Portuguese Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Portuguese, let us know and we can have them do that. But, it might take a while until they're available again.
Now, coming back to your question, I'll need a bit of time to look into this. I’ll get back to you as soon as I can.
Thanks for your patience, we appreciate it.
-
Kris Ann Jotform SupportRespondido em 5 de março de 2025 às 18:05
Hi Maxwel,
I understand that when options are selected on the Multiple Choice field, you want only those options to be available on the Input Table dropdown options. To meet your requirements, you can Inject the Custom CSS code I will provide below to block the other options in the Input Table if not selected. Let me show you how:
1. In Form Builder, click on the Paint Roller Icon to open the Form Designer.
2. Click on the Styles Tab, then under the Inject Custom CSS box, paste the code below:
/* Start of 24867931 */
#cid_7 select > option{
display: none;
}
.form-all:has(#input_8_0:checked) #cid_7 select > option:nth-child(2) {
display: block;
}
.form-all:has(#input_8_1:checked) #cid_7 select > option:nth-child(3) {
display: block;
}
.form-all:has(#input_8_2:checked) #cid_7 select > option:nth-child(4) {
display: block;
}
.form-all:has(#input_8_3:checked) #cid_7 select > option:nth-child(5) {
display: block;
}
.form-all:has(#input_8_4:checked) #cid_7 select > option:nth-child(6) {
display: block;
}
.form-all:has(#input_8_5:checked) #cid_7 select > option:nth-child(7) {
display: block;
}
.form-all:has(#input_8_6:checked) #cid_7 select > option:nth-child(8) {
display: block;
}
.form-all:has(#input_8_7:checked) #cid_7 select > option:nth-child(9) {
display: block;
}
.form-all:has(#input_8_8:checked) #cid_7 select > option:nth-child(10) {
display: block;
}
.form-all:has(#input_8_9:checked) #cid_7 select > option:nth-child(11) {
display: block;
}
.form-all:has(#input_8_10:checked) #cid_7 select > option:nth-child(12) {
display: block;
}
.form-all:has(#input_8_11:checked) #cid_7 select > option:nth-child(13) {
display: block;
}
.form-all:has(#input_8_12:checked) #cid_7 select > option:nth-child(14) {
display: block;
}
.form-all:has(#input_8_13:checked) #cid_7 select > option:nth-child(15) {
display: block;
}
.form-all:has(#input_8_14:checked) #cid_7 select > option:nth-child(16) {
display: block;
}
.form-all:has(#input_8_15:checked) #cid_7 select > option:nth-child(17) {
display: block;
}
.form-all:has(#input_8_16:checked) #cid_7 select > option:nth-child(18) {
display: block;
}
.form-all:has(#input_8_17:checked) #cid_7 select > option:nth-child(19) {
display: block;
}
.form-all:has(#input_8_18:checked) #cid_7 select > option:nth-child(20) {
display: block;
}
.form-all:has(#input_8_19:checked) #cid_7 select > option:nth-child(21) {
display: block;
}
.form-all:has(#input_8_20:checked) #cid_7 select > option:nth-child(22) {
display: block;
}
.form-all:has(#input_8_21:checked) #cid_7 select > option:nth-child(23) {
display: block;
}
.form-all:has(#input_8_22:checked) #cid_7 select > option:nth-child(24) {
display: block;
}
.form-all:has(#input_8_23:checked) #cid_7 select > option:nth-child(25) {
display: block;
}
.form-all:has(#input_8_24:checked) #cid_7 select > option:nth-child(26) {
display: block;
}
.form-all:has(#input_8_25:checked) #cid_7 select > option:nth-child(27) {
display: block;
}
.form-all:has(#input_8_26:checked) #cid_7 select > option:nth-child(28) {
display: block;
}
.form-all:has(#input_8_27:checked) #cid_7 select > option:nth-child(29) {
display: block;
}
.form-all:has(#input_8_28:checked) #cid_7 select > option:nth-child(30) {
display: block;
}
.form-all:has(#input_8_29:checked) #cid_7 select > option:nth-child(31) {
display: block;
}
.form-all:has(#input_8_30:checked) #cid_7 select > option:nth-child(32) {
display: block;
}
.form-all:has(#input_8_31:checked) #cid_7 select > option:nth-child(33) {
display: block;
}
.form-all:has(#input_8_32:checked) #cid_7 select > option:nth-child(34) {
display: block;
}
.form-all:has(#input_8_33:checked) #cid_7 select > option:nth-child(35) {
display: block;
}
.form-all:has(#input_8_34:checked) #cid_7 select > option:nth-child(36) {
display: block;
}
.form-all:has(#input_8_35:checked) #cid_7 select > option:nth-child(37) {
display: block;
}
.form-all:has(#input_8_36:checked) #cid_7 select > option:nth-child(38) {
display: block;
}
.form-all:has(#input_8_37:checked) #cid_7 select > option:nth-child(39) {
display: block;
}
.form-all:has(#input_8_38:checked) #cid_7 select > option:nth-child(40) {
display: block;
}
.form-all:has(#input_8_39:checked) #cid_7 select > option:nth-child(41) {
display: block;
}
.form-all:has(#input_8_40:checked) #cid_7 select > option:nth-child(42) {
display: block;
}
.form-all:has(#input_8_41:checked) #cid_7 select > option:nth-child(43) {
display: block;
}
.form-all:has(#input_8_42:checked) #cid_7 select > option:nth-child(44) {
display: block;
}
.form-all:has(#input_8_43:checked) #cid_7 select > option:nth-child(45) {
display: block;
}
.form-all:has(#input_8_44:checked) #cid_7 select > option:nth-child(46) {
display: block;
}
/* End of 24867931 */
Check out the screencast below to see my results:
-
admhmemRespondido em 6 de março de 2025 às 10:49
Olá Kris Ann,
Obrigado pelo empenho em responder a minha dúvida!
A solução ficou espetacular! Contudo, ainda pergunto se seria possível inserir os Centros de Custos escolhidos no widget múltipla escolha no rótulo do widget tabela de entrada? Seguindo o raciocínio do exemplo que dei anteriormente, o campo ficaria como imagem abaixo:
Assim a tabela não ficaria com tantas linhas abaixo em branco, uma vez que cada centro de custos poderá escolher 5, 20 ou até todos os centros de custo.
Obrigado!
-
Kris Ann Jotform SupportRespondido em 6 de março de 2025 às 10:57
Hi Maxwel,
I'll need a bit of time to look into this. I’ll get back to you as soon as I can.
Thanks for your patience, we appreciate it.
-
Kris Ann Jotform SupportRespondido em 7 de março de 2025 às 18:55
Hi Maxwel,
To meet your requirements, you will need to input all the options as an Input Table row, then inject the custom CSS code I will add below. Let me show you how:
1. In Form Builder, click on the Input Table field, then click on Gear Icon to open Properties.
2. Go to Fields Tab, then click on the Add Row button and add the options from Multiple Choice field one by one.
3. Click on the Paint Roller Icon to open the Form Designer.
4. Click on the Styles Tab, then under the Inject Custom CSS box, paste the code below:
#cid_7 tr.form-matrix-value-tr{
display: none;
}
.form-all:has(#input_8_0:checked) #cid_7 tr.form-matrix-value-tr:nth-child(2),.form-all:has(#input_8_1:checked) #cid_7 tr.form-matrix-value-tr:nth-child(3),.form-all:has(#input_8_2:checked) #cid_7 tr.form-matrix-value-tr:nth-child(4),.form-all:has(#input_8_3:checked) #cid_7 tr.form-matrix-value-tr:nth-child(5),.form-all:has(#input_8_4:checked) #cid_7 tr.form-matrix-value-tr:nth-child(6),.form-all:has(#input_8_5:checked) #cid_7 tr.form-matrix-value-tr:nth-child(7),.form-all:has(#input_8_6:checked) #cid_7 tr.form-matrix-value-tr:nth-child(8),.form-all:has(#input_8_7:checked) #cid_7 tr.form-matrix-value-tr:nth-child(9),.form-all:has(#input_8_8:checked) #cid_7 tr.form-matrix-value-tr:nth-child(10),.form-all:has(#input_8_9:checked) #cid_7 tr.form-matrix-value-tr:nth-child(11),.form-all:has(#input_8_10:checked) #cid_7 tr.form-matrix-value-tr:nth-child(12),.form-all:has(#input_8_11:checked) #cid_7 tr.form-matrix-value-tr:nth-child(13),.form-all:has(#input_8_12:checked) #cid_7 tr.form-matrix-value-tr:nth-child(14),.form-all:has(#input_8_13:checked) #cid_7 tr.form-matrix-value-tr:nth-child(15),.form-all:has(#input_8_14:checked) #cid_7 tr.form-matrix-value-tr:nth-child(16),.form-all:has(#input_8_15:checked) #cid_7 tr.form-matrix-value-tr:nth-child(17),.form-all:has(#input_8_16:checked) #cid_7 tr.form-matrix-value-tr:nth-child(18),.form-all:has(#input_8_17:checked) #cid_7 tr.form-matrix-value-tr:nth-child(19),.form-all:has(#input_8_18:checked) #cid_7 tr.form-matrix-value-tr:nth-child(20),.form-all:has(#input_8_19:checked) #cid_7 tr.form-matrix-value-tr:nth-child(21),.form-all:has(#input_8_20:checked) #cid_7 tr.form-matrix-value-tr:nth-child(22),.form-all:has(#input_8_21:checked) #cid_7 tr.form-matrix-value-tr:nth-child(23),.form-all:has(#input_8_22:checked) #cid_7 tr.form-matrix-value-tr:nth-child(24),.form-all:has(#input_8_23:checked) #cid_7 tr.form-matrix-value-tr:nth-child(25),.form-all:has(#input_8_24:checked) #cid_7 tr.form-matrix-value-tr:nth-child(26),.form-all:has(#input_8_25:checked) #cid_7 tr.form-matrix-value-tr:nth-child(27),.form-all:has(#input_8_26:checked) #cid_7 tr.form-matrix-value-tr:nth-child(28),.form-all:has(#input_8_27:checked) #cid_7 tr.form-matrix-value-tr:nth-child(29),.form-all:has(#input_8_28:checked) #cid_7 tr.form-matrix-value-tr:nth-child(30),.form-all:has(#input_8_29:checked) #cid_7 tr.form-matrix-value-tr:nth-child(31),.form-all:has(#input_8_30:checked) #cid_7 tr.form-matrix-value-tr:nth-child(32),.form-all:has(#input_8_31:checked) #cid_7 tr.form-matrix-value-tr:nth-child(33),.form-all:has(#input_8_32:checked) #cid_7 tr.form-matrix-value-tr:nth-child(34),.form-all:has(#input_8_33:checked) #cid_7 tr.form-matrix-value-tr:nth-child(35),.form-all:has(#input_8_34:checked) #cid_7 tr.form-matrix-value-tr:nth-child(36),.form-all:has(#input_8_35:checked) #cid_7 tr.form-matrix-value-tr:nth-child(37),.form-all:has(#input_8_36:checked) #cid_7 tr.form-matrix-value-tr:nth-child(38),.form-all:has(#input_8_37:checked) #cid_7 tr.form-matrix-value-tr:nth-child(39),.form-all:has(#input_8_38:checked) #cid_7 tr.form-matrix-value-tr:nth-child(40),.form-all:has(#input_8_39:checked) #cid_7 tr.form-matrix-value-tr:nth-child(41),.form-all:has(#input_8_40:checked) #cid_7 tr.form-matrix-value-tr:nth-child(42),.form-all:has(#input_8_41:checked) #cid_7 tr.form-matrix-value-tr:nth-child(43),.form-all:has(#input_8_42:checked) #cid_7 tr.form-matrix-value-tr:nth-child(44),.form-all:has(#input_8_43:checked) #cid_7 tr.form-matrix-value-tr:nth-child(45),.form-all:has(#input_8_44:checked) #cid_7 tr.form-matrix-value-tr:nth-child(46){
display: table-row;
}
Check out the screencast below to see my results:
Let us know if there’s anything else we can help you with.
-
admhmemRespondido em 10 de março de 2025 às 11:16
A solução está perfeita!!! Era isso mesmo que eu precisava!
Não sei como te agradecer!
