Fonte bugada em formulário HTML

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Fonte bugada em formulário HTML

Mensagem por Ronan Rodrigues 08.10.23 15:56

Detalhes da questão


Endereço do fórum: https://smrhb.forumeiros.com
Versão do fórum: ModernBB

Descrição


Olá! No meu formulário, tem algumas fontes que, quando visualiza o formulário, elas ficam desse modelo: clique aqui.

Mas isso não é no formulário em questão, é só quando se visualiza. Também há problemas dentro das seleções: clique aqui.

Toda e qualquer palavra que tenha acento, fica desse jeito. Como posso resolver?
Código do formulário:
Ronan Rodrigues

Ronan Rodrigues
*

Membro desde : 14/09/2023
Mensagens : 39
Pontos : 72

https://smrhb.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Fonte bugada em formulário HTML

Mensagem por tikky 09.10.23 1:57

Olá @Ronan Rodrigues,

Altere a página para
Código:
<!doctype html>
<html lang="pt">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Postagem de Medalhas</title>
     
      <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #3eff00, #004c06)
}
.container{
    max-width: 1100px;
    width: 100%;
    background: #fff;
    padding: 25px 30px;
    border-radius: 5px;
}
.container .tittle{
    font-size: 25px;
    font-weight: 500;
    position: relative;
}
.container .tittle::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 30px;
    background: linear-gradient(135deg, #3eff00, #004c06);
}
.container form .details{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10px 0 40px 0;
}
.container select{
    height: 45px;
    width: 100%;
    padding-left: 15px;
    font-size: 16px;
    border: 1px solid #9ca19d;
    transition: all 0.3s ease;
    border-bottom-width: 2px;
    border-radius: 5px;
    margin-bottom: 5px;
    padding-right: 45px;
}
form .details .input-box{
    margin-bottom: 15px;
    width: calc(100% / 2 - 20px);
}
.details .input-box input{
    height: 45px;
    width: 100%;
    outline: none;
    border-radius: 5px;
    border: 1px solid #9ca19d;
    padding-left: 15px;
    font-size: 16px;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}
.details .input-box input:focus,
.details .input-box input:valid{
    border-color: #4b4d4b;
}
.details .input-box .details_span{
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}
form .button{
    height: 45px;
    margin: 25px 0;
    width: 100%;
}
form .button input{
    height: 100%;
    width: 100%;
    outline: none;
    color: #fff;
    background: linear-gradient(135deg, #00ff11, #006007);
    border: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}
form .button input:hover{
    background: linear-gradient(135deg, #006007, #00ff11);
}
@media (max-width: 584px){
    .container{
        max-width: 100%;
    }
    form .details .input-box{
        margin-bottom: 5px;
        width: 100%;
    }
    .container form .details{
        max-height: 300px;
        overflow-y: scroll;
    }
    .details::-webkit-scrollbar{
        width: 100%;
    }
}
input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 30px white inset;
    box-shadow: #fff;
}
</style>
  </head>
  <body>
   
    <div class="container" bis_skin_checked="1">
           
  <div class="tittle" bis_skin_checked="1">
      Secretaria Geral - Postagem de Medalhas
  </div>
           
  <div class="card_marcar" bis_skin_checked="1">
                 
      <form id="envio_medalhas" name="enviar_medalhas" action="#" onsubmit="return fill_postagem(event)">
                        <input type="text" name="horario_envio" id="horario_envio" style="display: none;" value="-">             
        <div class="details" bis_skin_checked="1">
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Responsável</span>                        <input id="responsavel_med" name="responsavel_med" type="text" placeholder="Responsável pela postagem das medalhas" required="">                                     
            </div>
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Grupo de Tarefas</span>                        <select name="grupo_tarefas" id="grupo_tarefas" required="">
                            <option value="" disabled="" selected="">Selecione o grupo de tarefas</option>
                            <option value="Escola de Preparo Militar">Escola de Preparo Militar</option>
                            <option value="Centro de Aptidão Militar">Centro de Aptidão Militar</option>
                            <option value="Academia Militar Intensiva">Academia Militar Intensiva</option>
                            <option value="Equipe de Marketing Social">Equipe de Marketing Social</option>
                            <option value="Assessoria de Recursos Humanos">Assessoria de Recursos Humanos</option>
                            <option value="Administração Executiva">Administração Executiva</option>
                            <option value="Ministério Público Militar">Ministério Público Militar</option>
                            <option value="Administradores">Administradores</option>
                            <option value="Estado-Maior">Estado-Maior</option>
            <option value="Grupo Especial de Reações">Grupo Especial de Reações</option>
                            <option value="Grupamento Ostensivo de Neutralização">Grupamento Ostensivo de Neutralização</option>
                        </select>                                 
            </div>
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Período de Referência</span>                        <input id="periodo_med" name="periodo_med" type="text" placeholder="Período de referência das medalhas em questão" required="">                                     
            </div>
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Policiais Gratificados</span>                        <input id="gratificados_med" name="gratificados_med" type="text" placeholder="Separe os nicknames com ' / '" required="">                                     
            </div>
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Número de Medalhas</span>                        <input id="numero_med" name="numero_med" type="number" placeholder="Número de medalhas recebidas" required="">                                     
            </div>
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Motivo das Gratificações</span>                        <input id="motivo_med" name="motivo_med" type="text" placeholder="Motivo de postagem das gratificações" required="">                                     
            </div>
                           
        </div>
                         
        <div class="button" id="e_medalhas" bis_skin_checked="1">
                                <input type="submit" value="Enviar">             
        </div>
                         
        <div class="button" style="display: none;" id="e_medalhas_dis" bis_skin_checked="1">
                                <input type="submit" value="Enviando...Aguarde!" disabled="">             
        </div>
                     
      </form>
             
  </div>
       
</div><textarea style="display: none;" id="fa-generated-message"></textarea>      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script><script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script> <script>
// ----------> PREENCHIMENTO AUTOMÁTICO PELO URL
$(document).ready(function(){
    const urlParams = new URLSearchParams(window.location.search).forEach(function(x,y){
        document.getElementById(y).value = x;
    });
});
 
function preencher_data(id){
    var horario = new Date();
        var data_hoje = horario.getDate();
            if(data_hoje<10){data_hoje = '0' + data_hoje};
        const meses = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul","Ago","Set","Out","Nov","Dez"];
        var mes_hoje = meses[horario.getMonth()];
        var ano_hoje = horario.getFullYear();
        var horario_hoje = horario.getHours();
            if(horario_hoje<10){horario_hoje = '0' + horario_hoje};
        var minutos_hoje = horario.getMinutes();
            if(minutos_hoje<10){minutos_hoje = '0' + minutos_hoje};
        var segundos_hoje = horario.getSeconds();
            if(segundos_hoje<10){segundos_hoje = '0' + segundos_hoje};
        document.getElementById(id).value = data_hoje + ' ' + mes_hoje + ' ' + ano_hoje + ' ' + horario_hoje + ':' + minutos_hoje + ':' + segundos_hoje;
}
 
function returnURL(tipo){
    var lista_URL = [
        {name: "Escola de Preparo Militar", topico: 22, macro: ""},
        {name: "Centro de Aptidão Militar", topico: 23, macro: ""},
        {name: "Academia Militar Intensiva", topico: 24, macro: ""},
        {name: "Equipe de Marketing Social", topico: 25, macro: ""},
        {name: "Assessoria de Recursos Humanos", topico: 26, macro: ""},
        {name: "Administração Executiva", topico: 28, macro: ""},
        {name: "Ministério Público Militar", topico: 21, macro: ""},
        {name: "Administradores", topico: 27, macro: ""},
        {name: "Estado-Maior", topico: 29, macro: ""},
        {name: "Grupo Especial de Reações", topico: 20, macro: ""},
        {name: "Grupamento Ostensivo de Neutralização", topico: 20, macro: ""},
    ];
    var search_link = lista_URL.find(grupo => grupo.name === document.getElementById("grupo_tarefas").value);
 
    if(tipo == 'topico'){return search_link.topico}
    else if(tipo == 'macro'){return search_link.macro};
};
 
function fill_postagem(e){
    e.preventDefault();
    //1. VERIFICAÇÃO DE PREENCHIMENTO
    var isValid = true;
    if($("#grupo_tarefas").val() == null){isValid = false};
    $("#envio_medalhas").find("input").each(function(){
        if($(this).val() == ""){isValid = false};
    })
 
 
    if(isValid == true){
        preencher_data('horario_envio');
        document.getElementById('e_medalhas').style.display = 'none';
        document.getElementById('e_medalhas_dis').style.display = 'flex';
         
        if(parseInt(document.getElementById('numero_med').value) > 0){var cor = "[color=green]"}else{var cor = "[color=red]"};
 
        var gratificados = document.getElementById("gratificados_med").value;
            var separados = gratificados.split('/');
                var listagem_total = '';
            separados.forEach(function(nick){
                nick = nick.replace(' ','');
                listagem_total = listagem_total + "[b]Nickname:[/b] " + nick + "\n";
            });
 
        var texto = "[font=Trebuchet MS][color=#00cc00][b][size=17]✗ DADOS DO RESPONSÁVEL[/size][/b][/color]" + "\n\n" +
                    "[b]Nickname:[/b] " + document.getElementById('responsavel_med').value + "\n" +
                    "[b]Grupo de Tarefas:[/b] " + document.getElementById('grupo_tarefas').value + "\n" +
                    "[b]Período de Referência:[/b] " + document.getElementById('periodo_med').value + "\n\n [color=#00cc00][b][size=17]✗ MEDALHAS ATRIBUÍDAS[/size][/b][/color] \n\n" +
                    listagem_total + "\n" +
                    "[b]Número de Medalhas:[/b] " + cor + "(+" + document.getElementById('numero_med').value + ")[/color] \n\n" +
                    "[b]Motivo:[/b] " + document.getElementById('motivo_med').value + "[/font]";
 
        document.getElementById('fa-generated-message').value = texto;
 

 
        var form = document.getElementById("envio_medalhas");
        fetch(returnURL('macro'), {method: 'POST', body: new FormData(form)})
            .then(response => console.log('Resposta enviada para a planilha!'))
            .catch(error => alert('Resposta não enviada para a planilha. Contate um membro da Secretaria de Orçamento e Finanças.!'))
 

        setTimeout(function(){
          $.post('/post', {
            t: returnURL('topico'), message: $('#fa-generated-message').val().trim(), mode: 'reply', tid: $('[name="tid"]:first').val(), post: 1,
          }).done(function () {
                location.href = 'http://' + location.host + '/t' + returnURL('topico') + '-?view=newest';
                alert('Confira sua postagem e, em caso de problemas, contate um membro da Secretaria de Orçamento e Finanças.'); 
          }).fail(function () {
            alert('Houve um erro! Tente novamente!');
          });
        }, 2000);
    }

    else{
        alert('Preencha todos os campos!')
    };
}
</script>
  </body>
</html>
Atenciosamente,
tikky.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7828
Pontos : 9068

Ir para o topo Ir para baixo

Tópico resolvido Re: Fonte bugada em formulário HTML

Mensagem por Ronan Rodrigues 09.10.23 13:55

tikky escreveu:Olá @Ronan Rodrigues,

Altere a página para
Código:
<!doctype html>
<html lang="pt">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Postagem de Medalhas</title>
     
      <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #3eff00, #004c06)
}
.container{
    max-width: 1100px;
    width: 100%;
    background: #fff;
    padding: 25px 30px;
    border-radius: 5px;
}
.container .tittle{
    font-size: 25px;
    font-weight: 500;
    position: relative;
}
.container .tittle::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 30px;
    background: linear-gradient(135deg, #3eff00, #004c06);
}
.container form .details{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10px 0 40px 0;
}
.container select{
    height: 45px;
    width: 100%;
    padding-left: 15px;
    font-size: 16px;
    border: 1px solid #9ca19d;
    transition: all 0.3s ease;
    border-bottom-width: 2px;
    border-radius: 5px;
    margin-bottom: 5px;
    padding-right: 45px;
}
form .details .input-box{
    margin-bottom: 15px;
    width: calc(100% / 2 - 20px);
}
.details .input-box input{
    height: 45px;
    width: 100%;
    outline: none;
    border-radius: 5px;
    border: 1px solid #9ca19d;
    padding-left: 15px;
    font-size: 16px;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}
