ArtigosFormulário personalizado não cria a quebra de linha
5 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Formulário personalizado não cria a quebra de linha
por Joseplay 23.05.21 20:08
Detalhes da questão
Endereço do fórum: https://forumfam.forumeiros.com/
Versão do fórum: ModernBB
Descrição
Eu já fiz de tudo mas não posta o Formulário. Já ativei em Segurança deixei a opção "Não" mas não foi também alguém me ajuda por favor.
Aí o Código
E a minha pagína https://forumfam.forumeiros.com/h4-
- Código:
<html><head>
<link rel="shortcut icon" href="https://i.servimg.com/u/f35/20/34/18/65/pmfam10.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Formulário: Exonerações</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<style type="text/css">
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #5db7fe;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
/* Typography and Stylization */
.form-title h3 {
font-size: 1.5rem;
font-family: 'Poppins', sans-serif;
color: black;
text-align: center;
margin-top: -30px;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #5db7fe;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 20px;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
}
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/* End Typography and Stylization */
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.form-img {
align-items: center;
text-align: center;
justify-content: center;
display: flex;
margin: -1rem;
margin-bottom: 3rem;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 3%;
font-weight: 200;
}
.col-94 {
width: 94%;
}
.col-30 {
width: 30%;
}
.col-46 {
width: 46%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
background: #5db7fe;
box-shadow: 0 0 0 1px #aedbfe, inset 0 2px 0 rgb(255 255 255 / 50%), 0 2px 0 #fff;
padding: 20px;
border-radius: 2px;
position: relative;
bottom: 60px;
color: white;
text-align: center;
font-size: 1rem;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body>
<main class="wrapper">
<hgroup>
<h1><img src="https://i.servimg.com/u/f35/20/34/18/65/pmfam10.png"></h1>
</hgroup>
<div class="title">
<form id="form-content">
<div class="title">
<h4>Preencha os dados corretamente. No caso dos campos opcionais, se não quiser preencher com dados relevantes, deixe vazio.</h4>
</div>
<h3>Dados do requerente</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="npunidor">Seu nickname:</label>
<input type="text" id="npunidor" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="cpunidor">O seu posto atual:</label>
<input type="text" id="cpunidor" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="tagpunidor">Sua TAG/TAG do Órgão:</label>
<input type="text" id="tagpunidor" class="form-control" placeholder="A TAG (sem [ ])" maxlength="3" required="">
</div>
</div>
<h3>Dados da exoneração</h3>
<div class="form-group">
<div class="form-group-col col-30" style="margin-right: 100%;">
<label for="dataexo">Data da exoneração:</label>
<input type="text" id="dataexo" class="form-control" disabled="">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-30">
<label for="nickexo">Nickname do exonerado:</label>
<input type="text" id="nickexo" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="tagexo">TAG que o militar porta:</label>
<input type="text" id="tagexo" class="form-control" placeholder="TAG do militar (sem [ ])" maxlength="3" required="">
</div>
<div class="form-group-col col-30">
<span class="card">OPCIONAL</span>
<label for="dataexof">Prazo:</label>
<input type="text" id="dataexof" class="form-control" placeholder="DD MMM AAAA" maxlength="11">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="motivos">Crimes que o exonerado cometeu:</label>
<input type="text" id="motivos" class="form-control" placeholder="Separe por / a cada crime que o exonerado cometeu" required="">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="coment">Provas:</label>
<textarea data-type="textarea" id="coment" class="form-control" placeholder="" required=""></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="autorizacao">Autorizações:</label>
<input type="text" id="autorizacao" class="form-control" placeholder="" required="">
</div>
</div>
<br>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div></main>
<script>
var instance = new Date();
var month =["Jan","Fev","Mar", "Abr","Mai","Jun", "Jul","Ago","Set", "Out","Nov","Dez"];
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
document.getElementById('dataexo').value = date;
</script>
<textarea style="display: none;" id="post-msg">[center][b][color=#ff0000]Modelo I - Pedido de Exoneração[/color][/b][/center]
Eu, militar {{nickpun}}, patente/cargo {{patpun}} solicito a exoneração do policial {{nickdes}}, cuja TAG é [{{tag}}], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.
[b]Provas:[/b] {{coment}}
{{nickdes}} [{{tag}}] [b]{{{motivos}}}[/b] [{{tagpunidor}}] - {{dataexo}} à {{dataexof}}
[b]Autorização:[/b] {{autorizacao}}</textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(function () {
$('#form-content').on('submit', function (event) {
var data = {
npunidor: $('#npunidor').val(),
cpunidor: $('#cpunidor').val(),
tagpunidor: $('#tagpunidor').val(),
nickexo: $('#nickexo').val(),
tagexo: $('#tagexo').val(),
dataexo: $('#dataexo').val(),
dataexof: '',
motivos: $('#motivos').val(),
coment: $('#coment').val(),
autorizacao: $('#autorizacao').val(),
};
if ($('#dataexof').val() === '') {
data.dataexof = 'Indeterminado';
} else {
data.dataexof = $('#dataexof').val();
}
event.preventDefault();
setTimeout(function () {
$.post('/post', {
t: 62,
message: [
'[center][b][color=#ff0000]Modelo I - Pedido de Exoneração[/color][/b][/center]',
'',
'Eu, militar ' + data.npunidor + ', patente/cargo ' + data.cpunidor + ' solicito a exoneração do policial ' + data.nickexo + ', cuja TAG é [' + data.tagexo + '], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.',
'',
'[b]Provas:[/b] ' + data.coment,
'',
'' + data.nickexo + ' [' + data.tagexo + '] [b]{' + data.motivos + '}[/b] [' + data.tagpunidor + '] - ' + data.dataexo + ' à ' + data.dataexof,
'',
'[b]Autorizações:[/b] ' + data.autorizacao,
].join('\n'),
mode: 'reply',
tid: $('[name="tid"]:first').val(),
post: 1,
attach_sig: 'on'
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o tópico...');
location.href = '/t1-' + location.host + '/t1-?view=newest';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body></html>
Joseplay- Novo Membro
- Membro desde : 20/03/2021
Mensagens : 12
Pontos : 18 -
Re: Formulário personalizado não cria a quebra de linha
por ThiagoM. 23.05.21 21:46
Olá, altere para:
Aguardo respostas.
- Código:
<html><head>
<link rel="shortcut icon" href="https://i.servimg.com/u/f35/20/34/18/65/pmfam10.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Formulário: Exonerações</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<style type="text/css">
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #5db7fe;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
/* Typography and Stylization */
.form-title h3 {
font-size: 1.5rem;
font-family: 'Poppins', sans-serif;
color: black;
text-align: center;
margin-top: -30px;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #5db7fe;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 20px;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
}
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/* End Typography and Stylization */
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.form-img {
align-items: center;
text-align: center;
justify-content: center;
display: flex;
margin: -1rem;
margin-bottom: 3rem;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 3%;
font-weight: 200;
}
.col-94 {
width: 94%;
}
.col-30 {
width: 30%;
}
.col-46 {
width: 46%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
background: #5db7fe;
box-shadow: 0 0 0 1px #aedbfe, inset 0 2px 0 rgb(255 255 255 / 50%), 0 2px 0 #fff;
padding: 20px;
border-radius: 2px;
position: relative;
bottom: 60px;
color: white;
text-align: center;
font-size: 1rem;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body>
<main class="wrapper">
<hgroup>
<h1><img src="https://i.servimg.com/u/f35/20/34/18/65/pmfam10.png"></h1>
</hgroup>
<div class="title">
<form id="form-content">
<div class="title">
<h4>Preencha os dados corretamente. No caso dos campos opcionais, se não quiser preencher com dados relevantes, deixe vazio.</h4>
</div>
<h3>Dados do requerente</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="npunidor">Seu nickname:</label>
<input type="text" id="npunidor" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="cpunidor">O seu posto atual:</label>
<input type="text" id="cpunidor" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="tagpunidor">Sua TAG/TAG do Órgão:</label>
<input type="text" id="tagpunidor" class="form-control" placeholder="A TAG (sem [ ])" maxlength="3" required="">
</div>
</div>
<h3>Dados da exoneração</h3>
<div class="form-group">
<div class="form-group-col col-30" style="margin-right: 100%;">
<label for="dataexo">Data da exoneração:</label>
<input type="text" id="dataexo" class="form-control" disabled="">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-30">
<label for="nickexo">Nickname do exonerado:</label>
<input type="text" id="nickexo" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="tagexo">TAG que o militar porta:</label>
<input type="text" id="tagexo" class="form-control" placeholder="TAG do militar (sem [ ])" maxlength="3" required="">
</div>
<div class="form-group-col col-30">
<span class="card">OPCIONAL</span>
<label for="dataexof">Prazo:</label>
<input type="text" id="dataexof" class="form-control" placeholder="DD MMM AAAA" maxlength="11">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="motivos">Crimes que o exonerado cometeu:</label>
<input type="text" id="motivos" class="form-control" placeholder="Separe por / a cada crime que o exonerado cometeu" required="">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="coment">Provas:</label>
<textarea data-type="textarea" id="coment" class="form-control" placeholder="" required=""></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="autorizacao">Autorizações:</label>
<input type="text" id="autorizacao" class="form-control" placeholder="" required="">
</div>
</div>
<br>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div></main>
<script>
var instance = new Date();
var month =["Jan","Fev","Mar", "Abr","Mai","Jun", "Jul","Ago","Set", "Out","Nov","Dez"];
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
document.getElementById('dataexo').value = date;
</script>
<textarea style="display: none;" id="post-msg">[center][b][color=#ff0000]Modelo I - Pedido de Exoneração[/color][/b][/center]
Eu, militar {{nickpun}}, patente/cargo {{patpun}} solicito a exoneração do policial {{nickdes}}, cuja TAG é [{{tag}}], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.
[b]Provas:[/b] {{coment}}
{{nickdes}} [{{tag}}] [b]{{{motivos}}}[/b] [{{tagpunidor}}] - {{dataexo}} à {{dataexof}}
[b]Autorização:[/b] {{autorizacao}}</textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(function () {
$('#form-content').on('submit', function (event) {
var data = {
npunidor: $('#npunidor').val(),
cpunidor: $('#cpunidor').val(),
tagpunidor: $('#tagpunidor').val(),
nickexo: $('#nickexo').val(),
tagexo: $('#tagexo').val(),
dataexo: $('#dataexo').val(),
dataexof: '',
motivos: $('#motivos').val(),
coment: $('#coment').val(),
autorizacao: $('#autorizacao').val(),
};
if ($('#dataexof').val() === '') {
data.dataexof = 'Indeterminado';
} else {
data.dataexof = $('#dataexof').val();
}
event.preventDefault();
setTimeout(function () {
$.post('/post', {
t: 1,
message: [
'[center][b][color=#ff0000]Modelo I - Pedido de Exoneração[/color][/b][/center]',
'',
'Eu, militar ' + data.npunidor + ', patente/cargo ' + data.cpunidor + ' solicito a exoneração do policial ' + data.nickexo + ', cuja TAG é [' + data.tagexo + '], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.',
'',
'[b]Provas:[/b] ' + data.coment,
'',
'' + data.nickexo + ' [' + data.tagexo + '] [b]{' + data.motivos + '}[/b] [' + data.tagpunidor + '] - ' + data.dataexo + ' à ' + data.dataexof,
'',
'[b]Autorizações:[/b] ' + data.autorizacao,
].join('\n'),
mode: 'reply',
tid: $('[name="tid"]:first').val(),
post: 1,
attach_sig: 'on'
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o tópico...');
location.href = '/t1-' + location.host + '/t1-?view=newest';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body></html>
Aguardo respostas.
ThiagoM.- **
- Membro desde : 03/05/2019
Mensagens : 59
Pontos : 89 -
Re: Formulário personalizado não cria a quebra de linha
por Joseplay 24.05.21 17:40
ThiagoM. escreveu:Olá, altere para:
- Código:
<html><head>
<link rel="shortcut icon" href="https://i.servimg.com/u/f35/20/34/18/65/pmfam10.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Formulário: Exonerações</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<style type="text/css">
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #5db7fe;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
/* Typography and Stylization */
.form-title h3 {
font-size: 1.5rem;
font-family: 'Poppins', sans-serif;
color: black;
text-align: center;
margin-top: -30px;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #5db7fe;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 20px;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
}
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/* End Typography and Stylization */
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.form-img {
align-items: center;
text-align: center;
justify-content: center;
display: flex;
margin: -1rem;
margin-bottom: 3rem;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 3%;
font-weight: 200;
}
.col-94 {
width: 94%;
}
.col-30 {
width: 30%;
}
.col-46 {
width: 46%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
background: #5db7fe;
box-shadow: 0 0 0 1px #aedbfe, inset 0 2px 0 rgb(255 255 255 / 50%), 0 2px 0 #fff;
padding: 20px;
border-radius: 2px;
position: relative;
bottom: 60px;
color: white;
text-align: center;
font-size: 1rem;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body>
<main class="wrapper">
<hgroup>
<h1><img src="https://i.servimg.com/u/f35/20/34/18/65/pmfam10.png"></h1>
</hgroup>
<div class="title">
<form id="form-content">
<div class="title">
<h4>Preencha os dados corretamente. No caso dos campos opcionais, se não quiser preencher com dados relevantes, deixe vazio.</h4>
</div>
<h3>Dados do requerente</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="npunidor">Seu nickname:</label>
<input type="text" id="npunidor" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="cpunidor">O seu posto atual:</label>
<input type="text" id="cpunidor" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="tagpunidor">Sua TAG/TAG do Órgão:</label>
<input type="text" id="tagpunidor" class="form-control" placeholder="A TAG (sem [ ])" maxlength="3" required="">
</div>
</div>
<h3>Dados da exoneração</h3>
<div class="form-group">
<div class="form-group-col col-30" style="margin-right: 100%;">
<label for="dataexo">Data da exoneração:</label>
<input type="text" id="dataexo" class="form-control" disabled="">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-30">
<label for="nickexo">Nickname do exonerado:</label>
<input type="text" id="nickexo" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="tagexo">TAG que o militar porta:</label>
<input type="text" id="tagexo" class="form-control" placeholder="TAG do militar (sem [ ])" maxlength="3" required="">
</div>
<div class="form-group-col col-30">
<span class="card">OPCIONAL</span>
<label for="dataexof">Prazo:</label>
<input type="text" id="dataexof" class="form-control" placeholder="DD MMM AAAA" maxlength="11">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="motivos">Crimes que o exonerado cometeu:</label>
<input type="text" id="motivos" class="form-control" placeholder="Separe por / a cada crime que o exonerado cometeu" required="">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="coment">Provas:</label>
<textarea data-type="textarea" id="coment" class="form-control" placeholder="" required=""></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="autorizacao">Autorizações:</label>
<input type="text" id="autorizacao" class="form-control" placeholder="" required="">
</div>
</div>
<br>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div></main>
<script>
var instance = new Date();
var month =["Jan","Fev","Mar", "Abr","Mai","Jun", "Jul","Ago","Set", "Out","Nov","Dez"];
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
document.getElementById('dataexo').value = date;
</script>
<textarea style="display: none;" id="post-msg">[center][b][color=#ff0000]Modelo I - Pedido de Exoneração[/color][/b][/center]
Eu, militar {{nickpun}}, patente/cargo {{patpun}} solicito a exoneração do policial {{nickdes}}, cuja TAG é [{{tag}}], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.
[b]Provas:[/b] {{coment}}
{{nickdes}} [{{tag}}] [b]{{{motivos}}}[/b] [{{tagpunidor}}] - {{dataexo}} à {{dataexof}}
[b]Autorização:[/b] {{autorizacao}}</textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(function () {
$('#form-content').on('submit', function (event) {
var data = {
npunidor: $('#npunidor').val(),
cpunidor: $('#cpunidor').val(),
tagpunidor: $('#tagpunidor').val(),
nickexo: $('#nickexo').val(),
tagexo: $('#tagexo').val(),
dataexo: $('#dataexo').val(),
dataexof: '',
motivos: $('#motivos').val(),
coment: $('#coment').val(),
autorizacao: $('#autorizacao').val(),
};
if ($('#dataexof').val() === '') {
data.dataexof = 'Indeterminado';
} else {
data.dataexof = $('#dataexof').val();
}
event.preventDefault();
setTimeout(function () {
$.post('/post', {
t: 1,
message: [
'[center][b][color=#ff0000]Modelo I - Pedido de Exoneração[/color][/b][/center]',
'',
'Eu, militar ' + data.npunidor + ', patente/cargo ' + data.cpunidor + ' solicito a exoneração do policial ' + data.nickexo + ', cuja TAG é [' + data.tagexo + '], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.',
'',
'[b]Provas:[/b] ' + data.coment,
'',
'' + data.nickexo + ' [' + data.tagexo + '] [b]{' + data.motivos + '}[/b] [' + data.tagpunidor + '] - ' + data.dataexo + ' à ' + data.dataexof,
'',
'[b]Autorizações:[/b] ' + data.autorizacao,
].join('\n'),
mode: 'reply',
tid: $('[name="tid"]:first').val(),
post: 1,
attach_sig: 'on'
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o tópico...');
location.href = '/t1-' + location.host + '/t1-?view=newest';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body></html>
Aguardo respostas.
MAs como eu faço isso com os outros? Eu tenho vários para a minha PM.
Joseplay- Novo Membro
- Membro desde : 20/03/2021
Mensagens : 12
Pontos : 18 -
Re: Formulário personalizado não cria a quebra de linha
por Shek 24.05.21 21:31
Boa noite.Joseplay escreveu:MAs como eu faço isso com os outros? Eu tenho vários para a minha PM.
Recomendo uma busca pelo fórum antes de iniciar sua pergunta. Outras dúvidas resolvidas podem sanar a sua. Por enquanto, sugiro:
- https://ajuda.forumeiros.com/t32404-topic#753877
- https://ajuda.forumeiros.com/t78600-topic
- https://ajuda.forumeiros.com/t110624-topic
O primeiro link contém um vídeo que explica como realizar os processos rápidos para uso de formulários. Caso não seja isso, favor esclarecer com mais detalhes sua pergunta.
Atenciosamente,
Shek
Shek- Principal Contribuidor
- Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969 -
Re: Formulário personalizado não cria a quebra de linha
por Joseplay 25.05.21 15:17
Eu fiz isso mas não tá postando...
Joseplay- Novo Membro
- Membro desde : 20/03/2021
Mensagens : 12
Pontos : 18 -
ThiagoM.- **
- Membro desde : 03/05/2019
Mensagens : 59
Pontos : 89 -
Re: Formulário personalizado não cria a quebra de linha
por Shek 26.05.21 14:23
Fez o quê, exatamente?Joseplay escreveu:Eu fiz isso mas não tá postando...
Caso essa solução não seja o que precise, cito que o vídeo tutorial incluso no tópico que mencionei, ajudaria a solucionar suas dúvidas. Queira informar caso tenha novos problemas, por favor.ThiagoM. escreveu:Olá @Joseplay .
Eu apenas alterei a linha 428.
- Código:
428. t: 62,
para:
- Código:
428. t: 1,
Bye.
Até mais.
Shek- Principal Contribuidor
- Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969 -
Re: Formulário personalizado não cria a quebra de linha
por Joseplay 27.05.21 14:45
Deu certo, mas quando posto fico desse jeito.
nnEu, militar Joseplay, patente/cargo Joseplay solicito a exoneração do policial Joseplay, cuja TAG é [Jos], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.nnProvas: annJoseplay [Jos] {Joseplay} [Jos] - 27 Mai 2021 à IndeterminadonnAutorizações: aaa
nnEu, militar Joseplay, patente/cargo Joseplay solicito a exoneração do policial Joseplay, cuja TAG é [Jos], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.nnProvas: annJoseplay [Jos] {Joseplay} [Jos] - 27 Mai 2021 à IndeterminadonnAutorizações: aaa
Joseplay- Novo Membro
- Membro desde : 20/03/2021
Mensagens : 12
Pontos : 18 -
Re: Formulário personalizado não cria a quebra de linha
por Shek 27.05.21 22:42
Olá.
Tente com este código:
Tente com este código:
- Código:
<html><head>
<link rel="shortcut icon" href="https://i.servimg.com/u/f35/20/34/18/65/pmfam10.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Formulário: Exonerações</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<style type="text/css">
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #5db7fe;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
/* Typography and Stylization */
.form-title h3 {
font-size: 1.5rem;
font-family: 'Poppins', sans-serif;
color: black;
text-align: center;
margin-top: -30px;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #5db7fe;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 20px;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
}
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/* End Typography and Stylization */
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.form-img {
align-items: center;
text-align: center;
justify-content: center;
display: flex;
margin: -1rem;
margin-bottom: 3rem;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 3%;
font-weight: 200;
}
.col-94 {
width: 94%;
}
.col-30 {
width: 30%;
}
.col-46 {
width: 46%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
background: #5db7fe;
box-shadow: 0 0 0 1px #aedbfe, inset 0 2px 0 rgb(255 255 255 / 50%), 0 2px 0 #fff;
padding: 20px;
border-radius: 2px;
position: relative;
bottom: 60px;
color: white;
text-align: center;
font-size: 1rem;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body>
<main class="wrapper">
<hgroup>
<h1><img src="https://i.servimg.com/u/f35/20/34/18/65/pmfam10.png"></h1>
</hgroup>
<div class="title">
<form id="form-content">
<div class="title">
<h4>Preencha os dados corretamente. No caso dos campos opcionais, se não quiser preencher com dados relevantes, deixe vazio.</h4>
</div>
<h3>Dados do requerente</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="npunidor">Seu nickname:</label>
<input type="text" id="npunidor" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="cpunidor">O seu posto atual:</label>
<input type="text" id="cpunidor" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="tagpunidor">Sua TAG/TAG do Órgão:</label>
<input type="text" id="tagpunidor" class="form-control" placeholder="A TAG (sem [ ])" maxlength="3" required="">
</div>
</div>
<h3>Dados da exoneração</h3>
<div class="form-group">
<div class="form-group-col col-30" style="margin-right: 100%;">
<label for="dataexo">Data da exoneração:</label>
<input type="text" id="dataexo" class="form-control" disabled="">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-30">
<label for="nickexo">Nickname do exonerado:</label>
<input type="text" id="nickexo" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="tagexo">TAG que o militar porta:</label>
<input type="text" id="tagexo" class="form-control" placeholder="TAG do militar (sem [ ])" maxlength="3" required="">
</div>
<div class="form-group-col col-30">
<span class="card">OPCIONAL</span>
<label for="dataexof">Prazo:</label>
<input type="text" id="dataexof" class="form-control" placeholder="DD MMM AAAA" maxlength="11">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="motivos">Crimes que o exonerado cometeu:</label>
<input type="text" id="motivos" class="form-control" placeholder="Separe por / a cada crime que o exonerado cometeu" required="">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="coment">Provas:</label>
<textarea data-type="textarea" id="coment" class="form-control" placeholder="" required=""></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="autorizacao">Autorizações:</label>
<input type="text" id="autorizacao" class="form-control" placeholder="" required="">
</div>
</div>
<br>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div></main>
<script>
var instance = new Date();
var month =["Jan","Fev","Mar", "Abr","Mai","Jun", "Jul","Ago","Set", "Out","Nov","Dez"];
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
document.getElementById('dataexo').value = date;
</script>
<textarea style="display: none;" id="post-msg">[center][b][color=#ff0000]Modelo I - Pedido de Exoneração[/color][/b][/center]
Eu, militar {{nickpun}}, patente/cargo {{patpun}} solicito a exoneração do policial {{nickdes}}, cuja TAG é [{{tag}}], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.
[b]Provas:[/b] {{coment}}
{{nickdes}} [{{tag}}] [b]{{{motivos}}}[/b] [{{tagpunidor}}] - {{dataexo}} à {{dataexof}}
[b]Autorização:[/b] {{autorizacao}}</textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(function () {
$('#form-content').on('submit', function (event) {
var data = {
npunidor: $('#npunidor').val(),
cpunidor: $('#cpunidor').val(),
tagpunidor: $('#tagpunidor').val(),
nickexo: $('#nickexo').val(),
tagexo: $('#tagexo').val(),
dataexo: $('#dataexo').val(),
dataexof: '',
motivos: $('#motivos').val(),
coment: $('#coment').val(),
autorizacao: $('#autorizacao').val(),
};
if ($('#dataexof').val() === '') {
data.dataexof = 'Indeterminado';
} else {
data.dataexof = $('#dataexof').val();
}
event.preventDefault();
setTimeout(function () {
$.post('/post', {
t: 1,
message: [
'[center][b][color=#ff0000]Modelo I - Pedido de Exoneração[/color][/b][/center]\n\n',
'',
'Eu, militar ' + data.npunidor + ', patente/cargo ' + data.cpunidor + ' solicito a exoneração do policial ' + data.nickexo + ', cuja TAG é [' + data.tagexo + '], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.\n',
'[b]Provas:[/b] ' + data.coment,
'\n',
'' + data.nickexo + ' [' + data.tagexo + '] [b]{' + data.motivos + '}[/b] [' + data.tagpunidor + '] - ' + data.dataexo + ' à ' + data.dataexof,
'\n\n',
'[b]Autorizações:[/b] ' + data.autorizacao,
],
mode: 'reply',
tid: $('[name="tid"]:first').val(),
post: 1,
attach_sig: 'on'
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o tópico...');
location.href = '/t1-' + location.host + '/t1-?view=newest';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body></html>
Shek- Principal Contribuidor
- Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969 -
Re: Formulário personalizado não cria a quebra de linha
por Joseplay 29.05.21 17:39
Ok, irei tentar. Mas poderia me dizer o que você mudo?
Joseplay- Novo Membro
- Membro desde : 20/03/2021
Mensagens : 12
Pontos : 18 -
Re: Formulário personalizado não cria a quebra de linha
por Shek 29.05.21 21:02
Olá!
O \n do join deveria quebrar as linhas no ato da inserção do BBcode na caixa de texto no ato da execução do código (acho que o nome é concatenação ou algo assim). Mais detalhes aqui: https://pt.stackoverflow.com/questions/110701/o-que-significa-o-atalho-s-nas-regex
O que fiz foi remover o .join e inseri-las manualmente no código. Deu certo?
Até mais.
O \n do join deveria quebrar as linhas no ato da inserção do BBcode na caixa de texto no ato da execução do código (acho que o nome é concatenação ou algo assim). Mais detalhes aqui: https://pt.stackoverflow.com/questions/110701/o-que-significa-o-atalho-s-nas-regex
O que fiz foi remover o .join e inseri-las manualmente no código. Deu certo?
Até mais.
Shek- Principal Contribuidor
- Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969 -
Joseplay- Novo Membro
- Membro desde : 20/03/2021
Mensagens : 12
Pontos : 18 -
Re: Formulário personalizado não cria a quebra de linha
por tikky 04.06.21 18:10
Olá @Joseplay,
É sempre importante dar mais detalhe do que "não deu", essa resposta é considerada inútil, pois não traz nada de útil para solucionar a questão de forma eficaz, para além do "UP". Altere a sua página para:
Atenciosamente,
pedxz.
Joseplay escreveu:Não, deu.
É sempre importante dar mais detalhe do que "não deu", essa resposta é considerada inútil, pois não traz nada de útil para solucionar a questão de forma eficaz, para além do "UP". Altere a sua página para:
- Código:
<html><head>
<link rel="shortcut icon" href="https://i.servimg.com/u/f35/20/34/18/65/pmfam10.png">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Formulário: Exonerações</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<style type="text/css">
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-size: 17px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: normal;
line-height: 1.5;
color: #212121;
line-height: 1.5;
background: linear-gradient(270deg, rgba(203, 203, 203, 0.56) 10%, rgba(186, 186, 186, 0.11) 20%, #fafafa 30%, #fff 100%);
}
/**
* Begin tipografia.
*/
a,
a:active,
a:link,
a:visited,
a:focus {
color: #5db7fe;
text-decoration: none;
border-bottom: solid 1px transparent;
outline: 0;
}
a:hover {
border-bottom-color: #2688dc;
}
a.fa:hover {
border-bottom-color: transparent;
color: #1f6db0;
}
textarea {
height: 90px;
box-sizing: border-box;
resize: vertical;
outline: none;
}
/* Typography and Stylization */
.form-title h3 {
font-size: 1.5rem;
font-family: 'Poppins', sans-serif;
color: black;
text-align: center;
margin-top: -30px;
}
.btn {
border: solid 1px #e4e4e4;
background: linear-gradient(180deg, #fff 0%, #efefef 100%);
padding: .575rem 1.1rem;
border-radius: .175rem;
font-weight: 600;
color: #686a6b;
cursor: pointer;
display: block;
text-align: center;
margin-bottom: 5px;
width: 100%;
}
.btn:focus {
border-color: #375e7f;
box-shadow: inset 0 -5px 40px rgba(120, 120, 120, 0.1), inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(0, 0, 0, 0.1);
outline: none;
}
.btn:hover {
box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
}
.btn.btn-primary {
border-radius: 3px;
box-shadow: none;
color: #fff;
background: #5db7fe;
}
.btn.btn-primary:focus {
border-color: #375e7f;
box-shadow: inset 0 1px 2px rgba(39, 56, 28, 0.075), 0 0 0 0.2em rgba(39, 56, 28, 0.6);
outline: none;
}
.btn.btn-primary:hover {
background: #444;
}
.btn.btn-danger {
color: #fff;
border-color: #bd2c00;
background: #e7592e;
background: linear-gradient(180deg, #f86b40 0%, #bd2c00 100%);
}
.btn.btn-danger:focus {
border-color: #aa2c05;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075), 0 0 0 0.2em rgba(197, 53, 9, 0.66);
outline: none;
}
.btn-progress {
cursor: not-allowed;
opacity: .657;
}
.form-control {
background-color: #fff;
border: 1px solid #d4d4d4;
padding: 6px 8px;
margin: 5px 0 20px;
display: block;
width: 100%;
font-size: 16px;
color: #555;
line-height: 20px;
border-radius: 3px;
box-shadow: inset 0 1px 2px rgba(27, 31, 35, 0.075);
outline: none;
}
.form-control:focus {
border-color: #4b6b35;
box-shadow: inset 0 1px 2px rgba(75, 107, 53, 0.075), 0 0 0 0.2em rgba(75, 107, 53, 0.6);
outline: none;
}
input[type="text"]:disabled {
background: #dddddd;
cursor: not-allowed;
}
.card {
background-color: #E54732;
padding: 5px;
font-size: 10px;
color: #fff;
font-weight: 800;
border-radius: 5px;
float: left;
margin-right: 5px;
}
/* End Typography and Stylization */
.wrapper {
width: 50%;
position: absolute;
top: 5%;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.wrapper hgroup {
text-align: center;
}
.wrapper hgroup i.fa {
font-size: 4em;
}
.form-img {
align-items: center;
text-align: center;
justify-content: center;
display: flex;
margin: -1rem;
margin-bottom: 3rem;
}
.wrapper form {
border: solid 1px #d4d4d4;
margin: 0 0 25px;
padding: 20px;
color: #555;
border-radius: 4px;
background-color: #fff;
}
.wrapper form .form-group label {
display: table;
}
.wrapper form .form-group .form-group-col {
float: left;
margin-right: 2%;
margin-top: 2%;
}
.form-group .form-group-col:first-child {
margin-left: 3%;
}
.wrapper footer {
border: solid 1px #d6d6d6;
border-radius: 3px;
padding: 13px;
text-align: center;
font-size: 16px;
color: #555;
margin-bottom: 3%;
font-weight: 200;
}
.col-94 {
width: 94%;
}
.col-30 {
width: 30%;
}
.col-46 {
width: 46%;
}
/**
* FOR JS Styles:
*/
#login-form,
footer {
box-shadow: 3px 3px 2px 0px rgba(0, 0, 0, 0.16);
}
.title h2 {
font-weight: 300;
margin-bottom: 5px;
text-align: center;
}
.title h4 {
background: #5db7fe;
box-shadow: 0 0 0 1px #aedbfe, inset 0 2px 0 rgb(255 255 255 / 50%), 0 2px 0 #fff;
padding: 20px;
border-radius: 2px;
position: relative;
bottom: 60px;
color: white;
text-align: center;
font-size: 1rem;
}
@media screen and (max-width: 900px) {
.wrapper {
width: 40%;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 70%;
}
}
@media screen and (max-width: 500px) {
.wrapper {
width: 80%;
}
}
@media screen and (max-width: 400px) {
.wrapper {
width: 90%;
}
}
</style>
</head>
<body>
<main class="wrapper">
<hgroup>
<h1><img src="https://i.servimg.com/u/f35/20/34/18/65/pmfam10.png"></h1>
</hgroup>
<div class="title">
<form id="form-content">
<div class="title">
<h4>Preencha os dados corretamente. No caso dos campos opcionais, se não quiser preencher com dados relevantes, deixe vazio.</h4>
</div>
<h3>Dados do requerente</h3>
<div class="form-group" style="margin-bottom: 15%;">
<div class="form-group-col col-30">
<label for="npunidor">Seu nickname:</label>
<input type="text" id="npunidor" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="cpunidor">O seu posto atual:</label>
<input type="text" id="cpunidor" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="tagpunidor">Sua TAG/TAG do Órgão:</label>
<input type="text" id="tagpunidor" class="form-control" placeholder="A TAG (sem [ ])" maxlength="3" required="">
</div>
</div>
<h3>Dados da exoneração</h3>
<div class="form-group">
<div class="form-group-col col-30" style="margin-right: 100%;">
<label for="dataexo">Data da exoneração:</label>
<input type="text" id="dataexo" class="form-control" disabled="">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-30">
<label for="nickexo">Nickname do exonerado:</label>
<input type="text" id="nickexo" class="form-control" placeholder="" required="">
</div>
<div class="form-group-col col-30">
<label for="tagexo">TAG que o militar porta:</label>
<input type="text" id="tagexo" class="form-control" placeholder="TAG do militar (sem [ ])" maxlength="3" required="">
</div>
<div class="form-group-col col-30">
<span class="card">OPCIONAL</span>
<label for="dataexof">Prazo:</label>
<input type="text" id="dataexof" class="form-control" placeholder="DD MMM AAAA" maxlength="11">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="motivos">Crimes que o exonerado cometeu:</label>
<input type="text" id="motivos" class="form-control" placeholder="Separe por / a cada crime que o exonerado cometeu" required="">
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="coment">Provas:</label>
<textarea data-type="textarea" id="coment" class="form-control" placeholder="" required=""></textarea>
</div>
</div>
<div class="form-group">
<div class="form-group-col col-94">
<label for="autorizacao">Autorizações:</label>
<input type="text" id="autorizacao" class="form-control" placeholder="" required="">
</div>
</div>
<br>
<button type="submit" class="btn btn-primary">Enviar</button>
</form>
</div></main>
<script>
var instance = new Date();
var month =["Jan","Fev","Mar", "Abr","Mai","Jun", "Jul","Ago","Set", "Out","Nov","Dez"];
var day = (!! instance.getDate().toString()[1]) ? instance.getDate() : '0' + instance.getDate();
var month_index = instance.getMonth();
var year = instance.getFullYear();
var date = [ day, month[month_index], year ].join(" ");
document.getElementById('dataexo').value = date;
</script>
<textarea style="display: none;" id="post-msg">[center][b][color=#ff0000]Modelo I - Pedido de Exoneração[/color][/b][/center]
Eu, militar {{nickpun}}, patente/cargo {{patpun}} solicito a exoneração do policial {{nickdes}}, cuja TAG é [{{tag}}], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.
[b]Provas:[/b] {{coment}}
{{nickdes}} [{{tag}}] [b]{{{motivos}}}[/b] [{{tagpunidor}}] - {{dataexo}} à {{dataexof}}
[b]Autorização:[/b] {{autorizacao}}</textarea>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function ($) {
'use strict';
$(function () {
$('#form-content').on('submit', function (event) {
var data = {
npunidor: $('#npunidor').val(),
cpunidor: $('#cpunidor').val(),
tagpunidor: $('#tagpunidor').val(),
nickexo: $('#nickexo').val(),
tagexo: $('#tagexo').val(),
dataexo: $('#dataexo').val(),
dataexof: '',
motivos: $('#motivos').val(),
coment: $('#coment').val(),
autorizacao: $('#autorizacao').val(),
};
if ($('#dataexof').val() === '') {
data.dataexof = 'Indeterminado';
} else {
data.dataexof = $('#dataexof').val();
}
event.preventDefault();
setTimeout(function () {
$.post('/post', {
t: 1,
message: [
'[center][b][color=#ff0000]Modelo I - Pedido de Exoneração[/color][/b][/center]\n\n',
'Eu, militar ' + data.npunidor + ', patente/cargo ' + data.cpunidor + ' solicito a exoneração do policial ' + data.nickexo + ', cuja TAG é [' + data.tagexo + '], por motivos gravíssimos. O policial está impedido de entrar no Pelotão Armado Brasileiro como recruta ou membro do Corpo Executivo até o fim de sua exoneração.\n',
'[b]Provas:[/b] ' + data.coment,
'' + data.nickexo + ' [' + data.tagexo + '] [b]{' + data.motivos + '}[/b] [' + data.tagpunidor + '] - ' + data.dataexo + ' à ' + data.dataexof,
'[b]Autorizações:[/b] ' + data.autorizacao
].join('\n'),
mode: 'reply',
tid: $('[name="tid"]:first').val(),
post: 1,
attach_sig: 'on'
}).done(function () {
alert('Postado com sucesso. Você será redirecionado para o tópico...');
location.href = '/t1-' + location.host + '/t1-?view=newest';
}).fail(function () {
alert('Houve um erro! Tente novamente!');
});
}, 600);
});
});
}(jQuery));
</script>
</body></html>
Atenciosamente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Formulário personalizado não cria a quebra de linha
por Lobs 10.06.21 13:35
Tópico resolvidoTópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão. |
Lobs- ****
- Membro desde : 02/06/2013
Mensagens : 323
Pontos : 378 -
Tópicos semelhantes» Quebra de linha no formulário
» Formulário não dá quebra de linha
» Quebra de linha
» Quebra de linha nos textos
» Quebra de linha do perfil
» Formulário não dá quebra de linha
» Quebra de linha
» Quebra de linha nos textos
» Quebra de linha do perfil
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos