"Form with Jquery Bootstrap 4 Beta + Autosize textarea"
Bootstrap 4.0.0 Snippet by rodrigozem

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="mobile-web-app-capable" content="yes"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Solicitação de Antifúngicos</title> <!-- Bootstrap --> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Encode+Sans:200" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <body> <div class="container"> <div class="row"> <div class="col-12 mt-4"> <div class="text-white text-center d-block mb-1"><h4 class="titulo pb-2 pt-2">Formulário de Solicitação de Antifúngicos</h4></div> <div class="mb-2 pl-2 text-white d-block titulo">RELATÓRIO MÉDICO</div> <table class="table table-sm"> <tbody> <tr> <td class="w-25 text-center" style="border-right:1px #41719C solid;border-top:5px #41719C solid">Paciente <span class="text-danger">*</span></td> <td colspan="3" class="w-75" style="background-color:#D6E6F4;border-top:5px #41719C solid;border-right:1px #41719C solid;"> <input type="text" name="paciente" id="paciente" class="w-100 no-print-required"> </td> </tr> <tr> <td style="width:200px;border-right:1px #41719C solid;" class="text-center">Data de Nascimento <span class="text-danger">*</span></td> <td> <input type="date" name="dtNascimento" id="dtNascimento" class="w-100 element-white no-print-required"> </td> <td class="text-right">Número de Atendimento <span class="text-danger">*</span></td> <td style="border-right:1px #41719C solid;"><input type="text" name="nrAtendimento" id="nrAtendimento" class="w-100 no-print-required element-white"></td> </tr> <tr> <td style="width:200px;border-right:1px #41719C solid;" class="text-center">Médico Solicitante <span class="text-danger">*</span></td> <td style="background-color:#D6E6F4;"> <input type="text" name="medicoSolicitante" id="medicoSolicitante" class="w-100 no-print-required"> </td> <td style="background-color:#D6E6F4;" class="text-right">C.R.M. <span class="text-danger">*</span></td> <td style="border-right:1px #41719C solid;background-color:#D6E6F4; "><input type="text" name="crm" id="crm" class="w-100 no-print-required"></td> </tr> <tr> <td style="width:200px;border-right:1px #41719C solid;" class="text-center" >1 - Diagnóstico <span class="text-danger">*</span></td> <td colspan="3" style="border-right:1px #41719C solid;"> <div class="select-wrapper"> <select name="diagnostico" id="diagnostico" style="border:0;white-space:pre-wrap;white-space:-moz-pre-wrap; " class="w-100 element-white no-print-required"> <option class="no-print">Escolher ‣</option> <option>C82 - Linfona não-Hodgkin, folicular (nodular)</option> <option>C83 - Linfona não-Hodgkin difuso</option> <option>C84 - Linfomas de células T cutâneas e periféricas</option> <option>C85 - Linfoma não-Hodgkin de outros tipos e de tipo não especificado</option> <option>C88 - Doenças imunoproliferativas malignas</option> <option>C90 - Mieloma múltiplo e neoplasias malignas de plasmócitos</option> <option>C91 - Leucemia linfóide</option> <option>C92 - Leucemia mielóide</option> <option>C93 - Leucemia monocítica</option> <option>C94 - Outras leucemias de células de tipo especificado</option> <option>C95 - Leucemia de tipo celular não especificado</option> <option>C96 - Outras neoplasias malignas e as não especificadas dos tecidos linfático, hematopoético e tecidos correlatos</option> <option>D46 - Síndromes mielodisplásicas</option> <option>D47 - Outras neoplasias de comportamento incerto ou desconhecido dos tecidos linfático, hematopoético e tecidos correlatos</option> <option>D60 - Aplasia pura da série vermelha, adquirida (eritroblastopenia)</option> <option>D61 - Outras anemias aplásticas</option> </select> </div> </td> </tr> <tr> <td style="width:200px;border-right:1px #41719C solid;" class="text-center" >2 - Procedimento Autorizado <span class="text-danger">*</span></td> <td colspan="3" style="background-color:#D6E6F4;border-right:1px #41719C solid;"> <div class="select-wrapper"> <select name="procedimento" id="procedimento" style="border:0;white-space:pre-wrap;white-space:-moz-pre-wrap; " class="w-100 no-print-required"> <option class="no-print">Escolher ‣</option> <option>0303020032 - Tratamento de anemia aplástica e outras anemias</option> <option>0304080039 - Internação para quimioterapia de leucemias agudas/crônicas agudizadas</option> <option>0304100013 - Tratamento de intercorrências clínicas em pacientes oncológicos</option> <option>0506020045 - Tratamento de intercorrência pós-transplante de órgãos / células-tronco hematopoéticas</option> <option>0506020100 - Tratamento de intercorrência pós-transplante alogênico de células-tronco hematopoéticas</option> <option>0506020118 - Tratamento de intercorrência pós transplante autológo de células-tronco hematopoéticas</option> </select> </div> </td> </tr> <tr> <td style="width:200px;border-right:1px #41719C solid;" class="text-center" >3 - Laudo para Comprovação da Doença <span class="text-danger">*</span></td> <td colspan="3" style="border-right:1px #41719C solid;"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="Checkbox for following text input" id="biopsia_de_linfonodo"> </span> <label class="form-control no-print-required" aria-label="Text input with checkbox" for="biopsia_de_linfonodo" style="background-color:#FFF;font-size:11px;">Biópsia de Linfonodo</label> <span class="input-group-addon"> <input type="checkbox" aria-label="Checkbox for following text input" id="biopsia_de_medula"> </span> <label class="form-control no-print-required" aria-label="Text input with checkbox" for="biopsia_de_medula" style="background-color:#FFF;font-size:11px;">Biópsia de Medula Óssea</label> <span class="input-group-addon"> <input type="checkbox" aria-label="Checkbox for following text input" id="mielograma"> </span> <label class="form-control no-print-required" aria-label="Text input with checkbox" for="mielograma" style="background-color:#FFF;font-size:11px;">Mielograma</label> </div> <small class="no-print">Pelo menos um dos seguintes laudos deve ser anexado ao relatório</small> </td> </tr> </tbody> </table> </div> </div> <div class="mb-2 pl-2 text-white d-block titulo">4 - DOCUMENTOS PARA ATESTAR A INFECÇÃO</div> <div class="row"> <div class="col-12 mb-3"> <div class="select-wrapper"> <h6>DOENÇA FÚNGICA INVASIVA COMPROVADA <span class="text-danger">*</span> <small class="no-print">(Pelo menos um dos seguintes documentos deve ser anexado ao relatório)</small></h6> <select id="doenca_comprovada" name="doenca_comprovada" style="border:0;white-space:pre-wrap;white-space:-moz-pre-wrap; " class="w-100 element-white no-print-required"> <option class="no-print">Escolher ‣</option> <option>Exame histopatológico ou citopatológico mostrando hifas a partir de amostra de biópsia ou aspiração por agulha com evidência de dano tecidual associado.</option> <option>Resultado positivo da cultura para amostra obtida por procedimento estéril de sítio normalmente estéril e com anormalidades clinicas ou radiológicas compatíveis com infecção.</option> <option>Cultura, citologia, ou microscopia direta positiva no escarro, lavado broncoalveolar ou aspirado de seio da face indicando elementos sugestivos de fungo filamentoso ou identificação de uma espécie compatível (e.g. Aspergillus, Fusarium, Zygomycetes e Scedosporium).</option> <option>Resultado positivo para o antígeno galactomanano específico de Aspergillus sp. no soro, em secreção de lavado broncoalveolar, ou em fluido cerebroespinhal.</option> <option>Resultado positivo para antígeno1, 3-beta-D-glucano sérico (para qualquer micose profunda exceto criptococose e zygomicose).</option> </select> </div> </div> <div class="col-12 mb-3"> <div class="select-wrapper"> <h6>DOENÇA FÚNGICA INVASIVA PROVÁVEL <span class="text-danger">*</span> <small class="no-print">(Pelo menos um dos seguintes documentos deve ser anexado ao relatório)</small></h6> <select id="doenca_provavel" name="doenca_provavel" style="border:0;white-space:pre-wrap;white-space:-moz-pre-wrap;overflow-x:auto" class="w-100 element-white no-print-required"> <option class="no-print">Escolher ‣</option> <option>No paciente “Neutropênico Febril”, relatório médico documentando persistência ou recorrência da febre entre 4º e 7º dias de uso dos antibióticos de amplo espectro, mesmo se clinicamente estáveis.</option> <option>Laudo de broncoscopia documentando ulceração/escara ou nódulo ou pseudomembrana ou placa em trato traqueobrônquico.</option> <option>Laudo de tomografia indicando provável infecção de seios paranasais associado a no mínimo 01 (um) dos seguintes achados, sinais ou sintomas documentados por relatório médico: a) dor aguda localizada, incluindo irradiação para olho; b) extensão da lesão de seios paranasais através das barreiras ósseas, inclusive para órbita; c) úlceração nasal escurecida.</option> <option>Laudo de ressonância magnética ou tomografia computadorizada indicando infecção do sistema nervoso central sugerida por lesões focais ou realce meníngeo.</option> </select> </div> </div> </div> <div class="mb-2 pl-2 text-white d-block titulo">5 - ESQUEMA POSOLÓGICO</div> <div class="row"> <div class="col-4"> <div class="select-wrapper"> <h6>MEDICAMENTO <span class="text-danger">*</span></h6> <select id="medicamento" name="medicamento" style="border:0;white-space:pre-wrap;white-space:-moz-pre-wrap;" class="w-100 element-white no-print-required"> <option class="no-print">Escolher ‣</option> <option>Voriconazol 200mg</option> </select> </div> </div> <div class="col-4"> <div class="select-wrapper"> <h6>POSOLOGIA <span class="text-danger">*</span></h6> <select id="posologia" name="posologia" style="border:0;white-space:pre-wrap;white-space:-moz-pre-wrap;" class="w-100 element-white no-print-required"> <option class="no-print">Escolher ‣</option> <option>01 Comprimido de 12h/12h</option> <option>01 Comprimido de 24h/24h</option> <option>1/2 Comprimido de 12h/12h</option> <option>1/2 Comprimido de 24h/24h</option> </select> </div> </div> <div class="col-4"> <h6>DURAÇÃO DO TRATAMENTO <span class="text-danger">*</span></h6> <input type="text" name="dias" id="dias" class="col-2 element-white no-print-required" style="border-bottom: 1px solid #c3c3c3" maxlength="3"> dias </div> </div> <div class="row mt-3 mb-3"> <div class="col-12"> <h6>6 - INDICAÇÃO/JUSTIFICATIVA DO USO DO MEDICAMENTO <span class="text-danger">*</span></h6> <textarea id="justificativa" name="justificativa" class="w-100 no-print-required"></textarea> </div> </div> <div class="row mt-3 mb-3"> <div class="col-12"> <h6>7 - CARACTERÍSTICAS CLÍNICAS E EVOLUÇÃO DA DOENÇA <span class="text-danger">*</span></h6> <textarea id="caracteristicas" name="caracteristicas" class="w-100 no-print-required"></textarea> </div> </div> <div class="row mt-3 mb-3"> <div class="col-12"> <h6>8 - TRATAMENTOS PRÉVIOS E OUTRAS INFORMAÇÕES PERTINENTES <span class="text-danger">*</span></h6> <textarea id="tratamentos_previos" name="tratamentos_previos" class="w-100 no-print-required"></textarea> </div> </div> <div class="row mt-5"> <div class="col-12 text-center"> <span class="d-inline-block" style="border-top:1px #000 solid;width:600px;">Assinatura e Carimbo do Solicitante</span> </div> </div> <div class="row mt-3 mb-3"> <div class="col-12"> <div class="alert alert-danger mb-2 text-center d-none" id="msgValidaForm" role="alert"> Você deve preencher <strong>todos os campos</strong> para realizar a impressão! </div> <button class="btn btn-primary w-100 no-print" id="btnPrint">Imprimir Documento</button> </div> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/autosize@4.0.0/dist/autosize.min.js"></script> </html>
@media print { body {-webkit-print-color-adjust: exact;} .no-print, .no-print * { display: none !important; } .no-print-required, .no-print-required * { display: none !important; } } body {font-size:12px; } table td {max-height: 15px;} select, input {background-color:#D6E6F4;border:0;} .element-white {background-color:#fff;border:0;} #foto {cursor: pointer;} .titulo {background-color:#1F4A7D;font-family:'Open Sans Condensed';font-weight:700;} textarea { border: 1px solid #c3c3c3; resize: none; overflow-x: hiden; height: 25px; } select{ border: 0 !important; /*Removes border*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; text-overflow:''; text-indent: 0.01px; /* Removes default arrow from firefox*/ font-style: italic; } select::-ms-expand { display: none; } .select-wrapper { padding-left:0px; overflow:hidden; } h6::first-letter {margin-top: 0; } h4::first-letter {margin-top: 0; } h6{ font-size: 14px; }
$("document").ready(function(){ $("#foto").click(function(){ $("#btnImagemPaciente").trigger('click'); }) $("#btnPrint").click(function(){ if(imprimir()) { $(".no-print-required").each(function(){ if($(this).hasClass('no-print-required')) $(this).removeClass('no-print-required'); }) window.print(); } else { $("#msgValidaForm").removeClass("d-none") /* Após 4 segundo a mensagem desaparece com a classe invisible sendo novamente adicionada */ setTimeout(function(){ $("#msgValidaForm").addClass("d-none") }, 4000); } }) function imprimir() { var print = true; if($("#paciente").val() === '') print = false; else if($("#dtNascimento").val() === '') print = false; else if($("#nrAtendimento").val() === '') print = false; else if($("#medicoSolicitante").val() === '') print = false; else if($("#crm").val() === '') print = false; else if($("#diagnostico").val() === '') print = false; else if($("#procedimento").val() === '') print = false; else if($("#doenca_comprovada").val() === '') print = false; else if($("#doenca_provavel").val() === '') print = false; else if($("#medicamento").val() === '') print = false; else if($("#posologia").val() === '') print = false; else if($("#dias").val() === '') print = false; else if($("#caracteristicas").val() === '') print = false; else if($("#tratamentos_previos").val() === '') print = false; return print; } $("#doenca_comprovada").change(function(){ $("#doenca_provavel").val($("#doenca_provavel option:first").val()); $("#doenca_provavel").parent().parent().hide(); if( $(this).prop('selectedIndex') === 0 ) $("#doenca_provavel").parent().parent().show(); }) $("#doenca_provavel").change(function(){ $("#doenca_comprovada").val($("#doenca_comprovada option:first").val()); $("#doenca_comprovada").parent().parent().hide(); if( $(this).prop('selectedIndex') == 0 ) $("#doenca_comprovada").parent().parent().show(); }) autosize(document.getElementById("justificativa")); autosize(document.getElementById("caracteristicas")); autosize(document.getElementById("tratamentos_previos")); })

Related: See More


Questions / Comments:

Hello Rodrigo,

Please can you send me your project, thank you so much!!

JorgeMartínez () - 3 years ago - Reply 0


You can view the HTML/CSS/JS of the script by clicking the associated links above the rendered page. There is no need for him to send you the code.

bidnapper (0) - 3 years ago - Reply 0


The code not work, the button not respond with jquery.

I take the same code but not works

JorgeMartínez () - 3 years ago - Reply 0


Either posting your code here or creating a snippet with your code would help illustrate your problem so someone could help.

skyhighpn (-1) - 3 years ago - Reply 0