0

segue o script abaixo:

                            <?php

                        // registrando e incializando arquivos de estilos
                        add_action('init', '__register_script');
                        function __register_script() {
                            wp_register_script( 'js_jquery', plugins_url('/js/jquery.js', __FILE__), array('jquery'), '2.5.1' );
                            wp_register_style( 'css_style', plugins_url('/css/style.css', __FILE__), false, '1.0.0', 'all');
                        }

                        add_action('wp_enqueue_scripts', '__enqueue_style');
                        function __enqueue_style(){
                           wp_enqueue_script('js_jquery');
                           wp_enqueue_style( 'css_style' );
                        }

                        //shortcode tabs calculadora
                        function shortcode_calculadora($content){
                            global $content;
                            ob_start();
                             ?>

                            <div id="cal" class="box">  
                                <div class="row">
                                    <div class="col-2"> 
                                        <div class="tabs">
                                            <!-- tab formulario soja -->
                                            <input name="calculadora" type="radio" id="tab-soja" class="input" checked="checked">
                                            <label id="reload-soja" for="tab-soja" class="label"> Soja </label> 
                                            <div class="panel">
                                                <form action="" method="POST" id="FormSoja" role="form">
                                                    <div class="form">
                                                        <div class="boxinput">
                                                            <label class="labe-title">
                                                            <input class="calinput" id="espacamento" name="espacamento" type="text" required="true"> Espaçamento (Centímetros) </label>
                                                        </div>
                                                        <div class="boxinput">
                                                            <label class="labe-title">
                                                            <input class="calinput" id="populacao" name="populacao" type="text" required="true"> População final (Plantas finais por metro) </label>
                                                        </div>
                                                        <div class="boxinput">
                                                            <label class="labe-title">
                                                            <input class="calinput" id="peso" name="peso" type="text" required="true">  Peso de mil sementes (Gramas) </label>
                                                        </div>
                                                        <div class="boxinput">
                                                            <label class="labe-title">
                                                            <input class="calinput" id="germinacao" name="germinacao" type="text" required="true"> Germiação (%) </label>
                                                        </div>
                                                        <div class="boxinput">
                                                            <label class="labe-title">
                                                            <input class="calinput" id="area" name="area" type="text" required="true"> Área de plantio (Hectares) </label>
                                                        </div>
                                                    </div>
                                                    <div class="btn-form">
                                                        <input id="formsoja" name="formsoja" value="formsoja" type="hidden" />
                                                        <button id="submit" class="btn btn-success"> Calcular </button>
                                                    </div>
                                                </form>
                                            </div>

                                            <!-- tab formulario trigo -->
                                            <input name="calculadora" type="radio" id="tab-trigo" class="input">
                                            <label id="reload-trigo" for="tab-trigo" class="label"> Trigo </label>  
                                            <div class="panel">
                                                <form action="" method="POST" id="FormTrigo" role="form">
                                                    <div class="form">
                                                        <div class="boxinput">
                                                            <label class="labe-title">
                                                            <input class="calinput" id="t_espacamento" name="t_espacamento" type="text" required="true"> Espaçamento (Centímetros) </label>
                                                        </div>
                                                        <div class="boxinput">
                                                            <label class="labe-title">
                                                            <input class="calinput" id="t_populacao" name="t_populacao" type="text" required="true"> População final (Plantas finais por metro) </label>
                                                        </div>
                                                        <div class="boxinput">
                                                            <label class="labe-title">
                                                            <input class="calinput" id="t_peso" name="t_peso" type="text" required="true">  Peso de mil sementes (Gramas) </label>
                                                        </div>
                                                        <div class="boxinput">
                                                            <label class="labe-title">
                                                            <input class="calinput" id="t_germinacao" name="t_germinacao" type="text" required="true"> Germiação (%) </label>
                                                        </div>
                                                        <div class="boxinput">
                                                            <label class="labe-title">
                                                            <input class="calinput" id="t_area" name="t_area" type="text" required="true"> Área de plantio (Hectares) </label>
                                                        </div>
                                                    </div>
                                                    <div class="btn-form">
                                                        <input id="t_formtrigo" name="t_formtrigo" value="formtrigo" type="hidden" />
                                                        <button id="submit" class="btn btn-success"> Calcular </button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- #resultadoSoja  e #resultadoTrigo exibem resultados na tela-->
                                    <div class="col-2 resultado" id="resultadoSoja"></div> 
                                    <div class="col-2 resultado" id="resultadoTrigo"></div>

                                </div>
                            </div>

                        <script type="text/javascript">

                        //Validar formulario FormSoja
                        $(document).ready(function() {
                          $("#FormSoja").submit(function(e) {
                            e.preventDefault();
                            var espacamento = $('#espacamento').val(),
                              populacao = $('#populacao').val(),
                              peso = $('#peso').val(),
                              germinacao = $('#germinacao').val(),
                              area = $('#area').val();
                            $.ajax({
                              type: "POST",
                              url: "<?php echo get_bloginfo('siteurl') . '/wp-content/plugins/tabs-calculadora/somasoja.php'; ?>",
                              data: "espacamento=" + espacamento + "&populacao=" + populacao + "&peso=" + peso + "&germinacao=" + germinacao + "&area=" + area,
                              success: function (resultadoSoja) {
                                    // Em caso de sucesso
                                    document.getElementById('resultadoSoja').innerHTML = resultadoSoja;

                                },
                                error: function (xhr, status, error) {
                                    // Em caso de erro
                                    document.getElementById('resultadoSoja').innerHTML = error;
                                }       
                            });
                            return false;
                          });
                        });         
                        </script>

                        <script type="text/javascript">

                        //Validar formulario FormTrigo
                        $(document).ready(function() {
                          $("#FormTrigo").submit(function(e) {
                            e.preventDefault();
                            var t_espacamento = $('#t_espacamento').val(),
                              t_populacao = $('#t_populacao').val(),
                              t_peso = $('#t_peso').val(),
                              t_germinacao = $('#t_germinacao').val(),
                              t_area = $('#t_area').val();
                            $.ajax({
                              type: "POST",
                              url: "<?php echo get_bloginfo('siteurl') . '/wp-content/plugins/tabs-calculadora/somatrigo.php'; ?>",
                              data: "t_espacamento=" + t_espacamento + "&t_populacao=" + t_populacao + "&t_peso=" + t_peso + "&t_germinacao=" + t_germinacao + "&t_area=" + t_area + "&t_formtrigo=" + t_formtrigo,
                              success: function (resultadoSoja) {
                                    // Em caso de sucesso
                                    document.getElementById('resultadoSoja').innerHTML = resultadoSoja;

                                },
                                error: function (xhr, status, error) {
                                    // Em caso de erro
                                    document.getElementById('resultadoSoja').innerHTML = error;
                                }       
                            });
                            return false;
                          });
                        });             
                        </script>

                        <script type="text/javascript">
                            $("#reload-trigo").click(function() {       
                                $("#alter-image").addClass("imgtrigo");
                                $("#alter-image").removeClass("imgsoja");

                            });

                            $("#reload-soja").click(function() {

                                $("#alter-image").addClass("imgsoja");
                                $("#alter-image").removeClass("imgtrigo");
                            });

                            $messageForm.submit(function(e){
                                e.preventDefault();
                                socket.emit('submit', $messageBox.val());
                                $messageBox.val('')
                            }); 

                            $('input[type="text"]').each(function() {
                                $(this).val('');
                            })
                        </script>

                        <?php 

                            $output = ob_get_clean();
                            return $output;
                        }
                        add_shortcode('calculadora', 'shortcode_calculadora');

