Home / Questions / 125659
Accepted
Otto
Asked: 2020-12-19 13:31:02 +0800 CST 2020-12-19 13:31:02 +0800 CST

How to show content of a radio selected automatically with a switch on the same page - PHP?

  • 772

I found something similar but very different from what I want to achieve, in the following question Hide and show a div when clicking on a radiobutton with javascript

I really want to avoid that use of just hiding content via CSS with display: none;instead I want to automatically display selected information from a radiovia switchPHP.

Using this only calls the desired content instead of having all the content hidden by CSS.

Using PHP generate the following HTML content

<?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>';
    }

}
?>

And through a switchPHP call a template according to the selected radio automatically.

If information was sent from one page to another page it would be easy to retrieve the value, and display that value in the switch. But the problem is that all this information is on the same page and everything must be executed without refreshing the page.

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;
}

In jQuery I have done something similar, but far from what I want to achieve, the only thing I have managed to show is the labelselected radio.

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);
    });
};

So my question is: How can I call the payment templates according to the value of the radioselected one switchautomatically on the same page?

Note: Some of the payment templates have PHP code, for example the PayPal payment form template that carries the value of the purchase in its form, and the credit card template has javascript codes using Stripe's payment gateway .

php

2 Answers

  1. Best Answer

    You could make the following modifications:

    • In the part where you generate with PHPthe payment methods options ( eg: los radios), to avoid duplicating code, you could only add the attribute checkedwhen the condition is met.

      <?php
$r =array(
    1 => 'Transferencia Bancaria',
    2 => 'PayPal',
    3 => 'Tarjeta de credito',
);

foreach ($r as $key => $value) {

    $checked = '';
    if(isset($_SESSION['datos_form']['radio']) && $_SESSION['datos_form']['radio'] == $key ) {
        $checked = ' checked="checked"';
    }
    echo '<input name="radio" type="radio" id="'.$key.'" value="'.$key.'"'.$checked.'>';
    echo '<label for="'.$key.'" title="'.$value.'">'.$value.'</label>';
} ?>

<!-- AQUI en este elemento se cargará el contenido obtenido via AJAX -->
<div id="formaPagoCont"></div>

    • To detect the change of radioselected and load the corresponding content, you could do it like this:

      // Cuando se haga click sobre algún `<input name="radio"`
$('input[name="radio"]').on('click', () => {

  // Si el radio no esta seleccionado
  if (!this.checked) {
    return false;
  }

  // Solicitamos al archivo `formaPago.php` el contenido 
  // correspondiente al método de pago seleccionado
  $.ajax({
      type: 'POST',
      url: 'formaPago.php',
      data: {
        idForma: this.value
      }
    })
    .done(function(res) {
        // Si todo va bien, incluimos dentro del 
        // `<div id="formaPagoCont"` el contenido
        $('#formaPagoCont').html(res);
    });
});

    • Finally, in the file formaPago.php( file that you should create and the name could be any other ) it would only be necessary to control the value of $_POST['idForma']and return the corresponding content. The code inside the file formaPago.phpcould be the following:

      <?php
switch ($_POST['idForma']) {
    case 1:
        # code... transferencia bancaria
        include 'wire_transfer.php';
        break;

    case 2:
        # code... Pago con paypal
        include 'payment_paypal.php';
        break;

    case 3:
        # code... tarjeta de crédito o débito 
        include 'form_credit_card.php';
        break;

    default:
        # code...
        echo "Hubo un error inesperado en la forma de pago seleccionada, vuelva intentarlo más tarde";
        break;
}
    • 5

  2. The first part, to get the value of the clicked radius, would be the same as what you saw in your question.

    Once the value is obtained, you can now load the php file, through the jquery load event.

    The only thing that being by javascript, will be executed on the client side, so if the file PHPhas server code, it will not be executed

    $(document).ready(function() {
    $("input[type=radio]").click(function(event){
        var valor = $(event.target).val();
        switch(expression) {
             case 1:
                $("#capa").load('form_credit_card.php');
                break;
            case 2:
                $("#capa").load('payment_paypal.php');
                break;
            case 3:
                $("#capa").load('wire_transfer.php');
                break;
            default:
                $("#capa").html('Hubo un error inesperado en la forma de pago seleccionada, vuelva intentarlo más tarde');
       }
    });
});

    For this you should create a divthat has by idthe name ofcapa

    • 0