Reload in javascript

Question

follows the script below:

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

This script returns me data from a calculation on the screen in a form separated by Ivs, but when you click on calculate I want to keep the recorded data on the screen without it being erased ! the operation can be seen here , la down in the section Calculation // Plantability http://sementesmaua.magz.com.br/

Answer 1

In the example that Voce passed, when clicking the "CALCULATE" button, an Ajax request is made (asynchronous, without page Reload) for a script. php that processes the values entered on the screen. This script . php returns an HTML that in the successful Ajax callback, displays that HTML on the right side. This is basically the purpose of Ajax: update small parts of your screen.

Therefore, what you should do is change your Ubmit function so that in the success/error callback you update your screen (that is, some div created specifically for this). It would look something like this:

$("#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;
         } 
    });
});

With this javascript, when submitting the form, the function above will have control of your submission. It performs an asynchronous request to the URL via the HTTP POST method with the data needed for the calculation. When this request returns, automatically your result will be passed to the callbacks. In the above examples, in the two callbacks (Success and error), the logic was to change the content of a DIV (id result) to receive the returned HTML from the URL that performed the calculation.

I hope I’ve helped.