0

tengo una duda o alguna sugerencia de como implementar varios formularios de métodos de pago. Para mi caso de prueba estoy usando dos formularios: Formulario 1 y Formulario 2 y un botón general.

<ul class="clearFix">       
    <li class="methodview " id="Pago1">
        <a href="javascript:;" rel="">Pago 1</a>
    </li>
    <li class="methodview " id="Pago2">
        <a href="javascript:;" rel="">Pago 2</a>
    </li>
</ul>

<form id="Formulario1" action="https://www.formulario1.com" method="post">
    <input type="hidden" name="..." value="...">
    ...
    <input type="hidden" name="submit">
</form>

<form id="Formulario2" action="https://www.formulario2.com" method="post">
    <input type="hidden" name="..." value="...">
    ...
    <input type="hidden" name="submit">
</form>

<div class="Button_Wrap">
    <div class="footbt01">
        <button type="button" style="display:none"><span>COMPRAR</span></button>
        <a data-bs-dismiss="modal" aria-label="Close"><span>CANCELAR</span></a>                         
    </div>
</div>

Lo que trato se hacer es que al hacer clic en un li se agrega la clase selected <li class="methodview selected> e inmediatamente el botón que está con el estilo display:none se activa y según la opción del li seleccionado al hacer clic en el botón COMPRAR se envía al formulario respectivo, siendo: Pago1/Formulario1 y Pago2/Formulario2.

Esto tengo hasta el momento para agregar la clase selected.

<script>
$(".clearFix li").click(function() {
   $(".clearFix li").removeClass("selected");
   $(this).addClass("selected");
});
</script>

De antemano muchas gracias!

1 respuesta 1

0

Yo trataría de relaccionar tus formularios con tus elementos li en este caso (Aunque te recomendaría mejor usar <input type="radio" ...>).

<ul class="clearFix">       
    <li class="methodview selected" data-pago="pago1">
        <a href="javascript:;" rel="">Pago 1</a>
    </li>
    <li class="methodview " data-pago="pago2">
        <a href="javascript:;" rel="">Pago 2</a>
    </li>
</ul>

<form id="pago1" action="https://www.formulario1.com" method="post">
    <input type="hidden" name="..." value="...">
    ...
</form>

<form id="pago2" action="https://www.formulario2.com" method="post">
    <input type="hidden" name="..." value="...">
    ...
</form>

Si le añades un atributo data-pago cuyo valor corresponda con el id del formulario correspondiente, con jQuery sería fácil hacer la relación.

let metodoSeleccionado= 'pago1'; // Método de pago seleccionado por defecto

$('.clearFix li').on('click', function() {
    $(".clearFix li").removeClass("selected");
    $(this).addClass("selected");
    metodoSeleccionado = $(this).data('pago'); // Guardamos el nombre del método de pago
});

// Asignamos evento al botón de compra
$('#btnComprar').on('click', function(e) {
  e.preventDefault();
  $(this).prop('disabled', true); // Deshabilitamos el boton para prevenir que haga click mas de una vez
  $('#' + metodoSeleccionado).submit(); // Enviamos el formulario cuyo ID corresponda con el método seleccionado
});

De esta manera, también tendremos seleccionado el método "pago1" por defecto. Así no tendrías problemas en ocultar/mostrar el botón. Debería de haber un método de pago seleccionado por defecto.

2
  • hola, podrías editar tu respuesta con el botón que estás asignando el evento. Estoy probando y tengo un error : Uncaught TypeError: f[s] is not a function at Object.trigger (jquery-1.8.2.min.js:2:37213) at HTMLFormElement.<anonymous> (jquery-1.8.2.min.js:2:44647) at Function.each (jquery-1.8.2.min.js:2:14606) at init.each (jquery-1.8.2.min.js:2:11242) at init.trigger (jquery-1.8.2.min.js:2:44623) at p.fn.<computed> [as submit] (jquery-1.8.2.min.js:2:45423) at HTMLButtonElement.eval (eval at <anonymous> (jquery-1.8.2.min.js:2:14185), ...
    – Kal
    el 2 ago. 2022 a las 21:25
  • Esto ocurre porque tienes inputs dentro de los formularios con un name="submit". Esto cambia el comportamiento original del formulario. Quitalo. el 3 ago. 2022 a las 7:58

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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