.details .input-box input:focus,
.details .input-box input:valid{
    border-color: #4b4d4b;
}
.details .input-box .details_span{
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}
form .button{
    height: 45px;
    margin: 25px 0;
    width: 100%;
}
form .button input{
    height: 100%;
    width: 100%;
    outline: none;
    color: #fff;
    background: linear-gradient(135deg, #00ff11, #006007);
    border: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}
form .button input:hover{
    background: linear-gradient(135deg, #006007, #00ff11);
}
@media (max-width: 584px){
    .container{
        max-width: 100%;
    }
    form .details .input-box{
        margin-bottom: 5px;
        width: 100%;
    }
    .container form .details{
        max-height: 300px;
        overflow-y: scroll;
    }
    .details::-webkit-scrollbar{
        width: 100%;
    }
}
input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 30px white inset;
    box-shadow: #fff;
}
</style>
  </head>
  <body>
   
    <div class="container" bis_skin_checked="1">
           
  <div class="tittle" bis_skin_checked="1">
      Secretaria Geral - Postagem de Medalhas
  </div>
           
  <div class="card_marcar" bis_skin_checked="1">
                 
      <form id="envio_medalhas" name="enviar_medalhas" action="#" onsubmit="return fill_postagem(event)">
                        <input type="text" name="horario_envio" id="horario_envio" style="display: none;" value="-">             
        <div class="details" bis_skin_checked="1">
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Responsável</span>                        <input id="responsavel_med" name="responsavel_med" type="text" placeholder="Responsável pela postagem das medalhas" required="">                                     
            </div>
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Grupo de Tarefas</span>                        <select name="grupo_tarefas" id="grupo_tarefas" required="">
                            <option value="" disabled="" selected="">Selecione o grupo de tarefas</option>
                            <option value="Escola de Preparo Militar">Escola de Preparo Militar</option>
                            <option value="Centro de Aptidão Militar">Centro de Aptidão Militar</option>
                            <option value="Academia Militar Intensiva">Academia Militar Intensiva</option>
                            <option value="Equipe de Marketing Social">Equipe de Marketing Social</option>
                            <option value="Assessoria de Recursos Humanos">Assessoria de Recursos Humanos</option>
                            <option value="Administração Executiva">Administração Executiva</option>
                            <option value="Ministério Público Militar">Ministério Público Militar</option>
                            <option value="Administradores">Administradores</option>
                            <option value="Estado-Maior">Estado-Maior</option>
            <option value="Grupo Especial de Reações">Grupo Especial de Reações</option>
                            <option value="Grupamento Ostensivo de Neutralização">Grupamento Ostensivo de Neutralização</option>
                        </select>                                 
            </div>
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Período de Referência</span>                        <input id="periodo_med" name="periodo_med" type="text" placeholder="Período de referência das medalhas em questão" required="">                                     
            </div>
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Policiais Gratificados</span>                        <input id="gratificados_med" name="gratificados_med" type="text" placeholder="Separe os nicknames com ' / '" required="">                                     
            </div>
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Número de Medalhas</span>                        <input id="numero_med" name="numero_med" type="number" placeholder="Número de medalhas recebidas" required="">                                     
            </div>
                               
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Motivo das Gratificações</span>                        <input id="motivo_med" name="motivo_med" type="text" placeholder="Motivo de postagem das gratificações" required="">                                     
            </div>
                           
        </div>
                         
        <div class="button" id="e_medalhas" bis_skin_checked="1">
                                <input type="submit" value="Enviar">             
        </div>
                         
        <div class="button" style="display: none;" id="e_medalhas_dis" bis_skin_checked="1">
                                <input type="submit" value="Enviando...Aguarde!" disabled="">             
        </div>
                     
      </form>
             
  </div>
       
</div><textarea style="display: none;" id="fa-generated-message"></textarea>      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script><script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script> <script>
// ----------> PREENCHIMENTO AUTOMÁTICO PELO URL
$(document).ready(function(){
    const urlParams = new URLSearchParams(window.location.search).forEach(function(x,y){
        document.getElementById(y).value = x;
    });
});
 
function preencher_data(id){
    var horario = new Date();
        var data_hoje = horario.getDate();
            if(data_hoje<10){data_hoje = '0' + data_hoje};
        const meses = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul","Ago","Set","Out","Nov","Dez"];
        var mes_hoje = meses[horario.getMonth()];
        var ano_hoje = horario.getFullYear();
        var horario_hoje = horario.getHours();
            if(horario_hoje<10){horario_hoje = '0' + horario_hoje};
        var minutos_hoje = horario.getMinutes();
            if(minutos_hoje<10){minutos_hoje = '0' + minutos_hoje};
        var segundos_hoje = horario.getSeconds();
            if(segundos_hoje<10){segundos_hoje = '0' + segundos_hoje};
        document.getElementById(id).value = data_hoje + ' ' + mes_hoje + ' ' + ano_hoje + ' ' + horario_hoje + ':' + minutos_hoje + ':' + segundos_hoje;
}
 
function returnURL(tipo){
    var lista_URL = [
        {name: "Escola de Preparo Militar", topico: 22, macro: ""},
        {name: "Centro de Aptidão Militar", topico: 23, macro: ""},
        {name: "Academia Militar Intensiva", topico: 24, macro: ""},
        {name: "Equipe de Marketing Social", topico: 25, macro: ""},
        {name: "Assessoria de Recursos Humanos", topico: 26, macro: ""},
        {name: "Administração Executiva", topico: 28, macro: ""},
        {name: "Ministério Público Militar", topico: 21, macro: ""},
        {name: "Administradores", topico: 27, macro: ""},
        {name: "Estado-Maior", topico: 29, macro: ""},
        {name: "Grupo Especial de Reações", topico: 20, macro: ""},
        {name: "Grupamento Ostensivo de Neutralização", topico: 20, macro: ""},
    ];
    var search_link = lista_URL.find(grupo => grupo.name === document.getElementById("grupo_tarefas").value);
 
    if(tipo == 'topico'){return search_link.topico}
    else if(tipo == 'macro'){return search_link.macro};
};
 
function fill_postagem(e){
    e.preventDefault();
    //1. VERIFICAÇÃO DE PREENCHIMENTO
    var isValid = true;
    if($("#grupo_tarefas").val() == null){isValid = false};
    $("#envio_medalhas").find("input").each(function(){
        if($(this).val() == ""){isValid = false};
    })
 
 
    if(isValid == true){
        preencher_data('horario_envio');
        document.getElementById('e_medalhas').style.display = 'none';
        document.getElementById('e_medalhas_dis').style.display = 'flex';
         
        if(parseInt(document.getElementById('numero_med').value) > 0){var cor = "[color=green]"}else{var cor = "[color=red]"};
 
        var gratificados = document.getElementById("gratificados_med").value;
            var separados = gratificados.split('/');
                var listagem_total = '';
            separados.forEach(function(nick){
                nick = nick.replace(' ','');
                listagem_total = listagem_total + "[b]Nickname:[/b] " + nick + "\n";
            });
 
        var texto = "[font=Trebuchet MS][color=#00cc00][b][size=17]✗ DADOS DO RESPONSÁVEL[/size][/b][/color]" + "\n\n" +
                    "[b]Nickname:[/b] " + document.getElementById('responsavel_med').value + "\n" +
                    "[b]Grupo de Tarefas:[/b] " + document.getElementById('grupo_tarefas').value + "\n" +
                    "[b]Período de Referência:[/b] " + document.getElementById('periodo_med').value + "\n\n [color=#00cc00][b][size=17]✗ MEDALHAS ATRIBUÍDAS[/size][/b][/color] \n\n" +
                    listagem_total + "\n" +
                    "[b]Número de Medalhas:[/b] " + cor + "(+" + document.getElementById('numero_med').value + ")[/color] \n\n" +
                    "[b]Motivo:[/b] " + document.getElementById('motivo_med').value + "[/font]";
 
        document.getElementById('fa-generated-message').value = texto;
 

 
        var form = document.getElementById("envio_medalhas");
        fetch(returnURL('macro'), {method: 'POST', body: new FormData(form)})
            .then(response => console.log('Resposta enviada para a planilha!'))
            .catch(error => alert('Resposta não enviada para a planilha. Contate um membro da Secretaria de Orçamento e Finanças.!'))
 

        setTimeout(function(){
          $.post('/post', {
            t: returnURL('topico'), message: $('#fa-generated-message').val().trim(), mode: 'reply', tid: $('[name="tid"]:first').val(), post: 1,
          }).done(function () {
                location.href = 'http://' + location.host + '/t' + returnURL('topico') + '-?view=newest';
                alert('Confira sua postagem e, em caso de problemas, contate um membro da Secretaria de Orçamento e Finanças.'); 
          }).fail(function () {
            alert('Houve um erro! Tente novamente!');
          });
        }, 2000);
    }

    else{
        alert('Preencha todos os campos!')
    };
}
</script>
  </body>
</html>
Atenciosamente,
tikky.

Olá, tikky, funcionou direitinho, mas ficou sobrando essa cor sem ser o gradiente:

Fonte bugada em formulário HTML Imagem18
Ronan Rodrigues

Ronan Rodrigues
*

Membro desde : 14/09/2023
Mensagens : 39
Pontos : 72

https://smrhb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Fonte bugada em formulário HTML

Mensagem por Musashi 10.10.23 12:47

Bom dia @Ronan Rodrigues.

Altere esse código por esse seguinte modelo:

Código:
<!doctype html>
<html lang="pt">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Postagem de Medalhas</title>
   
      <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #3eff00, #004c06);
    margin: 19rem;
}
.container{
    max-width: 1100px;
    width: 100%;
    background: #fff;
    padding: 25px 30px;
    border-radius: 5px;
}
.container .tittle{
    font-size: 25px;
    font-weight: 500;
    position: relative;
}
.container .tittle::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 30px;
    background: linear-gradient(135deg, #3eff00, #004c06);
}
.container form .details{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10px 0 40px 0;
}
.container select{
    height: 45px;
    width: 100%;
    padding-left: 15px;
    font-size: 16px;
    border: 1px solid #9ca19d;
    transition: all 0.3s ease;
    border-bottom-width: 2px;
    border-radius: 5px;
    margin-bottom: 5px;
    padding-right: 45px;
}
form .details .input-box{
    margin-bottom: 15px;
    width: calc(100% / 2 - 20px);
}
.details .input-box input{
    height: 45px;
    width: 100%;
    outline: none;
    border-radius: 5px;
    border: 1px solid #9ca19d;
    padding-left: 15px;
    font-size: 16px;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}
