Encontré algo parecido pero muy distinto a lo que deseo lograr, en la siguiente pregunta Ocultar y mostrar un div al hacer click en un radiobutton con javascript
Realmente quiero evitar ese uso de solo ocultar contenidos mediante CSS con el display: none;
en vez de eso quiero hacer que se muestre de forma automática la información seleccionada de un radio
mediante un switch
de PHP.
Mediante así solo se llama el contenido deseado en vez de tenerlo todo el contenido oculto mediante CSS.
Mediante PHP genere el siguiente contenido HTML
<?php
$r =array(
1 => 'Transferencia Bancaria',
2 => 'PayPal',
3 => 'Tarjeta de credito',
);
foreach ($r as $key => $value) {
if(isset($_SESSION['datos_form']['radio']) && $_SESSION['datos_form']['radio'] == $key ) {
echo '<input name="radio" type="radio" id="'.$key.'" value="'.$key.'" checked="checked" >';
echo '<label for="'.$key.'" title="'.$value.'">'.$value.'</label>';
} else {
echo '<input name="radio" type="radio" id="'.$key.'" value="'.$key.'" >';
echo '<label for="'.$key.'" title="'.$value.'">'.$value.'</label>';
}
}
?>
Y mediante un switch
de PHP llamar una plantilla según el radio seleccionado de forma automática.
Si la información fuera enviada desde una página a otra página sería fácil rescatar el valor, y ese valor mostrarlo en el
switch
. Pero el problema es que toda esta información está en la misma página y todo se debe ejecutar sin refrescar la página.
switch (variable) {
case 'value':
# code... tarjeta de crédito o débito
include 'form_credit_card.php';
break;
case 'value':
# code... Pago con paypal
include 'payment_paypal.php';
break;
case 'value':
# code... transferencia bancaria
include 'wire_transfer.php';
break;
default:
# code...
echo "Hubo un error inesperado en la forma de pago seleccionada, vuelva intentarlo más tarde";
break;
}
En jQuery he realizado algo parecido, pero muy lejos de lo que deseo lograr, lo único que he logrado mostrar es el label
del radio seleccionado.
function show_step(step){
var data = $( "#form" ).serialize();
var url = 'saveTemp.php?step=' + step;
// recuperamos el label del radio button seleccionado
var valor_radio = $('input:radio[name=radio]:checked').next("label").text();
$.ajax({
type: "POST",
url: url,
data: data
})
.done(function( resp ) {
// si todo va bien
// ocultamos los pasos
$('.step').css( "display", "none" );
// mostramos el paso correspondiente
$('#step'+step).fadeIn("slow");
// mostramos el radio button seleccionado
$('#div_producto').html(valor_radio);
animacion(step);
});
};
Entonces mi pregunta es: ¿Como puedo llamar las plantilla de pago según el valor del radio
seleccionado desde un switch
de forma automática en la misma página?
Nota: Algunas de las plantillas de pago, tienen código PHP por ejemplo la plantilla de forma de pago de PayPal que lleva el valor de la compra en su formulario, y la plantilla de tarjeta de crédito tiene códigos de javascript usando pasarela de pago de Stripe.
variable
y según ese valor mostrar el contenido de una plantilla en alguna parte de la página actual, en#div_producto
? Si es así, tu petición Ajax es casi correcta: yo agregaría undataType: 'html'
y aquí:$('#div_producto').html(valor_radio);
en vez devalor_radio
tendría que poner:$('#div_producto').html(resp);
. Quizá el evento deba ser lanzando desde elon.change
de los radio button implicados.