Unexpected behavior of javascript function in a form

Question

Unexpected behavior of javascript function in a form

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

I need to fill in a form and give a button "Calculate" a javascript function to perform a mathematical operation and show me the result below the form, after showing it, a "Save" button should be visible, which when given click will process the data. This I achieved to a certain extent with a onclick calling the javascript function. The problem is that after the result is shown below the form and the "Save" button appears, it immediately sends me the data through the file indicated in the action of the form.

File with the form:

<!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>

Javascript file:

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)+'%');
}

I have as an alternative to forget the "Save" button and make the Calculate button "Calculate and save", show the data with an alert so that the user can see the result and when accepting it the data is sent, without However, I am not a fan of the alerts and I find it more interactive that the "Save" button appears so that it fulfills the function of saving the entered data.

javascript html

asked by jaoc6 28.06.2018 в 06:55

source

2 answers

1

To make the save button invisible at first:

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

And for what button does not send the solution is the proposal by Joel:

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

If you also want this "Save" button to be disabled:

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

And in your function you calculate the total, you enable and show the "Save" button:

function calcularRendimientoLeche(){
....
  $("#Guardar").attr("disabled", false);
  $("#Guardar").show();
}

answered by 28.06.2018 в 09:03

Problem with a query to the database from Eloquent / PHP How to ask the user a confirmation to delete object?

score 2 · Accepted Answer

2

Your problem is due to the fact that you have not defined your button correctly. I should have it like this:

<button type="button">

If you do not define it by default, the type attribute will take the value submit .

answered by 28.06.2018 / 07:03

source