0

Boa noite, estou com um problema, estou criando um formulário de doação e preciso criar um radio input com value diferenciado que o usuário digitaria ele.

Ex:

<form action="#" method="post" class="donate" id="donate">
<div class="group">
<input type="radio" name="amount" id="30" value="30"/>
<label for="30">R$30</label>
<input type="radio" name="amount" id="50" value="50"/>
<label for="50">R$50</label>
<input type="radio" name="amount" id="100" value="100"/>
<label for="100">R$100</label>
<input type="radio" name="amount" id="250" value="250"/>
<label for="250">R$250</label>
<input type="radio" name="amount" id="500" value="500"/>
<label for="500">R$500</label>
<labe><input type="radio" name="amount" id="amount_outro" value="other" >Outro Valor:</input>
<input type ="text" name="other" id="amount_texto"/></label>
</div>

No caso eu precisaria que o valor que a pessoa digitar no text input ao lado do "outro valor:" substituia o valor do value="other".

Agradeço antecipadamente!

1 Resposta 1

0

Você pode adicionar um evento de onchange no seu input#amount_texto e quando o evento for disparado alterar o value do input#amount_outro. Algo +/- como esse exemplo abaixo:

/// ; Adicionar evento no input[type='text'] #amount_texto
$("#amount_texto").on("change",function(){
    
    /// ; `this` aqui dentro é o #amount_texto

    /// ; quando evento é disparado ele altera o valor
    /// ; do input[type='radio'] #amount_outro
    $("#amount_outro").val( this.value );
});


/// ; PARA MOSTRAR NO CONSOLE
$("button").click(function(){
  /// ; Pega os dados do formulário
  let fdata = new FormData( $("#donate")[0] ),
      dados = {};
  /// ; transforma em um objeto
  for( let e of fdata.entries() ){ dados[e[0]]=e[1]; }
  
  console.log( dados );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#" method="post" class="donate" id="donate">
  <div class="group">
    <input type="radio" name="amount" id="30" value="30" />
    <label for="30">R$30</label>
    <br/>
    <input type="radio" name="amount" id="50" value="50" />
    <label for="50">R$50</label>
    <br/>
    <input type="radio" name="amount" id="100" value="100" />
    <label for="100">R$100</label>
    <br/>
    <input type="radio" name="amount" id="250" value="250" />
    <label for="250">R$250</label>
    <br/>
    <input type="radio" name="amount" id="500" value="500" />
    <label for="500">R$500</label>
    <br/>
    <input type="radio" name="amount" id="amount_outro" value="other"/>
    <label>Outro Valor:</label>
    <input type="text" name="other" id="amount_texto" />

  </div>
</form>
 <br/>
<button type='button'>MOSTRA NO CONSOLE</button>

1
  • Muito obrigado amigo, era exatamente isso que eu precisava!
    – playeriva
    Commented 23/08/2020 às 0:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .