Question 165670 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Why does WordPress keep redirecting after custom form submission?

I’m a newer developer, so do please go easy on me. To summarize, the company I work for currently has it’s website built using WordPress, but also wants a very specific type of form/calculator that plugins aren’t able to create. So I created one out of HTML and Javascript, and I’m running into an issue where after submission, the page redirects to the homepage (with some of the fields in the url). The problem is that I’m trying to return some information on the same page (after the user clicks the submit button), so refreshing makes it so that user is not able to read that information. How do I make it so that the page does not fresh upon submission?
Also, when I load just the HTML & Javascript that I wrote in my browser (without putting it in the WordPress site), the page works as intended; not refreshing on submit.

This is the form portion:


    <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>

and the Javascript portion:

<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>

note: I have excluded some functions that are pure calculations/industry coefficients but they do work (eg. getBin(), calculateSavings(), the units field)

Tags:

2

Answers


  1. 0

    I´m pretty sure it will work if you replace your

    input type="submit" with anything else and onclick instead

    for example:
    <button type="button" onclick="calculate();" > "submit" form </button>

    on the form just keep <form onsubmit="return false;" but it shouldn´t be triggered anyway

    Login or Signup to reply.
  2. 0

    Your calculate function should take in event as an argument. On form submission, you want to prevent the default behavior of your page, which is that it refreshes. This can be achieved using event.preventDefault()

    Here’s what I mean:

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

    Then in your calculate function, use your event argument to stop the default behavior.

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

    You can check out a relevant answer here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search