Use value returned via ajax with switch case on current page

Question

Basically I’m trying to use value of a select returned via ajax with switch case. This switch case needs to be on the same form submission page using the select value for a specific case.

My script returns the value of select perfectly via ajax. The only problem is that i can’t use this value in the switch case on the current page, for the value of $_POST["aaa"] is not recognized.

I have tried redirecting to the same page using url: this.action in ajax but did not succeed.

Follow below in detail step by step what I need and then the script.

1. I take the value of select with onChange
2. Displays a hidden div (displays the main form)
3. The value is sent to return.php (server)
4. I take the value and use the switch case on the current page
5. With the switch case custom fields are included for the main form according to what was chosen in select.

index php.

<div class="container">
<form method ="" id="formStart" class="formStart" enctype="multipart/form-data">            
<h2 style='color:blue'>Escolha o tipo de anúncio:</h2>          
    <select name="aaa" id="valorSel" >
        <option value="-1">Selecionar...</option>           
        <option value="1">Imóveis</option>
        <option value="2">Veículos</option>     
        <option value="3">Produtos</option>
    </select>
    <!-- <input type="Submit" name="submit" value="Next step" /> -->
    <br><br>
</form>
<br>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
<script>    
    $("#formStart").change(function(event){
        $("#formHide").show();  // exibir o form principal (oculto)
        event.preventDefault();
        $.ajax({
            data: $(this).serialize(),
            url: "retorno.php",
            type: "POST",
            dataType: "html",
            success: function(data){
                $("#resultado").html(data);
            },
            error: function(){
                alert("Problema ao carregar a solicitação via Ajax.");
            }
        });
    });
</script>

<div id="resultado"></div>

<div id="formHide"  style="display:none;"> 
    <form action="<?php echo esc_url( $action ); ?>" method="post" id="submit-form" class="submit-form" enctype="multipart/form-data">          
        <?php 
        // Usar o valor do select retornado via ajax pela página "retorno.php" como switch case 
        switch ($_POST["aaa"]) {
            case 1:
                echo "Imóveis";   // Para testes adicionei um echo e comentei os includes por enquanto.
                //include "imoveis.php";
                break;
            case 2:
                echo "Veículos";
                //include "veiculos.php";
                break;
            case 3:
                echo "Produtos";
                //include "produtos.php";
                break;
            case -1:
                echo "Por favor escolha uma opção.";
                break;
            default:
                echo "Nada foi selecionado ainda. Por favor escolha uma opção.";
                break;
        }       
        ?>
    </form>
</div>  

php return.

<?php 

if (isset($_POST['aaa'])) {
    echo $_POST['aaa'];
} else {
    echo "Não retornou nenhum valor com ajax.";
}

From now on I thank you for your attention!

Answer 1

I meet the specification mentioned in the question, I thought of the following solution:

This switch case needs to be on the same form submission page using the select value for a specific case.

I called the file itself index.php in the ajax, and in that second moment the POST["aaa"] will exist and will access the second part of driving if. That second part of If will cause it to be called the PHP file according to the swich.

Index.php

    <?php if (empty($_POST["aaa"])) { ?>

<div class="container">
<form method ="" id="formStart" class="formStart" enctype="multipart/form-data">            
<h2 style='color:blue'>Escolha o tipo de anúncio:</h2>          
    <select name="aaa" id="valorSel" >
        <option value="-1">Selecionar...</option>           
        <option value="1">Imóveis</option>
        <option value="2">Veículos</option>     
        <option value="3">Produtos</option>
    </select>
    <!-- <input type="Submit" name="submit" value="Next step" /> -->
    <br><br>
</form>
<br>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
<script>    
    $("#formStart").change(function(event){
        // exibir o form oculto
        event.preventDefault();
        $.ajax({
            data: $(this).serialize(),
            url: this.action,
            type: "POST",
            dataType: "html",
            success: function(data){
                $("#formPrincipal").html(data);
            },
            error: function(){
                alert("Problema ao carregar a solicitação via Ajax.");
            }
        });
    });
</script>

<div id="formPrincipal">
<?php } else { ?>
<form action="" method="post" id="submit-form" class="submit-form" enctype="multipart/form-data">
    <?php
    switch ($_POST["aaa"]) {
        case 1:
            include "imoveis.php";
            break;
        case 2:
            include "veiculos.php";
            break;
        case 3:
            include "produtos.php";
            break;
        case -1:
            echo "Por favor escolha uma opção.";
            break;
        default:
            echo "Nada foi selecionado ainda. Por favor escolha uma opção.";
            break;
    }              
    ?>
</form>
<?php } ?>
</div>

