Hey there! I see you're having trouble getting your Register button to redirect to /approve when clicked. Let's break down why this is happening and how to fix it.

The Root Cause #

Your button is an <input type="submit">, which has a default behavior: it will submit the parent form (if there's one on the page) as soon as it's clicked. This happens before your approve() function's redirect can fully execute, which is why you're not seeing the expected jump to /approve.

Solutions to Try #

1. Change the Button Type (If You Don't Need to Submit a Form)

If this button doesn't need to submit form data and is just for navigation, switch the type from submit to button. This removes the default form-submit behavior entirely:

<div class="form-group">
  <input type="button" class="btn btn-primary btn-lg btn-block pb_btn-pill btn-shadow-blue" value="Register" onclick="approve()">
</div>

Your existing approve() function will work as expected now.

2. Prevent Default Form Submission (If You Need to Submit a Form)

If you do need to submit form data and redirect, you'll need to stop the default submit action from interfering. Here are two ways to do this:

Option A: Modify the Inline Onclick and Function

Update your HTML to return the function's result, then adjust the JS to prevent the default event:

<div class="form-group">
  <input type="submit" class="btn btn-primary btn-lg btn-block pb_btn-pill btn-shadow-blue" value="Register" onclick="return approve(event)">
</div>

function approve(event) {
  // Stop the form from submitting
  event.preventDefault();
  // Redirect to the approve page
  window.location.href = '/approve';
  // Ensure no further default actions run
  return false;
}

Option B: Use Event Listeners (Cleaner Approach)

For better maintainability, avoid inline onclick attributes and use an event listener instead:

<div class="form-group">
  <input id="registerBtn" type="submit" class="btn btn-primary btn-lg btn-block pb_btn-pill btn-shadow-blue" value="Register">
</div>

// Wait for the page to fully load before attaching the listener
document.addEventListener('DOMContentLoaded', function() {
  const registerBtn = document.getElementById('registerBtn');
  registerBtn.addEventListener('click', function(event) {
    event.preventDefault(); // Block form submission
    window.location.href = '/approve'; // Redirect
  });
});

Quick Check for Flask Backend #

Also, make sure you have the corresponding route set up in your Flask app to handle /approve:

from flask import Flask

app = Flask(__name__)

@app.route('/approve')
def approve_page():
    # Replace this with your actual page content/template render
    return "Welcome to the Approve Page!"

# ... rest of your Flask code

Test out these solutions, and your redirect should start working as intended!

内容的提问来源于stack exchange，提问作者sumon c