Problema em formulário HTML

Detalhes da questão

Endereço do fórum: https://www.pmhabbo.com/
Versão do fórum: ModernBB
Acesso ao fórum:
[Tens de participar na questão para poderes visualizar o acesso]

Descrição

Olá

Estou com um problema em meu fórum, é referente a um formulário de postagem HTML, eu consigo preenchêl-lo normalmente em todos os campos e postar a mensagem, no entanto, o campo 'motivo:' não é englobado no momento em que clico em enviar. Assim sendo, o motivo do preenchimento daquele formulário não fica declarado, apesar de ser existente o campo no forms e no código para o preenchimento.

Forms e Resultado do post sem o motivo: https://imgur.com/a/33ccPX1

Código:

<!--  Layout desenvolvido por Forumeiros  -->    <meta charset="UTF-8" />    <meta content="IE=edge" http-equiv="X-UA-Compatible" />    <meta content="width=device-width, initial-scale=1.0" name="viewport" />    <title>Medalha Militar: Gratificações</title>    <link href="https://www.habbo.com.br/habbo-imaging/badge/b22134s36044s85015s95014s96013dd911246822191a7ffb37b8e407217aa.gif" type="image/x-icon" rel="icon" />    <link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />    <link href="https://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" />    <style type="text/css">
      body {
        height: 100vh;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 1em;
        line-height: 1.5em;
      }

      a,
      a:active,
      a:link,
      a:visited,
      a:focus {
        color: #fff;
        text-decoration: none;
      }

      h2 {
        display: block;
        width: 100%;
        margin: 30px 0;
        padding-bottom: 5px;
        text-align: left;
        font-size: 1.2em;
        font-weight: 400;
        border-bottom: 2px solid #0c78a6;
        cursor: default;
      }

      p {
        cursor: default;
      }

      label {
        margin-left: 6px;
      }

      input,
      select,
      textarea {
        padding: 6px 5px;
        margin: 5px;
        font-size: 1em;
        color: #555;
        border-radius: 6px;
        border: 1px solid #d4d4d4;
      }

      input[type="text"]:disabled {
        background: #ddd;
        cursor: not-allowed;
      }

      input::placeholder {
        color: #9b9b9b;
      }

      .caixa {
        text-align: center;
        margin-bottom: 25px;
        padding: 15px;
        color: #555;
        border: 1px solid #d4d4d4;
        box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      }

      .caixa:last-of-type {
        margin-top: 20px;
      }

      .container-forms {
        display: flex;
        flex-direction: column;
      }

      .coluna {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(100px, 100%));
        text-align: start;
        width: 100%;
      }

      .pill {
        cursor: default;
        margin-left: 5px;
        padding: 3px 4px;
        font-size: 0.5em;
        font-weight: 700;
        color: #fff;
        border: 1px solid black;
        border-radius: 15px;
        background-color: rgb(207, 0, 0);
        box-shadow: inset 0 3px rgb(255 255 255 / 20%), inset 0 -4px rgb(0 0 0 / 10%), inset 0 -25px rgb(0 0 0 / 3%), inset 0 0 0 1px rgb(0 0 0 / 25%);
      }

      .botao {
        width: 90%;
        margin: 15px auto 5px;
        padding: 10px;
        background: #0c78a6;
        color: #fff;
        border-radius: 3px;
        border-color: #375e7f;
        cursor: pointer;
        outline: none;
        font-size: 0.9em;
        font-weight: 600;
        transition: linear all 125ms;
      }

      .botao:hover {
        background: #444;
        border-color: #444;
        box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
        transition: linear all 125ms;
      }

      .botao:last-of-type {
        margin-bottom: 0;
      }

      #container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
        width: 50%;
        max-width: 675px;
      }

      #caixa-logo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      #logo {
        width: 210px;
        display: block;
      }

      #botao-voltar {
        display: block;
        float: left;
        color: #0c78a6;
        transition: linear all 125ms;
      }

      #botao-voltar:hover {
        color: #444;
        transition: linear all 125ms;
      }

      @media screen and (max-width: 1090px) {
        body {
          font-size: 90%;
        }

        #container {
          width: 90%;
        }

        .container-forms {
          flex-direction: column;
        }
      }
    </style>          <div id="container">
        
   <div id="caixa-logo">
              <a href="https://pmhh.forumeiros.com/">          <img title="Voltar ao fórum da PMHH" src="https://i.imgur.com/KA6vUCb.png" id="logo" />        </a>     
   </div>
        
   <div class="caixa">
              <a href="/t3272-" id="botao-voltar"><em class="fas fa-arrow-left"></em></a>       
      <p style="text-align: center">
         Lembre-se: O preenchimento incorreto das colunas resultará em cancelamento do requerimento.
      </p>
             
      <h2>
         Dados do requerente
      </h2>
             
      <form id="form-content">
                  
         <div class="container-forms">
                       
            <div class="coluna">
                             <label for="nickname">Seu nickname:</label>              <input required="" placeholder="Coloque o seu nickname" id="nickname" type="text" />           
            </div>
                     
         </div>
                  
         <div class="coluna">
                        <label for="nickGrat">Militar(es) gratificados:</label>            <input required="" placeholder="Coloque o(s) nick(s) do(s) gratificado(s) aqui. Caso tenha mais de um, separe-os em /" id="nickGrat" type="text" />           
         </div>
                  
         <div class="container-forms">
                       
            <div class="coluna">
                             <label for="tipoGrat">Tipo de Gratificação:</label>              <input required="" placeholder="Coloque o tipo de gratificação: Positiva ou Negativa" id="tipoGrat" type="text" />           
            </div>
                       
            <div class="coluna">
                             <label for="quantidade">Quantidade de gratificação:</label>              <input required="" placeholder="Coloque a quantidade de gratificação" id="quantidade" type="text" />           
            </div>
                      <div class="coluna">
                      <label for="motivos">Motivos:</label>                                  <input required="" placeholder="Coloque o motivo da gratificação: Motivo" id="tipoGrat" type="text" />
            </div>
                     
         </div>
                    
         <div class="container-forms">
                       
            <div class="coluna">
                             <label for="permissao">Permissão:</label>              <input required="" placeholder="Coloque a permissão do miltiar que deixou realizar a gratificação." id="permissao" type="text" />           
            </div>
                     
            <div style="margin-top: 25px; cursor: default">
                           <input required="" value="X" name="termos" type="checkbox" id="check" /> Li e concordo com as normas de licença.         
            </div>
                     
            <button type="submit" class="botao">
               Enviar
            </button>
                         
         </div>
      </form>
         
   </div>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    <script>
  (function ($) {
    "use strict";

    $(function () {
      $("#form-content").on("submit", function (event) {
        var data = {
          nickname: $("#nickname").val(),
          nickGrat: $("#nickGrat").val(),
          tipoGrat: $("#tipoGrat").val(),
          quantidade: $("#quantidade").val(),
          permissao: $("#permissao").val(),
          termos: "x",
        };

        event.preventDefault();
        setTimeout(function () {
          $.post("/post", {
            t: 3272,
            message: [
              `[b][color=#0C78A6]Modelo Único - Medalhas[/color][/b]
             
           [b]Requerente:[/b] ${data.nickname}
           [b]Tipo de medalhas:[/b] ${data.tipoGrat}
     [b]Militar(es) gratificado(s)[/b] ${data.nickGrat}
     [b]Quantidade de medalhas:[/b] ${data.quantidade}

          [b]Permissão:[/b] ${data.permissao}

          ( [b]${data.termos}[/b] ) Li e concordo com os termos de contratação.`,
            ].join("\n"),
            mode: "reply",
            tid: $('[name="tid"]:first').val(),
            post: 1,
            attach_sig: "on",
          })
            .done(function () {
              alert("Postagem realizada com sucesso! Aguarde o redirecionamento para o tópico...");
              location.href = "/t3272-" + location.host + "/t3272-?view=newest";
            })
            .fail(function () {
              alert("Ocorreu um erro! Tente novamente, se o problema persistir, entre em contato com um administrador do fórum.");
            });
        }, 600);
      });
    });
  })(jQuery);
