1

Basicamente estou tentando usar valor de um select retornado via ajax com switch case. Esse switch case precisa estar na mesma página de envio do formulario usando o valor do select para um caso específico.

O meu script retorna perfeitamente o valor do select via ajax. O único problema é que eu não consigo usar esse valor no switch case na página atual, pois o valor de $_POST["aaa"] não é reconhecido.

Já tentei redirecionar para a mesma página utilizando url: this.action no ajax mas não obtive sucesso.

Segue abaixo detalhadamente passo a passo do que preciso e em seguida o script.

  1. Pego o valor do select com onChange
  2. Exibe uma div oculta (exibe o formulário principal)
  3. O valor é enviado para retorno.php (servidor)
  4. Pego o valor e utilizo no switch case na página atual
  5. Com o switch case é incluido campos personalizados para o form principal de acordo com o que foi escolhido no 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>  

retorno.php

<?php 

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

Desde já Agradeço pela a atenção!

3
  • Amigo, a lógica não está legal. Se vai fazer uma requisição ajax, pq já não retorna os campos que precisa? Pra vc retornar valor do PHP e tratar com JavaScript, seria melhor usar JSON. Mas no seu caso, não tem necessidade. Pode "criar" seus campos direto com o ajax, como disse... Se te interessar, posso formular uma resposta. Lógico que vai ter que refazer pelo menos metade do seu código...
    – LipESprY
    Commented 1/01/2019 às 18:26
  • LipESprY, eu prefiria tratar tudo com php, mas sem ajax eu teria que usar o botão submit e a página dária refresh que não é o que eu preciso. Tentei fazer com javascript, porem na chamada dos includes deu erro. No entanto a sua ideia é bem vinda e talvez supra a minha necessidade. Fique a vontade e aguardo a sua fomula. Abraço.
    – Skyline
    Commented 1/01/2019 às 19:35
  • Ainda assim não vejo necessidade de ajax, fiz uma pequena modificação na minha resposta para atender essa sua observação. Antes de sair enfiando ajax em tudo, pelo menos pense antes. Era preciso ? realmente melhorei a experiência do usuário ? Ou só achei legal a tecnologia, e resolvi inchar o carregamento da minha aplicação ou site, com trocentas linhas de código javascript para fazer algo simples?
    – user60252
    Commented 3/01/2019 às 10:20

3 Respostas 3

1

Atendo a especificação citada na pergunta, pensei na seguinte solução:

Esse switch case precisa estar na mesma página de envio do formulario usando o valor do select para um caso específico.

Chamei o próprio arquivo index.php no ajax, e nesse segundo momento o POST["aaa"] existirá e acessará a segunda parte da condução if. Essa segunda parte do If fará com que seja chamado o arquivo PHP de acordo com o 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>
4
  • Em $("#formHide").html(data); não deveria apontar pro formulário alvo: submit-form?
    – LipESprY
    Commented 1/01/2019 às 21:36
  • Almerindo Abreu parabéns! Fiz apenas uma pequena alteração colocando o switch dentro do formulario e funcionou perfeitamente. Você conseguiu enxergar a solução por outro angulo inserindo a condição que fez toda a diferença. Fico me perguntando por que eu não tinha pensado nisso antes kkkk. Muito obrigado pela sua contribuição. Valeuuu!!!
    – Skyline
    Commented 1/01/2019 às 23:12
  • E qual a utilidade desse ajax?
    – user60252
    Commented 2/01/2019 às 16:40
  • Sem o ajax quando retornado o valor, o campo select some. Já com o ajax o campo select permanece, dando a oportunidade do usuário mudar a sua escolha . Abraço
    – Skyline
    Commented 3/01/2019 às 1:00
1

Formulei essa resposta exclusivamente pensando no objetivo do projeto:

  1. Pego o valor do select com onChange
  2. Exibe uma div oculta (exibe o formulário principal)
  3. O valor é enviado para retorno.php (servidor)
  4. Pego o valor e utilizo no switch case na página atual
  5. Com o switch case é incluido campos personalizados para o form principal de acordo com o que foi escolhido no select.

