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

Question

我是新手开发者，所以请放轻松。总而言之，我工作的公司目前拥有使用 Wordpress 构建的网站，但还需要一种插件无法创建的非常特殊的 form/calculator 类型。所以我从 HTML 和 Javascript 中创建了一个，我运行遇到了一个问题，在提交后，页面重定向到主页（[= 中的一些字段31=]).问题是我试图 return 同一页面上的某些信息（在用户单击提交按钮后），因此刷新使用户无法阅读该信息。我如何才能使页面在提交时不刷新？
另外，当我只加载我在浏览器中编写的 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>

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

Answer 1

我很确定如果你更换你的

它会起作用

input type="submit" 用其他任何东西代替 onclick

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

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

Answer 2

您的 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。

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

Wordpress Keeps Redirecting After Custom Form Submission

javascript

forms

wordpress

page-refresh