Uso input type:"button" porque si uso type="submit" mi página se actualiza

Aqui esta el boton

<input type="button" value="Submit" align="center" Onclick="hitung()" class="myButton">

Esta es la función hitung()

function hitung(){

var e = (document.getElementById("ifin").value);
var panjang = parseFloat (document.getElementById("ipanjang").value);
var hf = 0.0;
var lebar = 0.6;
var tinggi = 0.8;
var total = 0.0;

if (e == "hpl") {

				hf = 1.7;
			}
else if(e == "cat")
			{
				hf = 2.0;
}
else {
				hf = 0.0;
}
total = lebar*tinggi*panjang*hf;
document.getElementById("ototal").innerHTML =eval(total);
}

Necesito usar type:submit porque si lo uso así, no puedo usar el atributo required

1
user8573900 31 oct. 2017 a las 09:44

5 respuestas

La mejor respuesta

Asegúrese de que su función hitung() devuelva false. Al final de la función, simplemente agregue la siguiente línea:

return false;

Si no desea cambiar la función, puede lograr lo mismo cambiando la llamada:

<input type="submit" value="Submit" align="center" Onclick="hitung(); return false;" class="myButton">
0
Peter Abolins 31 oct. 2017 a las 06:55

Si desea continuar con el envío solo si el formulario es válido, use reportValidity y devuelve el resultado de su método.

<input type="button" value="Submit" align="center" onsubmit="return hitung(this)" class="myButton">

function hitung( thisFormElement )
{
   //rest of the logic

   return thisFormElement.reportValidity();
}
0
gurvinder372 31 oct. 2017 a las 06:55

Comprueba el siguiente código

function hitung(event){

var e = (document.getElementById("ifin").value);
var panjang = parseFloat (document.getElementById("ipanjang").value);
var hf = 0.0;
var lebar = 0.6;
var tinggi = 0.8;
var total = 0.0;

if (e == "hpl") {

				hf = 1.7;
			}
else if(e == "cat")
			{
				hf = 2.0;
}
else {
				hf = 0.0;
}
total = lebar*tinggi*panjang*hf;
document.getElementById("ototal").innerHTML =eval(total);
event.preventDefault();
event.stopPropogation();
}
<input type="button" value="Submit" align="center" Onclick="hitung(event)" class="myButton">
0
Sandeep 31 oct. 2017 a las 06:51

Utilice enviar, debe evitar el incumplimiento.

Lea esto para que pueda aprender cómo funciona y cómo implementarlo, solo copie y pegue. Entonces, si tiene preguntas, solo pregunte. Aquí está la documentación. https://developer.mozilla.org/en-US/ docs / Web / API / Event / preventDefault

0
Andy 31 oct. 2017 a las 06:53

Para evitar el comportamiento predeterminado de un botón de envío, puede usar jQuery:

$(document).ready(function($) {
  $(document).on('submit', '#formsubmit', function(event) {
    event.preventDefault();

    alert('page did not reload');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id='formsubmit'>
  <button type='submit'>submit</button>
</form>
0
Manpreet Matharu 31 oct. 2017 a las 06:50