Transformar valor de formulário em variável javascript

3 participantes

Ir para baixo

Tópico resolvido Transformar valor de formulário em variável javascript

Mensagem por Zênite 18.04.20 15:35

Detalhes da questão


Endereço do fórum: https://rpgarcadia.forumeiros.com/
Versão do fórum: phpBB3

Descrição


Olá! Através do gerador de formulários da forumeiros (esse aqui) criei o formulário abaixo (também disponível nesse link).

O que eu gostaria de saber é: como eu pego a informação contida nos elementos "{{campo1}}" e etc, e transformo elas em variáveis javascript para que eu possa trabalhar com esses dados?

Exemplo:
O usuário preenche que a classe do usuário é Guerreiro. Aí eu pegaria essa informação, criando uma variável "classe", e faria uma condição no sentido de: "Se classe = Guerreiro, então a variável Força recebe +2"
Deu pra entender mais ou menos? Quero só saber como eu pegaria esse valor {{campo1}} dentro do código js (isso se já não for e eu estou aqui cometendo um erro de iniciante)

Código:
<!DOCTYPE html>
<html>
<!-- ->
/**
 * Gerado em <ajuda.forumeiros.com>.
 * Gerador (2.0) feito por Luiz Felipe G. <https://luizfelipe.dev>
 *
 * Se você tiver erros ou dúvidas, vá em: <ajuda.forumeiros.com>
 */
<!- -->
<head>
  <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>Registro de Personagem</title>

  <link rel="stylesheet" href="https://forumeiros.github.io/assets/src/form-generator/form-styles.css" />
</head>
<body>

  <form id="fa-generated-form">
    <div class="fa-form-wrapper">
      <h1>Registro de Personagem</h1>
      <!-- BEGIN Generated HTML Code -->
      <div class="fa-form-group clearfix">
  <label for="campo1">Nome do Personagem</label>
  <input type="text" data-type="text" id="campo1" placeholder="" required="">
</div>
<div class="fa-form-group clearfix">
  <label for="campo2">Raça do Personagem</label>
  <select data-type="select" id="campo2" required="">
<!-- First -->
<option value="Humano">Humano</option>
<option value="Anão">Anão</option>
<option value="Elfo">Elfo</option>
<option value="Halfling">Halfling</option>
</select>
</div>
<div class="fa-form-group clearfix">
  <label for="campo3">Classe do Personagem</label>
  <select data-type="select" id="campo3" required="">
<!-- First -->
<option value="Acólito">Acólito</option>
<option value="Pacificador">Pacificador</option>
<option value="Monge">Monge</option>
<option value="Guerreiro">Guerreiro</option>
<option value="Bárbaro">Bárbaro</option>
<option value="Bushi">Bushi</option>
<option value="Arqueiro">Arqueiro</option>
<option value="Mago">Mago</option>
<option value="Feiticeiro">Feiticeiro</option>
<option value="Druída">Druída</option>
</select>
</div>
<div class="fa-form-group clearfix">
  <label for="campo4">Alinhamento</label>
  <select data-type="select" id="campo4" required="">
<!-- First -->
<option value="Leal e bom">Leal e bom</option>
<option value="Neutro e bom">Neutro e bom</option>
<option value="Caótico e bom">Caótico e bom</option>
<option value="Neutro">Neutro</option>
<option value="Caótico e neutro">Caótico e neutro</option>
<option value="Leal e mau">Leal e mau</option>
<option value="Neutro e mau">Neutro e mau</option>
<option value="Caótico e mau">Caótico e mau</option>
</select>
</div>
        <h1><center>ATRIBUTOS</center></h1>
        <center><p> LEMBRE-SE: OS VALORES NÃO PODEM SE REPETIR! </p></center>
        <div class="fa-form-group clearfix">
  <label for="campo5">Força</label>
  <select data-type="select" id="campo5" required="">
<!-- First -->
<option value="15">15</option>
<option value="14 ">14 </option>
<option value="13 ">13 </option>
<option value="12 ">12 </option>
<option value="10">10</option>
<option value="8">8</option>
</select>
</div>
<div class="fa-form-group clearfix">
  <label for="campo6">Destreza</label>
  <select data-type="select" id="campo6" required="">
<!-- First -->
<option value="15">15</option>
<option value="14 ">14 </option>
<option value="13 ">13 </option>
<option value="12 ">12 </option>
<option value="10">10</option>
<option value="8">8</option>
</select>
</div>
<div class="fa-form-group clearfix">
  <label for="campo8">Constituição</label>
  <select data-type="select" id="campo8" required="">
<!-- First -->
<option value="15">15</option>
<option value="14 ">14 </option>
<option value="13 ">13 </option>
<option value="12 ">12 </option>
<option value="10">10</option>
<option value="8">8</option>
</select>
</div>
<div class="fa-form-group clearfix">
  <label for="campo9">Inteligência</label>
  <select data-type="select" id="campo9" required="">