Esse script me retorna dados de um calculo na tela num formulario separado por divs, porem ao clicar em calcular eu quero manter os dados gravados na tela sem que os mesmo se apaguem ! o funcionamento pode ser visto aqui , la em baixo na seção Cálculo // Plantabilidade http://sementesmaua.magz.com.br/

3
  • Parece algo a ser tratado no servidor, não no js.
    – bfavaretto
    Commented 16/05/2018 às 22:06
  • A página que vc indicou sequer abre.
    – Sam
    Commented 16/05/2018 às 22:29
  • tenta de novo abir Commented 16/05/2018 às 22:46

1 Resposta 1

2

No exemplo que voce passou, ao clicar no botão "CALCULAR", é feito uma requisição Ajax (assíncrona, sem reload da página) para um script .php que processa os valores informados na tela. Esse script .php retorna um HTML que no callback de sucesso do Ajax, exibe esse HTML ao lado direito. Essa basicamente é a finalidade do Ajax: atualizar partes pequenas da sua tela.

Sendo assim, o que voce deve fazer é alterar a sua função de submit para que no callback de sucesso/erro atualize a sua tela (ou seja, alguma div criada especificamente pra isso). Ficaria mais ou menos assim:

$("#form-orcamento").submit(function(event){
    event.preventDefault(); //cancela o evento default de submit e te dá o controle de como submeter o formulario.
    $.ajax({
         type: "POST", //Metodo HTTP da requisicao GET/POST/HEAD/PUT/DELETE
         url: "http://localhost:8080/sysorcamento/calcula.php", //URL do script .php/.jsp/.js/Webservice responsavel pelos calculos
         data: {'peso': $('#inputPeso').val(), 'germinacao': $('#inputGerminacao').val()}, //Lista dos parametros e seus valores a serem submetidos para o calculo.
         //callback de sucesso
         success: function (respostaDoCalculo) {
             document.getElementById('resultadoCalculo').innerHTML = respostaDoCalculo;
         },
         //callback de erro
         error: function (xhr, status, error) {
             document.getElementById('resultadoCalculo').innerHTML = error;
         } 
    });
});

Com esse javascript, ao ser submetido o formulário, a função acima terá o controle da sua submissão. Ela realiza uma requisição assíncrona para a URL via método HTTP POST com os dados necessários para o cálculo. Quando essa requisição retornar, automaticamente o seu resultado será passado para os callbacks. No exemplos acima, nos dois callbacks (success e error), a lógica foi alterar o conteúdo de uma DIV (a de id resultadoCalculo) para receber o HTML retornado da URL que realizou o calculo.

Espero ter ajudado.

1
  • Claudivan coloquei o código completo ! ainda assim não funciona !!! eu queria que quando passar de aba seja limpo os dados, somente se voltar para a aba onde o calculo foi efetuado que aparece os dados. E caso seja efetuado um novo calculo, faz a limpeza dos dados das duas abas e aparece o dado apenas na aba calculada. Commented 17/05/2018 às 2:38

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 .