.details .input-box input:focus,
.details .input-box input:valid{
    border-color: #4b4d4b;
}
.details .input-box .details_span{
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}
form .button{
    height: 45px;
    margin: 25px 0;
    width: 100%;
}
form .button input{
    height: 100%;
    width: 100%;
    outline: none;
    color: #fff;
    background: linear-gradient(135deg, #00ff11, #006007);
    border: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}
form .button input:hover{
    background: linear-gradient(135deg, #006007, #00ff11);
}
@media (max-width: 584px){
    .container{
        max-width: 100%;
    }
    form .details .input-box{
        margin-bottom: 5px;
        width: 100%;
    }
    .container form .details{
        max-height: 300px;
        overflow-y: scroll;
    }
    .details::-webkit-scrollbar{
        width: 100%;
    }
}
input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 30px white inset;
    box-shadow: #fff;
}
</style>
  </head>
  <body>
 
    <div class="container" bis_skin_checked="1">
         
  <div class="tittle" bis_skin_checked="1">
      Secretaria Geral - Postagem de Medalhas
  </div>
         
  <div class="card_marcar" bis_skin_checked="1">
               
      <form id="envio_medalhas" name="enviar_medalhas" action="#" onsubmit="return fill_postagem(event)">
                        <input type="text" name="horario_envio" id="horario_envio" style="display: none;" value="-">           
        <div class="details" bis_skin_checked="1">
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Responsável</span>                        <input id="responsavel_med" name="responsavel_med" type="text" placeholder="Responsável pela postagem das medalhas" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Grupo de Tarefas</span>                        <select name="grupo_tarefas" id="grupo_tarefas" required="">
                            <option value="" disabled="" selected="">Selecione o grupo de tarefas</option>
                            <option value="Escola de Preparo Militar">Escola de Preparo Militar</option>
                            <option value="Centro de Aptidão Militar">Centro de Aptidão Militar</option>
                            <option value="Academia Militar Intensiva">Academia Militar Intensiva</option>
                            <option value="Equipe de Marketing Social">Equipe de Marketing Social</option>
                            <option value="Assessoria de Recursos Humanos">Assessoria de Recursos Humanos</option>
                            <option value="Administração Executiva">Administração Executiva</option>
                            <option value="Ministério Público Militar">Ministério Público Militar</option>
                            <option value="Administradores">Administradores</option>
                            <option value="Estado-Maior">Estado-Maior</option>
            <option value="Grupo Especial de Reações">Grupo Especial de Reações</option>
                            <option value="Grupamento Ostensivo de Neutralização">Grupamento Ostensivo de Neutralização</option>
                        </select>                               
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Período de Referência</span>                        <input id="periodo_med" name="periodo_med" type="text" placeholder="Período de referência das medalhas em questão" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Policiais Gratificados</span>                        <input id="gratificados_med" name="gratificados_med" type="text" placeholder="Separe os nicknames com ' / '" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Número de Medalhas</span>                        <input id="numero_med" name="numero_med" type="number" placeholder="Número de medalhas recebidas" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Motivo das Gratificações</span>                        <input id="motivo_med" name="motivo_med" type="text" placeholder="Motivo de postagem das gratificações" required="">                                   
            </div>
                         
        </div>
                       
        <div class="button" id="e_medalhas" bis_skin_checked="1">
                                <input type="submit" value="Enviar">           
        </div>
                       
        <div class="button" style="display: none;" id="e_medalhas_dis" bis_skin_checked="1">
                                <input type="submit" value="Enviando...Aguarde!" disabled="">           
        </div>
                   
      </form>
           
  </div>
     
</div><textarea style="display: none;" id="fa-generated-message"></textarea>      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script><script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script> <script>
// ----------> PREENCHIMENTO AUTOMÁTICO PELO URL
$(document).ready(function(){
    const urlParams = new URLSearchParams(window.location.search).forEach(function(x,y){
        document.getElementById(y).value = x;
    });
});
 
function preencher_data(id){
    var horario = new Date();
        var data_hoje = horario.getDate();
            if(data_hoje<10){data_hoje = '0' + data_hoje};
        const meses = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul","Ago","Set","Out","Nov","Dez"];
        var mes_hoje = meses[horario.getMonth()];
        var ano_hoje = horario.getFullYear();
        var horario_hoje = horario.getHours();
            if(horario_hoje<10){horario_hoje = '0' + horario_hoje};
        var minutos_hoje = horario.getMinutes();
            if(minutos_hoje<10){minutos_hoje = '0' + minutos_hoje};
        var segundos_hoje = horario.getSeconds();
            if(segundos_hoje<10){segundos_hoje = '0' + segundos_hoje};
        document.getElementById(id).value = data_hoje + ' ' + mes_hoje + ' ' + ano_hoje + ' ' + horario_hoje + ':' + minutos_hoje + ':' + segundos_hoje;
}
 
function returnURL(tipo){
    var lista_URL = [
        {name: "Escola de Preparo Militar", topico: 22, macro: ""},
        {name: "Centro de Aptidão Militar", topico: 23, macro: ""},
        {name: "Academia Militar Intensiva", topico: 24, macro: ""},
        {name: "Equipe de Marketing Social", topico: 25, macro: ""},
        {name: "Assessoria de Recursos Humanos", topico: 26, macro: ""},
        {name: "Administração Executiva", topico: 28, macro: ""},
        {name: "Ministério Público Militar", topico: 21, macro: ""},
        {name: "Administradores", topico: 27, macro: ""},
        {name: "Estado-Maior", topico: 29, macro: ""},
        {name: "Grupo Especial de Reações", topico: 20, macro: ""},
        {name: "Grupamento Ostensivo de Neutralização", topico: 20, macro: ""},
    ];
    var search_link = lista_URL.find(grupo => grupo.name === document.getElementById("grupo_tarefas").value);
 
    if(tipo == 'topico'){return search_link.topico}
    else if(tipo == 'macro'){return search_link.macro};
};
 
function fill_postagem(e){
    e.preventDefault();
    //1. VERIFICAÇÃO DE PREENCHIMENTO
    var isValid = true;
    if($("#grupo_tarefas").val() == null){isValid = false};
    $("#envio_medalhas").find("input").each(function(){
        if($(this).val() == ""){isValid = false};
    })
 
 
    if(isValid == true){
        preencher_data('horario_envio');
        document.getElementById('e_medalhas').style.display = 'none';
        document.getElementById('e_medalhas_dis').style.display = 'flex';
       
        if(parseInt(document.getElementById('numero_med').value) > 0){var cor = "[color=green]"}else{var cor = "[color=red]"};
 
        var gratificados = document.getElementById("gratificados_med").value;
            var separados = gratificados.split('/');
                var listagem_total = '';
            separados.forEach(function(nick){
                nick = nick.replace(' ','');
                listagem_total = listagem_total + "[b]Nickname:[/b] " + nick + "\n";
            });
 
        var texto = "[font=Trebuchet MS][color=#00cc00][b][size=17]✗ DADOS DO RESPONSÁVEL[/size][/b][/color]" + "\n\n" +
                    "[b]Nickname:[/b] " + document.getElementById('responsavel_med').value + "\n" +
                    "[b]Grupo de Tarefas:[/b] " + document.getElementById('grupo_tarefas').value + "\n" +
                    "[b]Período de Referência:[/b] " + document.getElementById('periodo_med').value + "\n\n [color=#00cc00][b][size=17]✗ MEDALHAS ATRIBUÍDAS[/size][/b][/color] \n\n" +
                    listagem_total + "\n" +
                    "[b]Número de Medalhas:[/b] " + cor + "(+" + document.getElementById('numero_med').value + ")[/color] \n\n" +
                    "[b]Motivo:[/b] " + document.getElementById('motivo_med').value + "[/font]";
 
        document.getElementById('fa-generated-message').value = texto;
 
 
 
        var form = document.getElementById("envio_medalhas");
        fetch(returnURL('macro'), {method: 'POST', body: new FormData(form)})
            .then(response => console.log('Resposta enviada para a planilha!'))
            .catch(error => alert('Resposta não enviada para a planilha. Contate um membro da Secretaria de Orçamento e Finanças.!'))
 
 
        setTimeout(function(){
          $.post('/post', {
            t: returnURL('topico'), message: $('#fa-generated-message').val().trim(), mode: 'reply', tid: $('[name="tid"]:first').val(), post: 1,
          }).done(function () {
                location.href = 'http://' + location.host + '/t' + returnURL('topico') + '-?view=newest';
                alert('Confira sua postagem e, em caso de problemas, contate um membro da Secretaria de Orçamento e Finanças.');
          }).fail(function () {
            alert('Houve um erro! Tente novamente!');
          });
        }, 2000);
    }
 
    else{
        alert('Preencha todos os campos!')
    };
}
</script>
  </body>
</html>

Caso não tenha funcionado, informe novamente por este tópico.

(Aguardo resposta).
Atenciosamente,
do seu amigo da comunidade, Musashi! Muito feliz
Musashi

Musashi
Membro

Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Fonte bugada em formulário HTML

Mensagem por tikky 10.10.23 12:56

Altere para
Código:
<!doctype html>
<html lang="pt">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Postagem de Medalhas</title>
   
      <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
html {
    background: linear-gradient(135deg, #3eff00, #004c06) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.container{
    max-width: 1100px;
    width: 100%;
    background: #fff;
    padding: 25px 30px;
    border-radius: 5px;
}
.container .tittle{
    font-size: 25px;
    font-weight: 500;
    position: relative;
}
.container .tittle::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 30px;
    background: linear-gradient(135deg, #3eff00, #004c06);
}
.container form .details{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10px 0 40px 0;
}
.container select{
    height: 45px;
    width: 100%;
    padding-left: 15px;
    font-size: 16px;
    border: 1px solid #9ca19d;
    transition: all 0.3s ease;
    border-bottom-width: 2px;
    border-radius: 5px;
    margin-bottom: 5px;
    padding-right: 45px;
}
form .details .input-box{
    margin-bottom: 15px;
    width: calc(100% / 2 - 20px);
}
.details .input-box input{
    height: 45px;
    width: 100%;
    outline: none;
    border-radius: 5px;
    border: 1px solid #9ca19d;
    padding-left: 15px;
    font-size: 16px;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}
.details .input-box input:focus,
.details .input-box input:valid{
    border-color: #4b4d4b;
}
.details .input-box .details_span{
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}
form .button{
    height: 45px;
    margin: 25px 0;
    width: 100%;
}
form .button input{
    height: 100%;
    width: 100%;
    outline: none;
    color: #fff;
    background: linear-gradient(135deg, #00ff11, #006007);
    border: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}
form .button input:hover{
    background: linear-gradient(135deg, #006007, #00ff11);
}
@media (max-width: 584px){
    .container{
        max-width: 100%;
    }
    form .details .input-box{
        margin-bottom: 5px;
        width: 100%;
    }
    .container form .details{
        max-height: 300px;
        overflow-y: scroll;
    }
    .details::-webkit-scrollbar{
        width: 100%;
    }
}
input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 30px white inset;
    box-shadow: #fff;
}
</style>
  </head>
  <body>
 
    <div class="container" bis_skin_checked="1">
         
  <div class="tittle" bis_skin_checked="1">
      Secretaria Geral - Postagem de Medalhas
  </div>
         
  <div class="card_marcar" bis_skin_checked="1">
               
      <form id="envio_medalhas" name="enviar_medalhas" action="#" onsubmit="return fill_postagem(event)">
                        <input type="text" name="horario_envio" id="horario_envio" style="display: none;" value="-">           
        <div class="details" bis_skin_checked="1">
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Responsável</span>                        <input id="responsavel_med" name="responsavel_med" type="text" placeholder="Responsável pela postagem das medalhas" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Grupo de Tarefas</span>                        <select name="grupo_tarefas" id="grupo_tarefas" required="">
                            <option value="" disabled="" selected="">Selecione o grupo de tarefas</option>
                            <option value="Escola de Preparo Militar">Escola de Preparo Militar</option>
                            <option value="Centro de Aptidão Militar">Centro de Aptidão Militar</option>
                            <option value="Academia Militar Intensiva">Academia Militar Intensiva</option>
                            <option value="Equipe de Marketing Social">Equipe de Marketing Social</option>
                            <option value="Assessoria de Recursos Humanos">Assessoria de Recursos Humanos</option>
                            <option value="Administração Executiva">Administração Executiva</option>
                            <option value="Ministério Público Militar">Ministério Público Militar</option>
                            <option value="Administradores">Administradores</option>
                            <option value="Estado-Maior">Estado-Maior</option>
            <option value="Grupo Especial de Reações">Grupo Especial de Reações</option>
                            <option value="Grupamento Ostensivo de Neutralização">Grupamento Ostensivo de Neutralização</option>
                        </select>                               
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Período de Referência</span>                        <input id="periodo_med" name="periodo_med" type="text" placeholder="Período de referência das medalhas em questão" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Policiais Gratificados</span>                        <input id="gratificados_med" name="gratificados_med" type="text" placeholder="Separe os nicknames com ' / '" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Número de Medalhas</span>                        <input id="numero_med" name="numero_med" type="number" placeholder="Número de medalhas recebidas" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Motivo das Gratificações</span>                        <input id="motivo_med" name="motivo_med" type="text" placeholder="Motivo de postagem das gratificações" required="">                                   
            </div>
                         
        </div>
                       
        <div class="button" id="e_medalhas" bis_skin_checked="1">
                                <input type="submit" value="Enviar">           
        </div>
                       
        <div class="button" style="display: none;" id="e_medalhas_dis" bis_skin_checked="1">
                                <input type="submit" value="Enviando...Aguarde!" disabled="">           
        </div>
                   
      </form>
           
  </div>
     
</div><textarea style="display: none;" id="fa-generated-message"></textarea>      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script><script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script> <script>
// ----------> PREENCHIMENTO AUTOMÁTICO PELO URL
$(document).ready(function(){
    const urlParams = new URLSearchParams(window.location.search).forEach(function(x,y){
        document.getElementById(y).value = x;
    });
});
 
function preencher_data(id){
    var horario = new Date();
        var data_hoje = horario.getDate();
            if(data_hoje<10){data_hoje = '0' + data_hoje};
        const meses = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul","Ago","Set","Out","Nov","Dez"];
        var mes_hoje = meses[horario.getMonth()];
        var ano_hoje = horario.getFullYear();
        var horario_hoje = horario.getHours();
            if(horario_hoje<10){horario_hoje = '0' + horario_hoje};
        var minutos_hoje = horario.getMinutes();
            if(minutos_hoje<10){minutos_hoje = '0' + minutos_hoje};
        var segundos_hoje = horario.getSeconds();
            if(segundos_hoje<10){segundos_hoje = '0' + segundos_hoje};
        document.getElementById(id).value = data_hoje + ' ' + mes_hoje + ' ' + ano_hoje + ' ' + horario_hoje + ':' + minutos_hoje + ':' + segundos_hoje;
}
 
function returnURL(tipo){
    var lista_URL = [
        {name: "Escola de Preparo Militar", topico: 22, macro: ""},
        {name: "Centro de Aptidão Militar", topico: 23, macro: ""},
        {name: "Academia Militar Intensiva", topico: 24, macro: ""},
        {name: "Equipe de Marketing Social", topico: 25, macro: ""},
        {name: "Assessoria de Recursos Humanos", topico: 26, macro: ""},
        {name: "Administração Executiva", topico: 28, macro: ""},
        {name: "Ministério Público Militar", topico: 21, macro: ""},
        {name: "Administradores", topico: 27, macro: ""},
        {name: "Estado-Maior", topico: 29, macro: ""},
        {name: "Grupo Especial de Reações", topico: 20, macro: ""},
        {name: "Grupamento Ostensivo de Neutralização", topico: 20, macro: ""},
    ];
    var search_link = lista_URL.find(grupo => grupo.name === document.getElementById("grupo_tarefas").value);
 
    if(tipo == 'topico'){return search_link.topico}
    else if(tipo == 'macro'){return search_link.macro};
};
 
function fill_postagem(e){
    e.preventDefault();
    //1. VERIFICAÇÃO DE PREENCHIMENTO
    var isValid = true;
    if($("#grupo_tarefas").val() == null){isValid = false};
    $("#envio_medalhas").find("input").each(function(){
        if($(this).val() == ""){isValid = false};
    })
 
 
    if(isValid == true){
        preencher_data('horario_envio');
        document.getElementById('e_medalhas').style.display = 'none';
        document.getElementById('e_medalhas_dis').style.display = 'flex';
       
        if(parseInt(document.getElementById('numero_med').value) > 0){var cor = "[color=green]"}else{var cor = "[color=red]"};
 
        var gratificados = document.getElementById("gratificados_med").value;
            var separados = gratificados.split('/');
                var listagem_total = '';
            separados.forEach(function(nick){
                nick = nick.replace(' ','');
                listagem_total = listagem_total + "[b]Nickname:[/b] " + nick + "\n";
            });
 
        var texto = "[font=Trebuchet MS][color=#00cc00][b][size=17]✗ DADOS DO RESPONSÁVEL[/size][/b][/color]" + "\n\n" +
                    "[b]Nickname:[/b] " + document.getElementById('responsavel_med').value + "\n" +
                    "[b]Grupo de Tarefas:[/b] " + document.getElementById('grupo_tarefas').value + "\n" +
                    "[b]Período de Referência:[/b] " + document.getElementById('periodo_med').value + "\n\n [color=#00cc00][b][size=17]✗ MEDALHAS ATRIBUÍDAS[/size][/b][/color] \n\n" +
                    listagem_total + "\n" +
                    "[b]Número de Medalhas:[/b] " + cor + "(+" + document.getElementById('numero_med').value + ")[/color] \n\n" +
                    "[b]Motivo:[/b] " + document.getElementById('motivo_med').value + "[/font]";
 
        document.getElementById('fa-generated-message').value = texto;
 
 
 
        var form = document.getElementById("envio_medalhas");
        fetch(returnURL('macro'), {method: 'POST', body: new FormData(form)})
            .then(response => console.log('Resposta enviada para a planilha!'))
            .catch(error => alert('Resposta não enviada para a planilha. Contate um membro da Secretaria de Orçamento e Finanças.!'))
 
 
        setTimeout(function(){
          $.post('/post', {
            t: returnURL('topico'), message: $('#fa-generated-message').val().trim(), mode: 'reply', tid: $('[name="tid"]:first').val(), post: 1,
          }).done(function () {
                location.href = 'http://' + location.host + '/t' + returnURL('topico') + '-?view=newest';
                alert('Confira sua postagem e, em caso de problemas, contate um membro da Secretaria de Orçamento e Finanças.');
          }).fail(function () {
            alert('Houve um erro! Tente novamente!');
          });
        }, 2000);
    }
 
    else{
        alert('Preencha todos os campos!')
    };
}
</script>
  </body>
</html>
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7828
Pontos : 9068

Ir para o topo Ir para baixo

Tópico resolvido Re: Fonte bugada em formulário HTML

Mensagem por Ronan Rodrigues 10.10.23 13:43

tikky escreveu:Altere para
Código:
<!doctype html>
<html lang="pt">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Postagem de Medalhas</title>
   
      <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
html {
    background: linear-gradient(135deg, #3eff00, #004c06) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.container{
    max-width: 1100px;
    width: 100%;
    background: #fff;
    padding: 25px 30px;
    border-radius: 5px;
}
.container .tittle{
    font-size: 25px;
    font-weight: 500;
    position: relative;
}
.container .tittle::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 30px;
    background: linear-gradient(135deg, #3eff00, #004c06);
}
.container form .details{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10px 0 40px 0;
}
.container select{
    height: 45px;
    width: 100%;
    padding-left: 15px;
    font-size: 16px;
    border: 1px solid #9ca19d;
    transition: all 0.3s ease;
    border-bottom-width: 2px;
    border-radius: 5px;
    margin-bottom: 5px;
    padding-right: 45px;
}
form .details .input-box{
    margin-bottom: 15px;
    width: calc(100% / 2 - 20px);
}
.details .input-box input{
    height: 45px;
    width: 100%;
    outline: none;
    border-radius: 5px;
    border: 1px solid #9ca19d;
    padding-left: 15px;
    font-size: 16px;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}
.details .input-box input:focus,
.details .input-box input:valid{
    border-color: #4b4d4b;
}
.details .input-box .details_span{
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}
form .button{
    height: 45px;
    margin: 25px 0;
    width: 100%;
}
form .button input{
    height: 100%;
    width: 100%;
    outline: none;
    color: #fff;
    background: linear-gradient(135deg, #00ff11, #006007);
    border: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}
form .button input:hover{
    background: linear-gradient(135deg, #006007, #00ff11);
}
@media (max-width: 584px){
    .container{
        max-width: 100%;
    }
    form .details .input-box{
        margin-bottom: 5px;
        width: 100%;
    }
    .container form .details{
        max-height: 300px;
        overflow-y: scroll;
    }
    .details::-webkit-scrollbar{
        width: 100%;
    }
}
input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 30px white inset;
    box-shadow: #fff;
}
</style>
  </head>
  <body>
 
    <div class="container" bis_skin_checked="1">
         
  <div class="tittle" bis_skin_checked="1">
      Secretaria Geral - Postagem de Medalhas
  </div>
         
  <div class="card_marcar" bis_skin_checked="1">
               
      <form id="envio_medalhas" name="enviar_medalhas" action="#" onsubmit="return fill_postagem(event)">
                        <input type="text" name="horario_envio" id="horario_envio" style="display: none;" value="-">           
        <div class="details" bis_skin_checked="1">
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Responsável</span>                        <input id="responsavel_med" name="responsavel_med" type="text" placeholder="Responsável pela postagem das medalhas" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Grupo de Tarefas</span>                        <select name="grupo_tarefas" id="grupo_tarefas" required="">
                            <option value="" disabled="" selected="">Selecione o grupo de tarefas</option>
                            <option value="Escola de Preparo Militar">Escola de Preparo Militar</option>
                            <option value="Centro de Aptidão Militar">Centro de Aptidão Militar</option>
                            <option value="Academia Militar Intensiva">Academia Militar Intensiva</option>
                            <option value="Equipe de Marketing Social">Equipe de Marketing Social</option>
                            <option value="Assessoria de Recursos Humanos">Assessoria de Recursos Humanos</option>
                            <option value="Administração Executiva">Administração Executiva</option>
                            <option value="Ministério Público Militar">Ministério Público Militar</option>
                            <option value="Administradores">Administradores</option>
                            <option value="Estado-Maior">Estado-Maior</option>
            <option value="Grupo Especial de Reações">Grupo Especial de Reações</option>
                            <option value="Grupamento Ostensivo de Neutralização">Grupamento Ostensivo de Neutralização</option>
                        </select>                               
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Período de Referência</span>                        <input id="periodo_med" name="periodo_med" type="text" placeholder="Período de referência das medalhas em questão" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Policiais Gratificados</span>                        <input id="gratificados_med" name="gratificados_med" type="text" placeholder="Separe os nicknames com ' / '" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Número de Medalhas</span>                        <input id="numero_med" name="numero_med" type="number" placeholder="Número de medalhas recebidas" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Motivo das Gratificações</span>                        <input id="motivo_med" name="motivo_med" type="text" placeholder="Motivo de postagem das gratificações" required="">                                   
            </div>
                         
        </div>
                       
        <div class="button" id="e_medalhas" bis_skin_checked="1">
                                <input type="submit" value="Enviar">           
        </div>
                       
        <div class="button" style="display: none;" id="e_medalhas_dis" bis_skin_checked="1">
                                <input type="submit" value="Enviando...Aguarde!" disabled="">           
        </div>
                   
      </form>
           
  </div>
     
</div><textarea style="display: none;" id="fa-generated-message"></textarea>      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script><script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script> <script>
// ----------> PREENCHIMENTO AUTOMÁTICO PELO URL
$(document).ready(function(){
    const urlParams = new URLSearchParams(window.location.search).forEach(function(x,y){
        document.getElementById(y).value = x;
    });
});
 
function preencher_data(id){
    var horario = new Date();
        var data_hoje = horario.getDate();
            if(data_hoje<10){data_hoje = '0' + data_hoje};
        const meses = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul","Ago","Set","Out","Nov","Dez"];
        var mes_hoje = meses[horario.getMonth()];
        var ano_hoje = horario.getFullYear();
        var horario_hoje = horario.getHours();
            if(horario_hoje<10){horario_hoje = '0' + horario_hoje};
        var minutos_hoje = horario.getMinutes();
            if(minutos_hoje<10){minutos_hoje = '0' + minutos_hoje};
        var segundos_hoje = horario.getSeconds();
            if(segundos_hoje<10){segundos_hoje = '0' + segundos_hoje};
        document.getElementById(id).value = data_hoje + ' ' + mes_hoje + ' ' + ano_hoje + ' ' + horario_hoje + ':' + minutos_hoje + ':' + segundos_hoje;
}
 
function returnURL(tipo){
    var lista_URL = [
        {name: "Escola de Preparo Militar", topico: 22, macro: ""},
        {name: "Centro de Aptidão Militar", topico: 23, macro: ""},
        {name: "Academia Militar Intensiva", topico: 24, macro: ""},
        {name: "Equipe de Marketing Social", topico: 25, macro: ""},
        {name: "Assessoria de Recursos Humanos", topico: 26, macro: ""},
        {name: "Administração Executiva", topico: 28, macro: ""},
        {name: "Ministério Público Militar", topico: 21, macro: ""},
        {name: "Administradores", topico: 27, macro: ""},
        {name: "Estado-Maior", topico: 29, macro: ""},
        {name: "Grupo Especial de Reações", topico: 20, macro: ""},
        {name: "Grupamento Ostensivo de Neutralização", topico: 20, macro: ""},
    ];
    var search_link = lista_URL.find(grupo => grupo.name === document.getElementById("grupo_tarefas").value);
 
    if(tipo == 'topico'){return search_link.topico}
    else if(tipo == 'macro'){return search_link.macro};
};
 
function fill_postagem(e){
    e.preventDefault();
    //1. VERIFICAÇÃO DE PREENCHIMENTO
    var isValid = true;
    if($("#grupo_tarefas").val() == null){isValid = false};
    $("#envio_medalhas").find("input").each(function(){
        if($(this).val() == ""){isValid = false};
    })
 
 
    if(isValid == true){
        preencher_data('horario_envio');
        document.getElementById('e_medalhas').style.display = 'none';
        document.getElementById('e_medalhas_dis').style.display = 'flex';
       
        if(parseInt(document.getElementById('numero_med').value) > 0){var cor = "[color=green]"}else{var cor = "[color=red]"};
 
        var gratificados = document.getElementById("gratificados_med").value;
            var separados = gratificados.split('/');
                var listagem_total = '';
            separados.forEach(function(nick){
                nick = nick.replace(' ','');
                listagem_total = listagem_total + "[b]Nickname:[/b] " + nick + "\n";
            });
 
        var texto = "[font=Trebuchet MS][color=#00cc00][b][size=17]✗ DADOS DO RESPONSÁVEL[/size][/b][/color]" + "\n\n" +
                    "[b]Nickname:[/b] " + document.getElementById('responsavel_med').value + "\n" +
                    "[b]Grupo de Tarefas:[/b] " + document.getElementById('grupo_tarefas').value + "\n" +
                    "[b]Período de Referência:[/b] " + document.getElementById('periodo_med').value + "\n\n [color=#00cc00][b][size=17]✗ MEDALHAS ATRIBUÍDAS[/size][/b][/color] \n\n" +
                    listagem_total + "\n" +
                    "[b]Número de Medalhas:[/b] " + cor + "(+" + document.getElementById('numero_med').value + ")[/color] \n\n" +
                    "[b]Motivo:[/b] " + document.getElementById('motivo_med').value + "[/font]";
 
        document.getElementById('fa-generated-message').value = texto;
 
 
 
        var form = document.getElementById("envio_medalhas");
        fetch(returnURL('macro'), {method: 'POST', body: new FormData(form)})
            .then(response => console.log('Resposta enviada para a planilha!'))
            .catch(error => alert('Resposta não enviada para a planilha. Contate um membro da Secretaria de Orçamento e Finanças.!'))
 
 
        setTimeout(function(){
          $.post('/post', {
            t: returnURL('topico'), message: $('#fa-generated-message').val().trim(), mode: 'reply', tid: $('[name="tid"]:first').val(), post: 1,
          }).done(function () {
                location.href = 'http://' + location.host + '/t' + returnURL('topico') + '-?view=newest';
                alert('Confira sua postagem e, em caso de problemas, contate um membro da Secretaria de Orçamento e Finanças.');
          }).fail(function () {
            alert('Houve um erro! Tente novamente!');
          });
        }, 2000);
    }
 
    else{
        alert('Preencha todos os campos!')
    };
}
</script>
  </body>
</html>

Foi, tikky, obrigado! Rosa
Ronan Rodrigues

Ronan Rodrigues
*

Membro desde : 14/09/2023
Mensagens : 39
Pontos : 72

https://smrhb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Fonte bugada em formulário HTML

Mensagem por Ronan Rodrigues 10.10.23 13:44

Musashi escreveu:Bom dia @Ronan Rodrigues.

Altere esse código por esse seguinte modelo:

Código:
<!doctype html>
<html lang="pt">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Postagem de Medalhas</title>
   
      <style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #3eff00, #004c06);
    margin: 19rem;
}
.container{
    max-width: 1100px;
    width: 100%;
    background: #fff;
    padding: 25px 30px;
    border-radius: 5px;
}
.container .tittle{
    font-size: 25px;
    font-weight: 500;
    position: relative;
}
.container .tittle::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 30px;
    background: linear-gradient(135deg, #3eff00, #004c06);
}
.container form .details{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 10px 0 40px 0;
}
.container select{
    height: 45px;
    width: 100%;
    padding-left: 15px;
    font-size: 16px;
    border: 1px solid #9ca19d;
    transition: all 0.3s ease;
    border-bottom-width: 2px;
    border-radius: 5px;
    margin-bottom: 5px;
    padding-right: 45px;
}
form .details .input-box{
    margin-bottom: 15px;
    width: calc(100% / 2 - 20px);
}
.details .input-box input{
    height: 45px;
    width: 100%;
    outline: none;
    border-radius: 5px;
    border: 1px solid #9ca19d;
    padding-left: 15px;
    font-size: 16px;
    border-bottom-width: 2px;
    transition: all 0.3s ease;
}
.details .input-box input:focus,
.details .input-box input:valid{
    border-color: #4b4d4b;
}
.details .input-box .details_span{
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
}
form .button{
    height: 45px;
    margin: 25px 0;
    width: 100%;
}
form .button input{
    height: 100%;
    width: 100%;
    outline: none;
    color: #fff;
    background: linear-gradient(135deg, #00ff11, #006007);
    border: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}
form .button input:hover{
    background: linear-gradient(135deg, #006007, #00ff11);
}
@media (max-width: 584px){
    .container{
        max-width: 100%;
    }
    form .details .input-box{
        margin-bottom: 5px;
        width: 100%;
    }
    .container form .details{
        max-height: 300px;
        overflow-y: scroll;
    }
    .details::-webkit-scrollbar{
        width: 100%;
    }
}
input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 30px white inset;
    box-shadow: #fff;
}
</style>
  </head>
  <body>
 
    <div class="container" bis_skin_checked="1">
         
  <div class="tittle" bis_skin_checked="1">
      Secretaria Geral - Postagem de Medalhas
  </div>
         
  <div class="card_marcar" bis_skin_checked="1">
               
      <form id="envio_medalhas" name="enviar_medalhas" action="#" onsubmit="return fill_postagem(event)">
                        <input type="text" name="horario_envio" id="horario_envio" style="display: none;" value="-">           
        <div class="details" bis_skin_checked="1">
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Responsável</span>                        <input id="responsavel_med" name="responsavel_med" type="text" placeholder="Responsável pela postagem das medalhas" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Grupo de Tarefas</span>                        <select name="grupo_tarefas" id="grupo_tarefas" required="">
                            <option value="" disabled="" selected="">Selecione o grupo de tarefas</option>
                            <option value="Escola de Preparo Militar">Escola de Preparo Militar</option>
                            <option value="Centro de Aptidão Militar">Centro de Aptidão Militar</option>
                            <option value="Academia Militar Intensiva">Academia Militar Intensiva</option>
                            <option value="Equipe de Marketing Social">Equipe de Marketing Social</option>
                            <option value="Assessoria de Recursos Humanos">Assessoria de Recursos Humanos</option>
                            <option value="Administração Executiva">Administração Executiva</option>
                            <option value="Ministério Público Militar">Ministério Público Militar</option>
                            <option value="Administradores">Administradores</option>
                            <option value="Estado-Maior">Estado-Maior</option>
            <option value="Grupo Especial de Reações">Grupo Especial de Reações</option>
                            <option value="Grupamento Ostensivo de Neutralização">Grupamento Ostensivo de Neutralização</option>
                        </select>                               
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Período de Referência</span>                        <input id="periodo_med" name="periodo_med" type="text" placeholder="Período de referência das medalhas em questão" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Policiais Gratificados</span>                        <input id="gratificados_med" name="gratificados_med" type="text" placeholder="Separe os nicknames com ' / '" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Número de Medalhas</span>                        <input id="numero_med" name="numero_med" type="number" placeholder="Número de medalhas recebidas" required="">                                   
            </div>
                             
            <div class="input-box" bis_skin_checked="1">
                                      <span class="details_span">Motivo das Gratificações</span>                        <input id="motivo_med" name="motivo_med" type="text" placeholder="Motivo de postagem das gratificações" required="">                                   
            </div>
                         
        </div>
                       
        <div class="button" id="e_medalhas" bis_skin_checked="1">
                                <input type="submit" value="Enviar">           
        </div>
                       
        <div class="button" style="display: none;" id="e_medalhas_dis" bis_skin_checked="1">
                                <input type="submit" value="Enviando...Aguarde!" disabled="">           
        </div>
                   
      </form>
           
  </div>
     
</div><textarea style="display: none;" id="fa-generated-message"></textarea>      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script><script src="https://forumeiros.github.io/assets/src/form-generator/form-replace.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script> <script>
// ----------> PREENCHIMENTO AUTOMÁTICO PELO URL
$(document).ready(function(){
    const urlParams = new URLSearchParams(window.location.search).forEach(function(x,y){
        document.getElementById(y).value = x;
    });
});
 
function preencher_data(id){
    var horario = new Date();
        var data_hoje = horario.getDate();
            if(data_hoje<10){data_hoje = '0' + data_hoje};
        const meses = ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul","Ago","Set","Out","Nov","Dez"];
        var mes_hoje = meses[horario.getMonth()];
        var ano_hoje = horario.getFullYear();
        var horario_hoje = horario.getHours();
            if(horario_hoje<10){horario_hoje = '0' + horario_hoje};
        var minutos_hoje = horario.getMinutes();
            if(minutos_hoje<10){minutos_hoje = '0' + minutos_hoje};
        var segundos_hoje = horario.getSeconds();
            if(segundos_hoje<10){segundos_hoje = '0' + segundos_hoje};
        document.getElementById(id).value = data_hoje + ' ' + mes_hoje + ' ' + ano_hoje + ' ' + horario_hoje + ':' + minutos_hoje + ':' + segundos_hoje;
}
 
function returnURL(tipo){
    var lista_URL = [
        {name: "Escola de Preparo Militar", topico: 22, macro: ""},
        {name: "Centro de Aptidão Militar", topico: 23, macro: ""},
        {name: "Academia Militar Intensiva", topico: 24, macro: ""},
        {name: "Equipe de Marketing Social", topico: 25, macro: ""},
        {name: "Assessoria de Recursos Humanos", topico: 26, macro: ""},
        {name: "Administração Executiva", topico: 28, macro: ""},
        {name: "Ministério Público Militar", topico: 21, macro: ""},
        {name: "Administradores", topico: 27, macro: ""},
        {name: "Estado-Maior", topico: 29, macro: ""},
        {name: "Grupo Especial de Reações", topico: 20, macro: ""},
        {name: "Grupamento Ostensivo de Neutralização", topico: 20, macro: ""},
    ];
    var search_link = lista_URL.find(grupo => grupo.name === document.getElementById("grupo_tarefas").value);
 
    if(tipo == 'topico'){return search_link.topico}
    else if(tipo == 'macro'){return search_link.macro};
};
 
function fill_postagem(e){
    e.preventDefault();
    //1. VERIFICAÇÃO DE PREENCHIMENTO
    var isValid = true;
    if($("#grupo_tarefas").val() == null){isValid = false};
    $("#envio_medalhas").find("input").each(function(){
        if($(this).val() == ""){isValid = false};
    })
 
 
    if(isValid == true){
        preencher_data('horario_envio');
        document.getElementById('e_medalhas').style.display = 'none';
        document.getElementById('e_medalhas_dis').style.display = 'flex';
       
        if(parseInt(document.getElementById('numero_med').value) > 0){var cor = "[color=green]"}else{var cor = "[color=red]"};
 
        var gratificados = document.getElementById("gratificados_med").value;
            var separados = gratificados.split('/');
                var listagem_total = '';
            separados.forEach(function(nick){
                nick = nick.replace(' ','');
                listagem_total = listagem_total + "[b]Nickname:[/b] " + nick + "\n";
            });
 
        var texto = "[font=Trebuchet MS][color=#00cc00][b][size=17]✗ DADOS DO RESPONSÁVEL[/size][/b][/color]" + "\n\n" +
                    "[b]Nickname:[/b] " + document.getElementById('responsavel_med').value + "\n" +
                    "[b]Grupo de Tarefas:[/b] " + document.getElementById('grupo_tarefas').value + "\n" +
                    "[b]Período de Referência:[/b] " + document.getElementById('periodo_med').value + "\n\n [color=#00cc00][b][size=17]✗ MEDALHAS ATRIBUÍDAS[/size][/b][/color] \n\n" +
                    listagem_total + "\n" +
                    "[b]Número de Medalhas:[/b] " + cor + "(+" + document.getElementById('numero_med').value + ")[/color] \n\n" +
                    "[b]Motivo:[/b] " + document.getElementById('motivo_med').value + "[/font]";
 
        document.getElementById('fa-generated-message').value = texto;
 
 
 
        var form = document.getElementById("envio_medalhas");
        fetch(returnURL('macro'), {method: 'POST', body: new FormData(form)})
            .then(response => console.log('Resposta enviada para a planilha!'))
            .catch(error => alert('Resposta não enviada para a planilha. Contate um membro da Secretaria de Orçamento e Finanças.!'))
 
 
        setTimeout(function(){
          $.post('/post', {
            t: returnURL('topico'), message: $('#fa-generated-message').val().trim(), mode: 'reply', tid: $('[name="tid"]:first').val(), post: 1,
          }).done(function () {
                location.href = 'http://' + location.host + '/t' + returnURL('topico') + '-?view=newest';
                alert('Confira sua postagem e, em caso de problemas, contate um membro da Secretaria de Orçamento e Finanças.');
          }).fail(function () {
            alert('Houve um erro! Tente novamente!');
          });
        }, 2000);
    }
 
    else{
        alert('Preencha todos os campos!')
    };
}
</script>
  </body>
</html>

Caso não tenha funcionado, informe novamente por este tópico.

(Aguardo resposta).
Atenciosamente,
do seu amigo da comunidade, Musashi! Muito feliz

Esse código ficou com a janela muito junta, eu queria a janela fixa no meio e que dê para ver todas informações. A janela desse código ficou mais para baixo e ela ficou pequena, juntando os campos, mas o tikky já resolveu para mim, obrigado! Piscada Eu amo você
Ronan Rodrigues

Ronan Rodrigues
*

Membro desde : 14/09/2023
Mensagens : 39
Pontos : 72

https://smrhb.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Fonte bugada em formulário HTML

Mensagem por Musashi 10.10.23 14:11

Imagina, peço desculpas por não ter conseguido ter dado a resposta para sua solução. Mostrando a lingua

Tópico resolvido


Movido para "Questões resolvidas".
Musashi

Musashi
Membro

Membro desde : 17/02/2021
Mensagens : 588
Pontos : 762

https://luciothemes.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos