0
Good evening guys, I’m having a little problem I have a foreach that loads several cards on a page, each card has a modal with the respective card information, Modals are loaded in the same way as the card , I need one of the buttons to update patient information and another one to delete(Buttonhole) they worked when the cards were fixed but after I pasted dynamics on the page the buttons didn’t work anymore, try to change the id,value,name, but nothing helped,?
follow the JS code previously used to change the modar and follow tbm the modal form code
$(document).on('click', '#alterar', function() {
$(this).attr("id","salvar").html("Salvar");
$(this).attr("onclick","myFunction()").html("Salvar");
});
$(document).on('click', '#salvar', function() {
$(this).attr("id","alterar").html("Alterar");
$(this).attr("type","submit").html("Salvar");
$(this).attr("value","enviar").html("Salvar");
});
$(document).on('click', id, function () {
document.getElementById(id).disabled = false;
document.dadosPaciente.action = "formsDB/Delete.php";
document.dadosPaciente.submit();
});
function disableField() {
document.getElementById(id).disabled = true;
}
function undisableFieldset() {
document.getElementById(id).disabled = false;
}
function HabCampos() {
if (document.getElementById('medico').checked) {
document.getElementById('form_medico').style.display = "";
document.getElementById('form_enfermeiro').style.display = "none";
document.getElementById('text').focus();
} if (document.getElementById('enfermeiro').checked){
document.getElementById('form_medico').style.display = "none";
document.getElementById('form_enfermeiro').style.display = "";
document.getElementById('text').focus();
}}
function desabilita_a(){
document.getElementById('form_enfermeiro').style.display = "none";
document.getElementById('form_medico').style.display = "none";
}
<!-- Inicio Modal view/update paciente -->
<div class="modal fade" id="modalView" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content mb-0">
<div class="modal-header">
<h3 class="modal-title" id="modalViewTitle">Visualisar paciente </h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mb-0">
<form id="dadosPaciente" onchange="this.form.submit();" name="dadosPaciente" method="post">
<fieldset id="camada" disabled>
Numero do Paciente :<br>
<input class="form-control" type="number" name="numero_paciente" value="'.$resultado[$i]['numero_paciente'].'" readonly/>
<br>Nome do paciente:<br>
<input class="form-control" type="text" name="nome_paciente" value="'.$resultado[$i]['nome_paciente'].'" readonly/>
<br>Data de Internação :<br>
<input class="form-control" type="date" name="dtInter_paciente" value="'.$resultado[$i]['dtInter_paciente'].'" readonly/>
<br>Tempo de gravidez: <br>
<input class="form-control" type="number" name="dtParto_paciente"
placeholder="'.$resultado[$i]['dtParto_paciente'].' semanas"/>
<br>Classificação de Robson: <br>
<select class="custom-select mr-sm-1" name="clasRob">
<option value="">'.$rob.'</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br>
<br>Tipo Internação : (Anteparto, Parto, Pós-parto)<br>
<select class="custom-select mr-sm-1" name="TipoInter">
<option value="">{TIPOPARTOMODAL0}</option>
<option value="Anteparto">Anteparto</option>
<option value="Parto">Parto</option>
<option value="pos">Pós-Parto</option>
</select>
<br><br>Admissão obstétrica (TP espontâneo, TP induzido, Sem TP)<br>
<select class="custom-select mr-sm-1" name="adimis">
<option value="{TP0}"></option>
<option value="Espontâneo">Espontâneo</option>
<option value="Induzido">Induzido</option>
<option value="Sem TP">Sem Tp</option>
</select>
<br><br>Risco Gestacional (risco habitual e alto risco)<br>
<select class="custom-select mr-sm-1" name="risco">
<option value=""></option>
<option value="Habitual">Habitual</option>
<option value="Alto Risco">Alto Risco</option>
</select>
<br><br>Transfusão (sim ou não)<br>
<label for="sim">Sim</label>
<input type="radio" name="tranfu" id="sim" value="Sim" />
<label for="não">Não</label>
<input type="radio" name="tranfu" id="não" value="Não" />
<br><br>Evento adverso (se teve ou não - detalhar)<br>
<font size="1" face="arial, helvetica, sans-serif"> ( Limite de 1000 caracteres. )<br>
<textarea class="form-control" wrap="physical" name="message" rows="5" cols="30"
onKeyDown="textCounter(this.form.message,this.form.remLen,1000);"
onKeyUp="textCounter(this.form.message,this.form.remLen,1000);"></textarea>
faltam <input readonly type=text name=remLen size=1 maxlength=1 value="1000"
style="border: none;width: 30px;"><br></font><br>
</fieldset>
<div class="modal-footer mb-0">
<button type="button" value="alta" id="alta" class="float-left btn btn-success">Alta
</button>
<button onclick="disableField()" type="button" class="btn btn-secondary"
data-dismiss="modal">Fechar
</button>
<button onclick="undisableFieldset();" value="up" type="button" class="btn btn-primary"
id="alterar">Alterar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Fim Modal view/update paciente -->
This variable
id
in this line:$(document).on('click', id, function () {
is what?– Sam
It was an attempt I made, before it was "high" and in that event.getElementById(id). disabled = true; it was "layer" instead of id because the form when the modal opens it is not editable for the update it is necessary for the user to click the change button to enable the fields that can be edited.
– Jeison Guimaraes
As you said there are several modals, one of the mistakes is to use the same
id
->modalView
.– Sam