I am creating a family register, each family has its responsible and its other members, follow the code:
<div id="formularioParaCadastroFamiliar" style="display: none">
<form id="formularioDoResponsavel" action="" method="POST">
<fieldset id="" class="fieldsetDoCadastro">
<input type="hidden" value="" id="numeroDoProntuarioFamiliar" class="numeroDoProntuarioFamiliar" >
<legend>Dados Obrigatórios do Responsável Familiar</legend>
<div class="divFormularioFamiliar">
<label for="membroResponsavel">Responsavel Familiar : </label>
<input type="text" id="membroResponsavel" name="membroResponsavel" class="inputsFormularioFamiliar">
<input type="hidden" value="" id="usuCodigoResponsavel" name="usuCodigoResponsavel" class="">
</div>
<div class="divFormularioFamiliar">
<select name="descricaoDoGrauParentesco" id="descricaoDoGrauParentesco">
<?php
foreach ($this->recebeGrauParentesco as $grauParentesco) { ?>
<option id="<?=$grauParentesco[tgp_codigo]?>" name="<?=$grauParentesco[tgp_codigo]?>" value="<?=$grauParentesco[tgp_codigo]?>"> <?=$grauParentesco[tgp_descricao]?>
</option>
<?}?>
</select>
</div>
<div class="divFormularioFamiliar">
<label for="rendaMensal">Renda Mensal : </label>
<input type="number" id="rendaMensal" name="rendaMensal" class="inputsFormularioFamiliar">
</div>
</fieldset>
<button type="button" onclick="salvarResponsavelFamiliar()" id="salvarResponsavel" class="salvarResponsavel">Salvar Responsavel</button>
</form>
<form id="formularioDosNovosIntegrantes" class="" name="formularioDosNovosIntegrantes">
<fieldset class="fieldsetDoCadastro" disabled="true">
<legend>Demais Membros</legend>
<div class="divFormularioFamiliar">
<label for="novoMembro">Novo membro : </label>
<input type="text" id="novoMembro" name="novoMembro" class="inputsFormularioFamiliar" >
<input type="hidden" value="" id="usuCodigoNovoMembro" name="usuCodigoNovoMembro" class="usuCodigoNovoMembro">
</div>
<div class="divFormularioFamiliar">
<select name="descricaoDoGrauParentesco" id="descricaoDoGrauParentesco">
<?php
foreach ($this->recebeGrauParentesco as $grauParentesco) { ?>
<option id="<?=$grauParentesco[tgp_codigo]?>" name="<?=$grauParentesco[tgp_codigo]?>" value="<?=$grauParentesco[tgp_codigo]?>"> <?=$grauParentesco[tgp_descricao]?>
</option>
<?}?>
</select>
</div>
<div class="divFormularioFamiliar">
<label for="rendaMensalDoNovoMembro">Renda Mensal : </label>
<input type="number" id="rendaMensalDoNovoMembro" name="rendaMensalDoNovoMembro" class="inputsFormularioFamiliar" >
</div>
<button type="button" onclick="salvarNovoMembroFamiliar()">Salvar novo membro</button>
</fieldset>
</form>
So far so good, after some checks we got to part of adding new family members so we got into the problem. Soon after saving a member is added another form containing the same information, this through Ajax
function salvarNovoMembroFamiliar(){
var form = $("#formularioDosNovosIntegrantes").serializeArray().reduce((m, o)=> {m[o.name] = o.value; return m});
var numeroDoProntuarioFamiliar = $("#numeroDoProntuarioFamiliar").val();
var codigoDoUsuario = $("#usuCodigoNovoMembro").val();
$.ajax({
url: baseUrl+"/default/tb-composicao-familiar/verifica-se-usuario-ja-e-responsavel-ou-membro-de-outra-familia",
type: "GET",
data: {codigoDoUsuario: codigoDoUsuario},
success:function(respostaAjax){
var resposta = respostaAjax
if (resposta == "false") {
setTimeout(() => {
$.ajax({
url: baseUrl+"/default/cadastro-familiar/salvar-membro",
type: "POST",
data: {
formulario: form,
numeroDoProntuarioFamiliar : numeroDoProntuarioFamiliar,
codigoUsuario : codigoDoUsuario
},
success:function(){
alert("Novo paciente adicionado a família !")
$("#formularioParaCadastroFamiliar").append(
'
<form id="formularioDosNovosIntegrantes" class="" name="formularioDosNovosIntegrantes">
<fieldset class="fieldsetDoCadastro>
<div class="divFormularioFamiliar">
<label for="novoMembro">Novo membro : </label>
<input type="text" id="novoMembro" name="novoMembro" class="inputsFormularioFamiliar" >
<input type="hidden" value="" id="usuCodigoNovoMembro" name="usuCodigoNovoMembro" class="usuCodigoNovoMembro">
</div>
<div class="divFormularioFamiliar">
<select name="descricaoDoGrauParentesco" id="descricaoDoGrauParentesco">
<?php
foreach ($this->recebeGrauParentesco as $grauParentesco) { ?>
<option id="<?=$grauParentesco[tgp_codigo]?>" name="<?=$grauParentesco[tgp_codigo]?>" value="<?=$grauParentesco[tgp_codigo]?>"> <?=$grauParentesco[tgp_descricao]?>
</option>
<?}?>
</select>
</div>
<div class="divFormularioFamiliar">
<label for="rendaMensalDoNovoMembro">Renda Mensal : </label>
<input type="number" id="rendaMensalDoNovoMembro" name="rendaMensalDoNovoMembro" class="inputsFormularioFamiliar" >
</div>
<button type="button" onclick="salvarNovoMembroFamiliar()">Salvar novo membro</button>
</fieldset>
</form>
'
);
}
});
}, 500)
} else{
alert("Este Usuario já é responsavel por outra Familía");
}
}
});
}
The problem is PHP in the middle of this div, bringing the following result
With the empty select, is there a way out? the solution is to refactor that part of the code.