0

Trabajando con radio buttons dentro de un modal me surgieron problemas, ya que por medio de la selección de dichos input radio se llena un formulario de paypal.

Es decir, son 4 radio buttons y cada uno tiene un value distinto.

<input type="radio" id="id-5" class="o_input" name="paquetes" value="5">
<input type="radio" id="id-20" class="o_input" name="paquetes" value="20">
<input type="radio" id="id-50" class="o_input" name="paquetes" value="50">
<input type="radio" id="id-100" class="o_input" name="paquetes" value="100">

Pero, estos están dentro de un modal y básicamente lo que trato de hacer es que al seleccionar uno de los radio buttons me pase el valor del value a un campo de un formulario (paypal). Hay surge el inconveniente, se como asignar los valores pero en esta ocasión no funciona.

<input type="hidden" name="quantity" id="quantity" value="10">

Y lo intente de la siguiente manera:

$('input.paquetes').click(function(){
    $('#quantity').val($(this).val());
});
/******************************************/
$('input[type=radio]').on('change', function() {
    $('#quantity').val($(this).val());
});
/******************************************/
$('input[type=radio]').on('click', function() {
    $('#quantity').val($(this).val());
});

También directamente por el atributo id, clase, usando click, usando change, usando on(), etc. Aun así no logro que entre siquiera al evento y JQuery esta funcionando perfectamente porque el resto del sitio funciona con el y no tiene problema alguno.

El modal está así:

<div class="modal slideInUp fade text-left animated" id="tokens" tabindex="-1" role="dialog" aria-labelledby="title" aria-hidden="true"></div>

Dentro tiene los radio buttons y el form de paypal.

2
  • Asegúrate de que sea posible modificar el valor del input escondido. Yo he trabajado con Stripe y hacer eso es practicamente imposible (por seguridad), había que hacerlo a través de su API. Tal vez suceda algo parecido con PayPal
    – César
    Commented el 22 abr. 2019 a las 0:55
  • @César Pero eso lo creería si aunque sea entrara al evento, pero ni siquiera entra al evento click o change, ni mostrando un simple alert. Eso es lo curioso. Commented el 22 abr. 2019 a las 0:58

1 respuesta 1

2

En JQuery los elementos dentro del modal los identificas asi:

// 'tokens' es el 'id' de tu modal
$("#tokens").find("input[type=radio]")

Entonces te sugiero probar lo siguiente:

$("#tokens").find("input[type=radio]").on('change', function() {
    alert($('input[name=paquetes]:checked').val());
});

Aqui te dejo un Code Snipet usando radios en un modal de bootstrap

$(function(){
  $("#modal_tokens").find("input[type=radio]").on('change', function() {
    alert($('input[name=paquetes]:checked').val())
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal_tokens">
  Mostrar Modal
</button>

<!-- Modal -->
<div class="modal fade" id="modal_tokens" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="radio" id="id-5" class="o_input" name="paquetes" value="5"> 5 <br/>
        <input type="radio" id="id-20" class="o_input" name="paquetes" value="20"> 20 <br/>
        <input type="radio" id="id-50" class="o_input" name="paquetes" value="50"> 50 <br/>
        <input type="radio" id="id-100" class="o_input" name="paquetes" value="100"> 100
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Aceptar</button>
      </div>
    </div>
  </div>
</div>

2
  • Ni de esa manera me funciono amigo, ya lo intente anteriormente, al igual ahorita copie tu código y no funciona, me tiene bastante frustrado esto. Commented el 22 abr. 2019 a las 1:43
  • Acabo de notar que tu forma de obtener el valor de tu radio estaba mal. Hice la correccion y te deje un ejemplo practico. Commented el 22 abr. 2019 a las 2:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.