Como mencionado no comentário, a lógica do projeto está errada. O correto seria assim:

  1. Pegar o valor do select via evento change;
  2. Iniciar uma requisição via ajax que retorne o formulário desejado;

    • Pega o valor passado via ajax;
    • Joga tal valor no switch;
    • Retorna (exibe) o arquivo do formulário desejado (onde supostamente estariam os campos);
  3. Exibir uma div oculta com o formulário retornado via ajax;

Finalizado a teoria, vamos aos códigos:

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>

Repare que estou utilizando o jQuery 3.3.1, que tem algumas diferenças na sintaxe do ajax;

retorno.php:

<?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.'
    );

Repare os arquivos de cada formulário deverão estar na pasta forms/ (só por questões de organização).

Elaborei um projeto baseado nesta minha resposta. Está um pouco mais completo do que esta resposta, mas como não é o objetivo criar/corrigir os outros arquivos, nem fiz questão de postá-los aqui. Caso queira, pode verificar no meu GitHub/LipESprY/sopt-usar-valor-retornado-via-ajax-com-switch-case-na-pagina-atual.

Outra questão: reformulei grande parte do seu código, como já havia combinado no comentário. Explicar cada mudança que fiz iria gerar uma imensa leitura um tanto desnecessária. Se queres ver as mudanças detalhadas, basta olhar este commit no GitHub.

4
  • LipESprY! Valeu pela ajuda, no entanto é como eu tinha dito: precisava do swith na página index.php e não na pagina retorno.php, pois o meu maior problema era conseguir utilizar o valor do select na propria página index.php sem refresh. Na página retorno.php eu já tinha feito e conseguido antes. De certa forma obrigado pela força.
    – Skyline
    Commented 1/01/2019 às 23:25
  • @skyline Pelo menos teve o esforço de rodar meu código? Entendo que já tenha solucionado, mas sei lá. Não estou conformado com você usando esse tal switch no mesmo arquivo dessa forma. Quando vc perceber, seu código será uma bela bagunça. Tudo misturado... Mas fazer oq, né?! Importante é vc entender seu código...
    – LipESprY
    Commented 1/01/2019 às 23:53
  • @ LipESprY Sim! O seu código funciona perfeitamente e eu já tinha conseguido dessa forma antes. O meu objetivo maior era usar o valor do select passado para o Switch na pagina index.php.
    – Skyline
    Commented 2/01/2019 às 2:00
  • @skyline Se resolveu o problema, ta valendo! ;)
    – LipESprY
    Commented 2/01/2019 às 2:07
0

Não vi necessidade do ajax nesse seu código vez que da forma abaixo funciona bem.

<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>
4
  • sem o ajax (da forma que vc mencinou), quando retornado o valor o campo select some. Já com o ajax o campo select permanece, dando a oportunidade do usuário ainda mudar a sua escolha. Abraço
    – Skyline
    Commented 3/01/2019 às 0:59
  • Ainda assim não vejo necessidade de ajax, fiz uma pequena modificação na minha resposta para atender essa sua observação. Antes de sair enfiando ajax em tudo, pelo menos pense antes. Era preciso ? realmente melhorei a experiência do usuário ? Ou só achei legal a tecnologia, e resolvi inchar o carregamento da minha aplicação ou site, com trocentas linhas de código javascript para fazer algo simples?
    – user60252
    Commented 3/01/2019 às 10:25
  • Essa página retorno.php não tem sentido só pra pegar o valor via post e devolver ele da forma que foi recebido. Teria mais sentido se fosse fazer um tratamento com o valor enviado pelo formulário e devolver outro valor, por exemplo, uma verificação de um valor em um banco de dados ou um insert, ou update ou etc....
    – user60252
    Commented 3/01/2019 às 10:28
  • Leo. O seu código é funcional, porem com ajax o retorno é mais apresentável e menos tosco, podendo até mesmo incluir um fade. Ja o submit() inserido no evento força um reloud na página. Outra coisa, com ajax apos escolhido a opção, mantem a ultima escolha ativa no select e sem o ajax ele volta para a opção "selecionar" no select. Mas isso é o de menos. O problema é que agora estou tentando inserir esse codigo no meu tema wordpress e não funciona de jeito nenhum, já fora do wordpress funciona beleza. Não sei mais o que fazer.
    – Skyline
    Commented 6/01/2019 às 0:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .