0

Necesito que al llenar un formulario y darle a un botón "Calcular" una funcion javascript me realice una operación matemática y me demuestre el resultado debajo del formulario, luego de mostrarlo debería hacerse visible un botón "Guardar", el cual al darle click me procesará los datos. Esto lo logré en cierta medida con un onclick llamando a la función javascript. El problema es que luego de mostrarse el resultado debajo del formulario y de aparecer el botón "Guardar", inmediatamente me envía los datos a través del archivo que indique en el action del formulario.

Archivo con el formulario:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title>Agregar producción de leche</title>
<script src="js/jquery.js"></script>
<script src="js/getRendimientoLeche.js"></script>
<link rel="stylesheet" href="css/alertify/alertify.css">
<link rel="stylesheet" href="css/alertify/default.css">
</head>
<style type= "text/css">
#Guardar{
visibility:hidden;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
  $("#calcular").click(function(){
    $("#Guardar").css("visibility","visible");


  });
  $("#borrar").click(function(){
    $("#Guardar").css("visibility","hidden");
  });

  });
 </script>
 <body>

<form id="form-in-leche"  action = "cntl/in_rendLeche.php" method="POST">

  <label for="litrosi">Litros a procesar:
    <input type="number" id="litrosi" name="litrosi" min="1" >
  </label><br>

  <label for="Porcentaje_grasa">Porcentaje de grasa(%):
    <input type="number" id="Porcentaje_grasa"name="Porcentaje_grasa"      min="0" max="100" maxlength="3">
  </label><br>

  <label for="grado_acidez">Grado de acidez(º):
    <input type="number" id="grado_acidez" name="grado_acidez" >
  </label><br>

  <label for="litrosxenvase">Litros por envase:
    <span >1,8 litros</span>
  </label><br>
  <label for="uprocesadas">Unidades procesadas:
    <input type="number" id="uprocesadas" name="uprocesadas" >
  </label><br>

   <label for="fecha_leche">Fecha:
    <input type="date" id="fecha_leche" name="fecha_leche"></label> <br>
    <div id="resultado"></div>
  <button id="calcular" onclick="calcularRendimientoLeche();">Calcular</button>
  <input type="reset" id="borrar" name="borrar" value="Borrar">
  <input type ="submit" id = "Guardar" name="Guardar">
</form>
 </body>
</html>

Archivo javascript:

function calcularRendimientoLeche(){

var litrosaprocesar= document.getElementById('litrosi').value
var unidadesprocesdas=document.getElementById('uprocesadas').value



var total= unidadesprocesdas *1.8;
var rendimiento_leche= (total/litrosaprocesar)*100;
$('#resultado').append('Leche procesada: '+total+'<br/> Rendimiento: '+rendimiento_leche.toFixed(2)+'%');
}

Tengo como alternativa olvidarme del botón "Guardar" y hacer que el botón de Calcular sea "Calcular y guardar", mostrar los datos con un alert para que el usuario pueda ver el resultado y que al aceptarlo se envien los datos, sin embargo no soy muy fan de los alert y me parece más interactivo que aparezca el botón "Guardar" para que cumpla la funcion de guardar los datos ingresados.

1
  • Yo haría lo siguiente: me olvidaría en efecto del tal botón Guardar, recurriendo a algo mucho más elegante y profesional: un listener común en todos los inputs que entran en el cálculo en el cual controlas los cambios, si no están vacíos, actualizando mostrando el cálculo. Desde ese mismo listener podrías activar el botón Enviar, que en principio estaría desactivado...Ganarias en experiencia de usuario, pues estarías evitando un click en el proceso y actualizando los datos en tiempo real según el usuario modifique algo en cualquiera de los inputs.
    – A. Cedano
    el 28 jun. 2018 a las 9:09

2 respuestas 2

2

Tu problema se debe a que a que no tienes definido tu button correctamente. Deberia tenerlo asi:

<button type="button">

Si no lo defines por defecto el atributo type tomara el valor submit.

1
  • Gracias, eso resolvió mi problema, creí que por ser button era redundante definir el type.
    – jaoc6
    el 28 jun. 2018 a las 9:44
1

Para que el botón guardar sea invisible en un principio:

<input type="submit" id="Guardar" name="Guardar" style="display:none;">

Y para que botón no envíe la solución es la propuesta por Joel:

<button id="calcular" type="button" onclick="calcularRendimientoLeche();">Calcular</button>

Si además quieres que este botón "Guardar" esté deshabilitado:

document.getElementById('Guardar').disabled = true; //con JavaScript
$("#Guardar").attr("disabled", true); // con JQuery

Y en tu función calculas el total, habilitas y muestras el botón "Guardar":

function calcularRendimientoLeche(){
....
  $("#Guardar").attr("disabled", false);
  $("#Guardar").show();
}
2
  • Ya lo de mostrar y ocultar el boton Guardar lo había logrado con el script arriba del formulario, pero no está demás conocer otras opciones.Gracias!
    – jaoc6
    el 28 jun. 2018 a las 9:42
  • @jao6 No hay de que. Sobre todo te lo añadí por la opción de deshabilitar el botón mientras no entre en la función que lo va a mostrar, para que en ningún caso pueda hacerse el envío, ya que bastaría con modificar el css en el navegador para poder clickar guardar.
    – Carmen
    el 28 jun. 2018 a las 10:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.