<!-- First -->
<option value="15">15</option>
<option value="14 ">14 </option>
<option value="13 ">13 </option>
<option value="12 ">12 </option>
<option value="10">10</option>
<option value="8">8</option>
</select>
</div>
<div class="fa-form-group clearfix">
  <label for="campo10">Sabedoria</label>
  <select data-type="select" id="campo10" required="">
<!-- First -->
<option value="15">15</option>
<option value="14 ">14 </option>
<option value="13 ">13 </option>
<option value="12 ">12 </option>
<option value="10">10</option>
<option value="8">8</option>
</select>
</div>
<div class="fa-form-group clearfix">
  <label for="campo11">Carisma</label>
  <select data-type="select" id="campo11" required="">
<!-- First -->
<option value="15">15</option>
<option value="14 ">14 </option>
<option value="13 ">13 </option>
<option value="12 ">12 </option>
<option value="10">10</option>
<option value="8">8</option>
</select>
</div>
        <h1><center>HABILIDADES</center></h1>
<div class="fa-form-group clearfix">
  <label for="campo13">Magias (se houver)</label>
  <textarea data-type="textarea" id="campo13" placeholder=""></textarea>
</div>
<div class="fa-form-group clearfix">
  <label for="campo14">Habilidades da Classe</label>
  <textarea data-type="textarea" id="campo14" placeholder="" required=""></textarea>
</div>
<div class="fa-form-group clearfix">
  <label for="campo15">Perícias treinadas</label>
  <textarea data-type="textarea" id="campo15" placeholder="" required=""></textarea>
</div>
      <!-- END Generated HTML Code -->
    </div>
    <div class="fa-submit">
      <button class="post-button" type="submit">Enviar Formulário</button>
    </div>
  </form>



  <!-- Javascript's -->
  <!-- Não é recomendada a edição abaixo desta linha. -->

  <textarea style="display: none;" id="fa-generated-message">[center]<div style = "width: 50%">
[justify][center][b]Ficha de {{campo1}}[/b][/center]

[b]Nome do Personagem:[/b] {{campo1}}
[b]Raça:[/b] {{campo2}}
[b]Classe:[/b] {{campo3}}
[b]Alinhamento:[/b] {{campo4}}
<hr>
[center][b]Atributos[/b][/center]
[b]Força:[/b] {{campo5}}
[b]Destreza:[/b] {{campo6}}
[b]Constituição:[/b] {{campo8}}
[b]Inteligência:[/b] {{campo9}}
[b]Sabedoria:[/b] {{campo10}}
[b]Carisma:[/b] {{campo11}}
<hr>
[center][b]Perícias[/b][/center]
{{campo15}}
<hr>
[center][b]Habilidades da Classe[/b][/center]
{{campo14}}
<hr>
[center][b]Magias[/b][/center]
{{campo13}}
[/justify]
</div>[/center]</textarea>
  <input type="hidden" id="fa-generated-title" value="Ficha do Personagem de {{campo1}}" />

  <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 type="text/javascript">
    (function ($) {
       'use strict';

       $(window).on('load', function () {
          $('#fa-generated-form').on('submit', function (event) {
        event.preventDefault();
        $(this).find('button[type="submit"]').text('Postando...');
        setTimeout(function () {
               $.post('/post', {
                  subject: $('#fa-generated-title').val().trim(),
                  f: 7,
                  message: $('#fa-generated-message').val().trim(),
                  mode: 'newtopic',
                  tid: $('[name="tid"]:first').val(),
                  post: 1,
               }).done(function () {
                  alert('Postado com sucesso. Você será redirecionado para o subfórum com o novo tópico...');
                  location.pathname = '/f7-';
               }).fail(function () {
                  alert('Houve um erro! Tente novamente!');
               });
        }, 600);
          });
       });
    }(jQuery));
  </script>
</body>
</html>
Zênite
Zênite
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Transformar valor de formulário em variável javascript

Mensagem por Zênite 21.04.20 16:00

up da quarentena
Zênite
Zênite
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Transformar valor de formulário em variável javascript

Mensagem por RafaelS. 21.04.20 17:10

Olá!

De maneira muito resumida, você pode desenvolver um código usando um eventListener, que quando o usuário escolher um valor para esse campo, ele retorne esse mesmo valor. A partir daí você pode fazer o que quiser com essa informação.

Espero ter ajudado. Feliz

Atenciosamente,
Rafael. Feliz
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Transformar valor de formulário em variável javascript

Mensagem por Zênite 22.04.20 0:11

Valeu! Vou pesquisar sobre!
Zênite
Zênite
****

Membro desde : 18/12/2018
Mensagens : 218
Pontos : 316

https://fanttasia.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Transformar valor de formulário em variável javascript

Mensagem por Chagas 22.04.20 0:13

Tópico resolvido


Movido para "Questões resolvidas".
Chagas
Chagas
Membro

Membro desde : 22/10/2015
Mensagens : 895
Pontos : 1102

https://pelotao.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

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