Fonte bugada em formulário HTML

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:

Código:: <html><script> window[Symbol.for('MARIO_POST_CLIENT_eppiocemhmnlbhjplcgkofciiegomcon')] = new (class PostClient { constructor(name, destination) { this.name = name; this.destination = destination; this.serverListeners = {}; this.bgRequestsListeners = {}; this.bgEventsListeners = {}; window.addEventListener('message', (message) => { const data = message.data; const isNotForMe = !(data.destination && data.destination === this.name); const hasNotEventProp = !data.event; if (isNotForMe || hasNotEventProp) { return; } if (data.event === 'MARIO_POST_SERVER__BG_RESPONSE') { const response = data.args; if (this.hasBgRequestListener(response.requestId)) { try { this.bgRequestsListeners[response.requestId](response.response); } catch (e) { console.log(e); } delete this.bgRequestsListeners[response.requestId]; } } else if (data.event === 'MARIO_POST_SERVER__BG_EVENT') { const response = data.args; if (this.hasBgEventListener(response.event)) { try { this.bgEventsListeners[data.id](response.payload); } catch (e) { console.log(e); } } } else if (this.hasServerListener(data.event)) { try { this.serverListeners[data.event](data.args); } catch (e) { console.log(e); } } else { console.log(event not handled: ${data.event}); } }); } emitToServer(event, args) { const id = this.generateUIID(); const message = { args, destination: this.destination, event, id, }; window.postMessage(message, location.origin); return id; } emitToBg(bgEventName, args) { const requestId = this.generateUIID(); const request = { bgEventName, requestId, args }; this.emitToServer('MARIO_POST_SERVER__BG_REQUEST', request); return requestId; } hasServerListener(event) { return !!this.serverListeners[event]; } hasBgRequestListener(requestId) { return !!this.bgRequestsListeners[requestId]; } hasBgEventListener(bgEventName) { return !!this.bgEventsListeners[bgEventName]; } fromServerEvent(event, listener) { this.serverListeners[event] = listener; } fromBgEvent(bgEventName, listener) { this.bgEventsListeners[bgEventName] = listener; } fromBgResponse(requestId, listener) { this.bgRequestsListeners[requestId] = listener; } generateUIID() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { const r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); } })('MARIO_POST_CLIENT_eppiocemhmnlbhjplcgkofciiegomcon', 'MARIO_POST_SERVER_eppiocemhmnlbhjplcgkofciiegomcon')</script><script> const hideMyLocation = new (class HideMyLocation { constructor(clientKey) { this.clientKey = clientKey; this.watchIDs = {}; this.client = window[Symbol.for(clientKey)]; const getCurrentPosition = navigator.geolocation.getCurrentPosition; const watchPosition = navigator.geolocation.watchPosition; const clearWatch = navigator.geolocation.clearWatch; const self = this; navigator.geolocation.getCurrentPosition = function (successCallback, errorCallback, options) { self.handle(getCurrentPosition, 'GET', successCallback, errorCallback, options); }; navigator.geolocation.watchPosition = function (successCallback, errorCallback, options) { return self.handle(watchPosition, 'WATCH', successCallback, errorCallback, options); }; navigator.geolocation.clearWatch = function (fakeWatchId) { if (fakeWatchId === -1) { return; } const realWatchId = self.watchIDs[fakeWatchId]; delete self.watchIDs[fakeWatchId]; return clearWatch.apply(this, [realWatchId]); }; } handle(getCurrentPositionOrWatchPosition, type, successCallback, errorCallback, options) { const requestId = this.client.emitToBg('HIDE_MY_LOCATION__GET_LOCATION'); let fakeWatchId = this.getRandomInt(0, 100000); this.client.fromBgResponse(requestId, (response) => { if (response.enabled) { if (response.status === 'SUCCESS') { const position = this.map(response); successCallback(position); } else { const error = this.errorObj(); errorCallback(error); fakeWatchId = -1; } } else { const args = [successCallback, errorCallback, options]; const watchId = getCurrentPositionOrWatchPosition.apply(navigator.geolocation, args); if (type === 'WATCH') { this.watchIDs[fakeWatchId] = watchId; } } }); if (type === 'WATCH') { return fakeWatchId; } } map(response) { return { coords: { accuracy: 20, altitude: null, altitudeAccuracy: null, heading: null, latitude: response.latitude, longitude: response.longitude, speed: null, }, timestamp: Date.now(), }; } errorObj() { return { code: 1, message: 'User denied Geolocation', }; } getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; } })('MARIO_POST_CLIENT_eppiocemhmnlbhjplcgkofciiegomcon') </script><head><script ecommerce-type="extend-native-history-api">(() => { const nativePushState = history.pushState; const nativeReplaceState = history.replaceState; const nativeBack = history.back; const nativeForward = history.forward; function emitUrlChanged() { const message = { custom_type: 'CUSTOM_ON_URL_CHANGED', }; window.postMessage(message); } history.pushState = function () { nativePushState.apply(history, arguments); emitUrlChanged(); }; history.replaceState = function () { nativeReplaceState.apply(history, arguments); emitUrlChanged(); }; history.back = function () { nativeBack.apply(history, arguments); emitUrlChanged(); }; history.forward = function () { nativeForward.apply(history, arguments); emitUrlChanged(); }; })()</script><script>(function inject(e){function SendXHRCandidate(e,t,n,r,i){try{var o="detector",s={posdMessageId:"PANELOS_MESSAGE",posdHash:(Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15)).substring(0,22),type:"VIDEO_XHR_CANDIDATE",from:o,to:o.substring(0,6),content:{requestMethod:e,url:t,type:n,content:r}};i&&i[0]&&i[0].length&&(s.content.encodedPostBody=i[0]),window.postMessage(s,"*")}catch(e){}}var t=XMLHttpRequest.prototype.open;XMLHttpRequest.prototype.open=function(){this.requestMethod=arguments[0],t.apply(this,arguments)};var n=XMLHttpRequest.prototype.send;XMLHttpRequest.prototype.send=function(){var t=Object.assign(arguments,{}),r=this.onreadystatechange;return this.onreadystatechange=function(){if(4!==this.readyState||function isFrameInBlackList(t){return e.some((function(e){return t.includes(e)}))}(this.responseURL)||setTimeout(SendXHRCandidate(this.requestMethod,this.responseURL,this.getResponseHeader("content-type"),this.response,t),0),r)return r.apply(this,arguments)},n.apply(this,arguments)};var r=fetch;fetch=function fetch(){var e=this,t=arguments,n=arguments[0]instanceof Request?arguments[0].url:arguments[0],i=arguments[0]instanceof Request?arguments[0].method:"GET";return new Promise((function(o,s){r.apply(e,t).then((function(e){if(e.body instanceof ReadableStream){var t=e.json;e.json=function(){var r=arguments,o=this;return new Promise((function(s,a){t.apply(o,r).then((function(t){setTimeout(SendXHRCandidate(i,n,e.headers.get("content-type"),JSON.stringify(t)),0),s(t)})).catch((function(e){a(e)}))}))};var r=e.text;e.text=function(){var t=arguments,o=this;return new Promise((function(s,a){r.apply(o,t).then((function(t){setTimeout(SendXHRCandidate(i,n,e.headers.get("content-type"),t),0),s(t)})).catch((function(e){a(e)}))}))}}o.apply(this,arguments)})).catch((function(){s.apply(this,arguments)}))}))}})(["facebook.com/","twitter.com/","youtube-nocookie.com/embed/","//vk.com/","//www.vk.com/","//linkedin.com/","//www.linkedin.com/","//instagram.com/","//www.instagram.com/","//www.google.com/recaptcha/api2/","//hangouts.google.com/webchat/","//www.google.com/calendar/","//www.google.com/maps/embed","spotify.com/","soundcloud.com/","//player.vimeo.com/","//disqus.com/","//tgwidget.com/","//js.driftt.com/","friends2follow.com","/widget","login","//video.bigmir.net/","blogger.com","//smartlock.google.com/","//keep.google.com/","/web.tolstoycomments.com/","moz-extension://","chrome-extension://","/auth/","//analytics.google.com/","adclarity.com","paddle.com/checkout","hcaptcha.com","recaptcha.net","2captcha.com","accounts.google.com","www.google.com/shopping/customerreviews","buy.tinypass.com","gstatic.com","secureir.ebaystatic.com","docs.google.com","contacts.google.com","github.com","mail.google.com","chat.google.com","audio.xpleer.com","keepa.com"]);</script></head><body bis_register="W3sibWFzdGVyIjp0cnVlLCJleHRlbnNpb25JZCI6ImVwcGlvY2VtaG1ubGJoanBsY2drb2ZjaWllZ29tY29uIiwiYWRibG9ja2VyU3RhdHVzIjp7IkRJU1BMQVkiOiJkaXNhYmxlZCIsIkZBQ0VCT09LIjoiZGlzYWJsZWQiLCJUV0lUVEVSIjoiZGlzYWJsZWQiLCJSRURESVQiOiJkaXNhYmxlZCIsIlBJTlRFUkVTVCI6ImRpc2FibGVkIn0sInZlcnNpb24iOiIxLjkuMTIiLCJzY29yZSI6MTA5MTJ9XQ=="><br> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Postagem de Medalhas</title> <link rel="icon" href="https://i.imgur.com/bIJUIsH.gif"> <link rel="stylesheet" href="css.css"> <meta name="viewport" content="width=device-width, initial-scales=1.0"><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> <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}; }) http://1.1 SE VALIDAÇÃO É VERIFICADA: 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; http://1.1.1 ENVIO DA RESPOSTA PARA PLANILHA 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.!')) http://1.1.2 ENVIO DA RESPOSTA PARA FÓRUM 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); } http://1.2 SE VALIDAÇÃO NÃO É VERIFICADA: else{ alert('Preencha todos os campos!') }; } </script></body></html>

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.

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:

formulario - Fonte bugada em formulário HTML Imagem18

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

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>

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

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!

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

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".

Hitskin.com

Fonte bugada em formulário HTML