</script> 
</div>

Olá, Convidado.

Tente assim:

Código:

Boa tarde, Mixeuzinho

Funcionou! Muito obrigado pela pronta disponibilidade e solução.

Edit: percebi que o negrito e as cores não estão funcionando, é possível conseguir colocá-las novamente?

https://imgur.com/a/Gl6Gjfd

Olá @Tornado10,

Altere a página HTML para

Código:

        <!-- Layout desenvolvido por Forumeiros -->
        <meta charset="UTF-8" />
        <meta content="IE=edge" http-equiv="X-UA-Compatible" />
        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
        <title>Medalha Militar: Gratificações</title>
        <link
            href="https://www.habbo.com.br/habbo-imaging/badge/b22134s36044s85015s95014s96013dd911246822191a7ffb37b8e407217aa.gif"
            type="image/x-icon" rel="icon" />
        <link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
        <link href="https://meyerweb.com/eric/tools/css/reset/reset.css" rel="stylesheet" />
        <style type="text/css">
            body {
                height: 100vh;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
                font-size: 1em;
                line-height: 1.5em;
            }
       
            a,
            a:active,
            a:link,
            a:visited,
            a:focus {
                color: #fff;
                text-decoration: none;
            }
       
            h2 {
                display: block;
                width: 100%;
                margin: 30px 0;
                padding-bottom: 5px;
                text-align: left;
                font-size: 1.2em;
                font-weight: 400;
                border-bottom: 2px solid #0c78a6;
                cursor: default;
            }
       
            p {
                cursor: default;
            }
       
            label {
                margin-left: 6px;
            }
       
            input,
            select,
            textarea {
                padding: 6px 5px;
                margin: 5px;
                font-size: 1em;
                color: #555;
                border-radius: 6px;
                border: 1px solid #d4d4d4;
            }
       
            input[type="text"]:disabled {
                background: #ddd;
                cursor: not-allowed;
            }
       
            input::placeholder {
                color: #9b9b9b;
            }
       
            .caixa {
                text-align: center;
                margin-bottom: 25px;
                padding: 15px;
                color: #555;
                border: 1px solid #d4d4d4;
                box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
            }
       
            .caixa:last-of-type {
                margin-top: 20px;
            }
       
            .container-forms {
                display: flex;
                flex-direction: column;
            }
       
            .coluna {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(100px, 100%));
                text-align: start;
                width: 100%;
            }
       
            .pill {
                cursor: default;
                margin-left: 5px;
                padding: 3px 4px;
                font-size: 0.5em;
                font-weight: 700;
                color: #fff;
                border: 1px solid black;
                border-radius: 15px;
                background-color: rgb(207, 0, 0);
                box-shadow: inset 0 3px rgb(255 255 255 / 20%), inset 0 -4px rgb(0 0 0 / 10%), inset 0 -25px rgb(0 0 0 / 3%), inset 0 0 0 1px rgb(0 0 0 / 25%);
            }
       
            .botao {
                width: 90%;
                margin: 15px auto 5px;
                padding: 10px;
                background: #0c78a6;
                color: #fff;
                border-radius: 3px;
                border-color: #375e7f;
                cursor: pointer;
                outline: none;
                font-size: 0.9em;
                font-weight: 600;
                transition: linear all 125ms;
            }
       
            .botao:hover {
                background: #444;
                border-color: #444;
                box-shadow: inset 0 -100px rgba(108, 108, 108, 0.1);
                transition: linear all 125ms;
            }
       
            .botao:last-of-type {
                margin-bottom: 0;
            }
       
            #container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin: 0 auto;
                width: 50%;
                max-width: 675px;
            }
       
            #caixa-logo {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
       
            #logo {
                width: 210px;
                display: block;
            }
       
            #botao-voltar {
                display: block;
                float: left;
                color: #0c78a6;
                transition: linear all 125ms;
            }
       
            #botao-voltar:hover {
                color: #444;
                transition: linear all 125ms;
            }
       
            @media screen and (max-width: 1090px) {
                body {
                    font-size: 90%;
                }
       
                #container {
                    width: 90%;
                }
       
                .container-forms {
                    flex-direction: column;
                }
            }
        </style>
        <div id="container">
       
            <div id="caixa-logo">
                <a href="https://pmhh.forumeiros.com/"> <img title="Voltar ao fórum da PMHH"
                        src="https://i.imgur.com/KA6vUCb.png" id="logo" /> </a>
            </div>
       
            <div class="caixa">
                <a href="/t3272-" id="botao-voltar"><em class="fas fa-arrow-left"></em></a>
                <p style="text-align: center">
                    Lembre-se: O preenchimento incorreto das colunas resultará em cancelamento do requerimento.
                </p>
       
                <h2>
                    Dados do requerente
                </h2>
       
                <form id="form-content">
       
                    <div class="container-forms">
       
                        <div class="coluna">
                            <label for="nickname">Seu nickname:</label> <input required="" placeholder="Coloque o seu nickname"
                                id="nickname" type="text" />
                        </div>
       
                    </div>
       
                    <div class="coluna">
                        <label for="nickGrat">Militar(es) gratificados:</label> <input required=""
                            placeholder="Coloque o(s) nick(s) do(s) gratificado(s) aqui. Caso tenha mais de um, separe-os em /"
                            id="nickGrat" type="text" />
                    </div>
       
                    <div class="container-forms">
       
                        <div class="coluna">
                            <label for="tipoGrat">Tipo de Gratificação:</label> <input required=""
                                placeholder="Coloque o tipo de gratificação: Positiva ou Negativa" id="tipoGrat" type="text" />
                        </div>
       
                        <div class="coluna">
                            <label for="quantidade">Quantidade de gratificação:</label> <input required=""
                                placeholder="Coloque a quantidade de gratificação" id="quantidade" type="text" />
                        </div>
                        <div class="coluna">
                            <label for="motivos">Motivos:</label> <input required=""
                                placeholder="Coloque o motivo da gratificação: Motivo" id="motivos" type="text" />
                        </div>
       
                    </div>
       
                    <div class="container-forms">
       
                        <div class="coluna">
                            <label for="permissao">Permissão:</label> <input required=""
                                placeholder="Coloque a permissão do miltiar que deixou realizar a gratificação." id="permissao"
                                type="text" />
                        </div>
       
                        <div style="margin-top: 25px; cursor: default">
                            <input required="" value="X" name="termos" type="checkbox" id="check" /> Li e concordo com as normas
                            de licença.
                        </div>
       
                        <button type="submit" class="botao">
                            Enviar
                        </button>
       
                    </div>
                </form>
       
            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script>
                (function ($) {
                    "use strict";
       
                    $(function () {
                        $("#form-content").on("submit", function (event) {
                            var data = {
                                nickname: $("#nickname").val(),
                                nickGrat: $("#nickGrat").val(),
                                tipoGrat: $("#tipoGrat").val(),
                                quantidade: $("#quantidade").val(),
                                permissao: $("#permissao").val(),
                                motivos: $('#motivos').val(),
                                termos: "x",
                            };
       
                            event.preventDefault();
                            setTimeout(function () {
                                $.post("/post", {
                                    t: 3272,
                                    message: [
                                        `[b][color=#0C78A6]Modelo Único - Medalhas[/color][/b]
       
        [b]Requerente:[/b] ${data.nickname}
        [b]Tipo de medalhas:[/b] ${data.tipoGrat}
        [b]Militar(es) gratificado(s)[/b] ${data.nickGrat}
        [b]Quantidade de medalhas:[/b] ${data.quantidade}
        [b]Motivo:[/b] ${data.motivos}
       
        [b]Permissão:[/b] ${data.permissao}
       
        ( [b]${data.termos}[/b] ) Li e concordo com os termos de contratação.`,
                                    ].join("\n"),
                                    mode: "reply",
                                    tid: $('[name="tid"]:first').val(),
                                    post: 1,
                                    attach_sig: "on",
                                })
                                    .done(function () {
                                        alert("Postagem realizada com sucesso! Aguarde o redirecionamento para o tópico...");
                                        location.href = "/t3272-" + location.host + "/t3272-?view=newest";
                                    })
                                    .fail(function () {
                                        alert("Ocorreu um erro! Tente novamente, se o problema persistir, entre em contato com um administrador do fórum.");
                                    });
                            }, 600);
                        });
                    });
                })(jQuery);
            </script>
        </div>

Atenciosamente,
tikky.

O problema foi solucionado. Obrigado, srs. @tikky e @Mixeuzinho