How to avoid the page load when I click Calculate in the form with JavaScript

Question

How to avoid the page load when I click Calculate in the form with JavaScript

Navigation

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

1

I'm doing this program for a college job with HTML CSS and JS. But whenever I click on calculate the page reloads and the result consequently somo. I've already tried other questions here and in other forums but I did not find anything that worked if you can help me, I'll be very grateful.

/* Criado por João Divino em 20 de fevereiro de 2018 */

function calcular_media(){

    var sit="";
    var nota1;
    nota1 = document.media.nota1.value;
    var nota2;
    nota2 = document.media.nota1.value;
    var nota3;
    nota3 = document.media.nota1.value;
    var nota4;
    nota4 = document.media.nota1.value;

    var media = (4/(nota1+nota2+nota3+nota4));

    if (media >= 5) {
        if (media < 5 && media < 7) {
            sit = "Você esta de recuperação"
        } else {
            sit = "Você esta aprovado"
        }
    } else {
        sit = "Você foi reprovado";
    }
    document.getElementById("med").value=media;
    document.getElementById("sit").value=sit;
}

.pgmedia {
    width: 100%;
}
.media input {
    width: 90%;
    margin-left: 10px;
    margin-right: 10px;
}
.media textarea {
    width: 90%;
    margin-left: 10px;
    margin-right: 10px;
}
.botaoCalcular {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 1px;
}
.media input {
    padding-left: 20px;
    color: #292929;
    font-size: 18px;
    background-color: #E9E9E9;
    border: 1px solid #E9E9E9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.media textarea {
    padding-left: 20px;
    color: #292929;
    font-size: 18px;
    background-color: #E9E9E9;
    border: 1px solid #E9E9E9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 200px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.botaoCalcular {
    border-radius: 4px;
    color: #fff;
    padding: 2px 40px;
    height: 40px;
    margin-top: 18px;
    opacity: 0.9;
    margin-bottom: 20px;
    cursor: pointer;
    background: #B22222;
    display: inline-block;
    border: none;
    border-bottom: 1px solid #500707;
    border-right: 1px solid #500707;
    position: center;
}
.botaoCalcular:hover {
    opacity: 1.0;
    transition: 1s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Media Escolar</title>
    <meta charset="UTF-8">
    <meta name="description" content="Site para calcular média escolar">
    <meta name="Keywords" content="javascript, HTML, CSS, Ecma script, aprendizado, exercicios, Ti, desenvolvimento web,atividades, IMC, Calculdor, Calculador de Média escolaar">
    <meta name="robots" content="index, fallow">
    <meta name="author" content="João Divino da Silva">
    <link rel="stylesheet" href="css/media_escolar.css">
    <script rel="scriptv" src="js/media_escolar.js" ></script>
</head>
<body>

<div id="pgmedia">
    <form name ="media" class="media" tabindex="1" action="#" method="post">
        <input id="nota1" name="nota1" required="" type="text" placeholder="Sua Nota no 1° Bimestre" >
        <input id="nota2" name="nota2" required="" type="text" placeholder="Sua Nota no 2° Bimestre" >
        <input id="nota3" name="nota3" required="" type="text" placeholder="Sua Nota no 3° Bimestre" >
        <input id="nota4" name="nota4" required="" type="text" placeholder="Sua Nota no 4° Bimestre" >
        <button class="botaoCalcular"  onclick="calcular_media()">Calcular</button>
        <input id="med" name="media" type="text" placeholder="Sua média" readonly/>
        <label></label><textarea id="sit" name="situação" placeholder="Sua Situação" readonly></textarea>
    </form>
</div>

</body>
</html>

javascript html css

asked by anonymous 26.02.2018 / 21:52

2 answers

1

This happens because you are not setting the type attribute on the <button class="botaoCalcular" onclick="calcular_media()">Calcular</button> button.

This causes the browser to automatically assign the value of this attribute to submit , which is the form submission.

To avoid this problem, simply add the type="button" attribute. Ex:

<button type="button" class="botaoCalcular"  onclick="calcular_media()">Calcular</button>

Example:

/* Criado por João Divino em 20 de fevereiro de 2018 */

function calcular_media(){

    var sit="";
    var nota1;
    nota1 = document.media.nota1.value;
    var nota2;
    nota2 = document.media.nota1.value;
    var nota3;
    nota3 = document.media.nota1.value;
    var nota4;
    nota4 = document.media.nota1.value;

    var media = (4/(nota1+nota2+nota3+nota4));

    if (media >= 5) {
        if (media < 5 && media < 7) {
            sit = "Você esta de recuperação"
        } else {
            sit = "Você esta aprovado"
        }
    } else {
        sit = "Você foi reprovado";
    }
    document.getElementById("med").value=media;
    document.getElementById("sit").value=sit;
}

.pgmedia {
    width: 100%;
}
.media input {
    width: 90%;
    margin-left: 10px;
    margin-right: 10px;
}
.media textarea {
    width: 90%;
    margin-left: 10px;
    margin-right: 10px;
}
.botaoCalcular {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 1px;
}
.media input {
    padding-left: 20px;
    color: #292929;
    font-size: 18px;
    background-color: #E9E9E9;
    border: 1px solid #E9E9E9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.media textarea {
    padding-left: 20px;
    color: #292929;
    font-size: 18px;
    background-color: #E9E9E9;
    border: 1px solid #E9E9E9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 200px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
.botaoCalcular {
    border-radius: 4px;
    color: #fff;
    padding: 2px 40px;
    height: 40px;
    margin-top: 18px;
    opacity: 0.9;
    margin-bottom: 20px;
    cursor: pointer;
    background: #B22222;
    display: inline-block;
    border: none;
    border-bottom: 1px solid #500707;
    border-right: 1px solid #500707;
    position: center;
}
.botaoCalcular:hover {
    opacity: 1.0;
    transition: 1s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title> Media Escolar</title>
    <meta charset="UTF-8">
    <meta name="description" content="Site para calcular média escolar">
    <meta name="Keywords" content="javascript, HTML, CSS, Ecma script, aprendizado, exercicios, Ti, desenvolvimento web,atividades, IMC, Calculdor, Calculador de Média escolaar">
    <meta name="robots" content="index, fallow">
    <meta name="author" content="João Divino da Silva">
    <link rel="stylesheet" href="css/media_escolar.css">
    <script rel="scriptv" src="js/media_escolar.js" ></script>
</head>
<body>

<div id="pgmedia">
    <form name ="media" class="media" tabindex="1" action="#" method="post">
        <input id="nota1" name="nota1" required="" type="text" placeholder="Sua Nota no 1° Bimestre" >
        <input id="nota2" name="nota2" required="" type="text" placeholder="Sua Nota no 2° Bimestre" >
        <input id="nota3" name="nota3" required="" type="text" placeholder="Sua Nota no 3° Bimestre" >
        <input id="nota4" name="nota4" required="" type="text" placeholder="Sua Nota no 4° Bimestre" >
        
        <button type="button" class="botaoCalcular"  onclick="calcular_media()">Calcular</button>
        
        <input id="med" name="media" type="text" placeholder="Sua média" readonly/>
        <label></label><textarea id="sit" name="situação" placeholder="Sua Situação" readonly></textarea>
    </form>
</div>

</body>
</html>

26.02.2018 / 21:56

Temperature converter Exchange Tag for another SQL Tag

score 4 · Accepted Answer

Just remembering that your code has 3 problems:

1. You are adding the values wrongly. You have to convert the values of the fields into numbers before adding, otherwise they   will only be concatenated.

2. The division to take the average is wrong: add the numbers and divide by 4, and do not divide 4 by the sum of the numbers.
3. This if will never be true: if (media < 5 && media < 7) {

See the optimized and corrected code at the end of the answer.

Place at the end of the function:

event.preventDefault();

This will prevent the form from being submitted, avoiding reloading the page.

As stated by Valdeir Psr, if you set type of button to type="button" , event.preventDefault(); is no longer required, but also required has no effect.

But I go a little further: if you just want to do calculations, you do not even have to use <form> (see edit at the end of the answer ). Use document.getElementById :

function calcular_media(){

    var sit="";
    var nota1;
    nota1 = document.getElementById("nota1").value;
    var nota2;
    nota2 = document.getElementById("nota2").value;
    var nota3;
    nota3 = document.getElementById("nota3").value;
    var nota4;
    nota4 = document.getElementById("nota4").value;

    ...

}

Optimized and corrected code:

function calcular_media(){

    var sit,
    nota1 = parseFloat(document.getElementById("nota1").value),
    nota2 = parseFloat(document.getElementById("nota2").value),
    nota3 = parseFloat(document.getElementById("nota3").value),
    nota4 = parseFloat(document.getElementById("nota4").value),
    media = (nota1+nota2+nota3+nota4)/4;

   if (media >= 5 && media < 7) {
      sit = "Você esta de recuperação"
   } else if(media >= 7) {
            sit = "Você esta aprovado"
    } else {
        sit = "Você foi reprovado";
    }
    document.getElementById("med").value=media;
    document.getElementById("sit").value=sit;
    
    if(media){
       event.preventDefault();
    }
}

<div id="pgmedia">
  <form class="media" tabindex="1">
     <input id="nota1" required type="text" placeholder="Sua Nota no 1° Bimestre" >
     <input id="nota2" required type="text" placeholder="Sua Nota no 2° Bimestre" >
     <input id="nota3" required type="text" placeholder="Sua Nota no 3° Bimestre" >
     <input id="nota4" required type="text" placeholder="Sua Nota no 4° Bimestre" >
     <button class="botaoCalcular"  onclick="calcular_media()">Calcular</button>
     <input id="med" type="text" name="media" placeholder="Sua média" readonly/>
     <label></label><textarea id="sit" name="situação" placeholder="Sua Situação" readonly></textarea>
  </form>
</div>

Edit

I noticed you want to use required for a simple empty field control. In this case, you can use <form> . The corrected code above was changed to use with <form> .