提交自定义表单后，Wordpress 不断重定向答案

【问题标题】：Wordpress Keeps Redirecting After Custom Form Submission提交自定义表单后，Wordpress 不断重定向
【发布时间】：2021-07-05 19:36:59
【问题描述】：

我是一名新开发人员，所以请放轻松。总而言之，我工作的公司目前使用 Wordpress 构建网站，但也需要插件无法创建的非常特定类型的表单/计算器。所以我用 HTML 和 Javascript 创建了一个，我遇到了一个问题，提交后，页面重定向到主页（url 中有一些字段）。问题是我试图在同一页面上返回一些信息（在用户单击提交按钮之后），因此刷新使得用户无法读取该信息。如何使页面在提交时不新鲜？
此外，当我只加载我在浏览器中编写的 HTML 和 Javascript（而不将其放入 Wordpress 站点）时，页面会按预期工作；提交时不刷新。
这是表单部分：


    <form onsubmit="calculate();return false">
        <fieldset>
            <!-- Form Name -->
            <legend>Oxygen Calculator</legend>

            <!-- Name Information -->
            First Name: <input type="text" name="fname" id="fname" class="hfield" required="">
            Last Name: <input type="text" name="lname" id="lname" class="hfield" required="">
            <br>

            <!-- Contact Information -->
            Company: <input type="text" id="companyName" required="">
            Email: <input type="email" id="email" required="">
            Phone: <input type="tel" id="phone"> <br>
            <!-- Oxygen Information -->
            Current Oxygen Usage: <input type="number" name="oxygenusage" id="currentUsage" required="">
        </fieldset>
        <input type="submit" value="Submit this form!">
    </form>
    <div id="results"></div>
    <div id="download"></div>

和 Javascript 部分：

<script>
function calculate() {
            // Getting Information from Form
            var values = getInfo();
     
            var currentUsage = values[0];
            var units = values[1];
            var fname = values[2];
            var lname = values[3];
            var companyName = values[4];
            var email = values[5];
            var phone = values[6];

            // Getting Ratios for Conversion to SCFH
            var ratios = checkType(units);
            var mul = ratios[0];
            var div = ratios[1];

            // Calculating SCFH
            var scfh = calculateSCFH(currentUsage, mul, div);

            // Calculating Cost Savings
            var savings = calculateSavings(scfh);

            // Creating Bins 
            var bin = getBin(scfh);

            // For resulting text
            document.getElementById("results").innerHTML = `
            <h3> Calculated Cost Savings </h3>
            <p> Your Calculated Bin:  ` + bin + fname + lname + `</p>
            <p> Your Calculated Savings:  ` + savings + `<p>
            `;

            // For Responding with PDF download
            pdfLink = getPDFLink(bin) // Takes BIN as arg
            document.getElementById("download").innerHTML = `
            <p>A Brochure of Your Recommended Machine </p> <a href="`+ pdfLink + `">Download Here</a>
            `

            return false;
        }
</script>

注意：我排除了一些纯计算/行业系数但它们确实有效的函数（例如getBin()、calculateSavings()、units 字段）

【问题讨论】：

标签： javascript wordpress forms page-refresh

【解决方案1】：

您的calculate 函数应将event 作为参数。在提交表单时，您希望阻止页面的默认行为，即刷新。这可以使用event.preventDefault()来实现

这就是我的意思：

<form onsubmit="return mySubmitFunction(event)"> // you can simply write 'e' instead of event

然后在您的计算函数中，使用您的 event 参数来停止默认行为。

function mySubmitFunction(e) {
  e.preventDefault();
  // rest of your code
  return false;
}

您可以查看相关答案here。

【讨论】：

【解决方案2】：

我敢肯定，如果你更换你的，它会起作用的

input type="submit" 与其他任何内容一起使用，然后改为 onclick

例如： <button type="button" onclick="calculate();" > "submit" form </button>

在表单上保留<form onsubmit="return false;"，但无论如何都不应该触发它

【讨论】：