单击带有形式动作的按钮时停止链接转发

Question

我创建了此代码，可以计算som值。单击“计算”按钮时，它仅显示结果。就其本身而言，代码可以正常工作。

为了能够记录数据，它还通过使用链接到php文件的表单和操作来发送插入值的电子邮件。将此表单添加到代码中后，它错误地重定向到表单action-url。理想情况下，它应该在网页上显示计算结果，而无需在按下按钮时重新加载或重定向。

我尝试使用“ return false”，但没有任何运气。更改/添加按钮类型时，它将阻止计算功能或重定向。

<form action="/php/calcA.php" method="POST" role="form">
    <p>Value A</p>
    <input type="number" id="num1" style="text-align: center;" class="form-control" name="num1" required="required" data-error="Value is required.">
    <p>Value B</p>
    <input type="number" id="num2" style="text-align: center; class="form-control" name="num2" required="required" data-error="Value is required."></p>

    <button onClick="calculate()" class="btn btn-primary blueline" style="color: #FFF; font-weight: 700;">Calculate</button>
    <br>
    <h4 class="main" style="margin-left: 25px; margin-right: 25px; background: #1CBC55; color: #FFF; text-align: left; font-weight: bold" id="answer">Savings in total:</h4>     
<script>
    function calculate()
        var field1=document.getElementById("num1").value;
        var field2=document.getElementById("num2").value;

        var result=parseFloat(field1)*parseFloat(field2)-(2000*parseFloat(field1));

     if(!isNaN(result)) 
        document.getElementById("answer").innerHTML="Savings in total: €"+result+".00 excl. VAT";
     

</script>
</form>

PHP文件：

    $num1 = $_POST['num1'];
    $num2 = $_POST['num2'];

    $email_from = 'Data from calcA';
    $email_subject = 'Data from CalcA';
    $email_body =
                "$num1\n".
                "$num2\n"

    $to = "data@youremail.com";
    $headers = "From: $email_from \r\n";
    $headers = "Reply-To: $email \r\n";

mail($to,$email_subject,$email_body,$headers);