单击带有 form-action 的按钮时停止 link-forward

Question

我创建了这段代码，可以计算 som 值。单击计算按钮时，它只会显示结果。代码本身工作得很好。

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

我曾尝试使用 "return false"，但没有成功。当changing/adding按钮类型时，它会阻止计算功能或重定向。

HTML-文件:

<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 type="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";
     }

        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
            }
        };
        xhttp.open("POST", "php/calcA.php", true);
        xhttp.send();
}
</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);

Answer 1

您正在使用默认类型为 submit 的 button，因此它将始终重定向到 action 页面。您可以将 button 更改为 type="button" 并从 calculate() 函数向 /php/calcA.php 页面发送 ajax 请求以发送邮件。

Answer 2

告诉 Javascript 阻止表单发布：

<form action="/php/calcA.php" method="POST" role="form" onsubmit="return handleForm();">
    <blah></blah>
<form>
<script type="text/javascript">
    function handleForm(e) {
        e.preventDefault(); // form will now not submit    
        // do your thing!
    }
</script>

单击带有 form-action 的按钮时停止 link-forward

Stop link-forward when clicking on button with form-action

html

php

input

html-email