follow 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 calculus on the screen in a form separated by divs, but when I click calculate I want to keep the data saved on the screen without it being deleted! the operation can be seen here, below in the section Calculation // Planting link