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

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.