Answer 2

I formulated this answer exclusively thinking about the goal of the project:

1. I take the value of select with onChange
2. Displays a hidden div (displays the main form)
3. The value is sent to return.php (server)
4. I take the value and use the switch case on the current page
5. With the switch case custom fields are included for the main form according to what was chosen in select.

As mentioned in the comment, the logic of the project is wrong. The correct would be so:

1. Take the value of select via event change;

2. Start a request via ajax return the desired form;

   • Take the value passed via ajax;
   • Plays such value on switch;
   • Returns (displays) the desired form file (supposedly where the fields would be);

3. Display a div hidden with the form returned via ajax;

Finalized the theory, let’s go to the codes:

index php.:

<!DOCTYPE html>
<html>
    <head>
        <title>Formulário dinâmico por LipESprY</title>
        <!-- <script type="text/javascript" src="prereq/jquery-3.3.1.min.js"></script> -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    </head>

    <body>

        <h2 style='color:blue;'>Escolha o tipo de anúncio:</h2>
        <select name="aaa" id="valorSel" size="1">
            <option value="0" disabled="disabled" selected="selected">Selecione:</option>
            <option value="1">Imóveis</option>
            <option value="2">Veículos</option>
            <option value="3">Produtos</option>
        </select>

        <div id="formHide"  style="display:none;">
            <form action="trata_formulario.php" method="post" id="submit-form" class="submit-form" enctype="multipart/form-data">
                <div id="form-resultado"></div>
            </form>
        </div>

    </body>

    <script>
        //$("#valorSel").change(function(event){
        $("#valorSel").on('change', function(event){

            $("#formHide").show();  // exibir o form principal (oculto)
            // event.preventDefault(); // Não tem necessidade, já que vai pegar o evento 'change'
            $.ajax({
                url: "retorno.php",
                data: {
                    aaa: $('#valorSel').val()
                },
                type: "post",
                dataType: "html"
            })
            .done(function(data){
                $("#form-resultado").html(data);
            })
            .fail(function(erro){
                console.log(erro);
                alert('Problema ao carregar o formulário via ajax');
            });

        });
    </script>

</html>

Notice I’m using the jQuery 3.3.1, that has some differences in syntax of ajax;

php return.:

<?php
if (!empty($_POST['aaa'])) {
    switch ($_POST['aaa']) {
        case 1:
            include 'forms/imoveis.php';
            break;
        case 2:
            include 'forms/veiculos.php';
            break;
        case 3:
            include 'forms/produtos.php';
            break;
        default:
            die(
                'Nada foi selecionado ainda. Por favor escolha uma opção.'
            );
    }
} else
    die(
        'Requisição inválida. Esta página pertence ao tratamento de um formulário e espera um parâmetro.'
    );

Note the files of each form must be in the folder forms/ (only for organisational reasons).

I designed a project based on this answer. It is a little more complete than this answer, but as it is not the goal to create/fix the other files, nor did I make a point to post them here. If you want, you can check my Github/Lipespry/sopt-use-value-returned-via-ajax-com-switch-case-on-current page.

Another issue: I reworked much of your code, as I had already agreed in the commentary. Explaining every change I made would generate an immense reading somewhat unnecessary. If you want to see the detailed changes, just look at this commit on Github.

Answer 3

I saw no need for ajax in your code since the form below works well.

<div class="container">
<form method ="post" id="formStart" class="formStart" enctype="multipart/form-data">            
<h2 style='color:blue'>Escolha o tipo de anúncio:</h2>          
    <select name="aaa" onchange="this.form.submit()">
        <option value="-1">Selecionar...</option>           
        <option value="1">Imóveis</option>
        <option value="2">Veículos</option>     
        <option value="3">Produtos</option>
    </select>
</form>
<br>

 <?php if (!empty($_POST["aaa"])) { ?>

<div id="formPrincipal">
    <form action="" method="post" id="submit-form" class="submit-form" enctype="multipart/form-data">          
        <?php 
        // Usar o valor do select retornado via ajax pela página "retorno.php" como switch case 
        switch ($_POST["aaa"]) {
            case 1:
                echo "Imóveis";   // Para testes adicionei um echo e comentei os includes por enquanto.
                //include "imoveis.php";
                break;
            case 2:
                echo "Veículos";
                //include "veiculos.php";
                break;
            case 3:
                echo "Produtos";
                //include "produtos.php";
                break;
            case -1:
                echo "Por favor escolha uma opção.";
                break;
            default:
                echo "Nada foi selecionado ainda. Por favor escolha uma opção.";
                break;
        }       
        ?>
    </form>
<?php } ?>
</div>