Transformar valor de formulário em variável javascript

Item: Transformar valor de formulário em variável javascript
Rating: 1

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>  <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>  <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="">  <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="">  <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="">  <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="">  <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="">  <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="">  <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="">  <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="">  <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="">  <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>  </div> <div class="fa-submit"> <button class="post-button" type="submit">Enviar Formulário</button> </div> </form>   <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>

por Zênite 21.04.20 16:00

up da quarentena

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