点击注册按钮后模态框卡顿问题排查求助

Let's break down the issues in your code step by step and fix them:

1. Critical JavaScript Error: Undefined password Variable #

Looking at your JS code, you're trying to send password: password in the AJAX data, but you never declared or assigned the password variable! This throws a ReferenceError that stops all subsequent code execution (including the AJAX call), which explains the page freeze after the alerts.

Fix this by adding the missing line:

let email = $("#email").val();
let fname = $("#fname").val();
let oname = $("#oname").val();
let phone = $("#phone").val();
let country = $("#country").val();
let password = $("#password").val(); // Add this line!

2. Broken HTML Form Structure #

Your form's DOM structure is invalid: the <form> tag is nested inside a columns div, but the columns div is closed before the submit button, and the form's closing tag is misplaced. This means your submit button isn't actually inside the <form> element in the rendered DOM, which can cause unexpected default form submission behavior even with e.preventDefault().

Fix the HTML nesting to ensure the submit button is inside the form, and all tags are properly closed:

<!-- modal for registration-->
<div style="display:none;" id="reg-modal" class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="button modal-card-title baseColor white ">Register </p>
            <button id="reg-close" class="button is-danger delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            <div class="notification is-light is-link">You are not currently logged in. Register quickly and access our features<hr><b>Ensure</b> you provide a working <b>phone number</b> and <b>email</b> </div>
            <!-- Wrap content properly inside the form -->
            <form id="reg-form" action="../../../store/register" method="post">
                <div style="display:flex; flex-flow:row wrap;" class="columns is-mobilee box">
                    <div class="column is-half-mobile is-three-quarters-desktop is-half-tablett">
                        <div class="control has-icons-right">
                            <input id="email" class="input is-link " name="email" type="email" placeholder="Email..." required><span class="icon is-right baseColor white"><i class="fa fa-envelope"></i></span>
                        </div>
                    </div>
                    <!-- All other column inputs here -->
                    <div class="column is-half-mobile is-three-quarters-desktopp is-half-tablett has-icons-right">
                        <div class="control has-icons-right">
                            <input id="password" class="input is-link " name="password" type="text" placeholder="Password" required><span class="icon is-right baseColor white"><i class="fa fa-key"></i></span>
                        </div>
                    </div>
                    <div class="select is-link">
                        <select id="country" name="country">
                            <option>COUNTRY</option>
                            <option value="AU">Australia</option>
                            <option value="BR">Brazil</option>
                            <!-- Rest of country options -->
                        </select>
                    </div>
                </div> <!-- Close columns div -->
                <!-- Submit button is now INSIDE the form -->
                <input type="submit" name="register" id="register" class="button is-link is-rounded block mb-1" value="Register">
                <span class="ml-2 fa fa-arrow-right"></span>
            </form> <!-- Close form properly -->
        </section> <!-- Close modal-card-body -->
    </div> <!-- Close modal-card -->
</div> <!-- Close modal -->

3. Better Event Handling: Use Form Submit Instead of Button Click #

Instead of listening for a click on the submit button, listen for the form's submit event. This handles both button clicks and Enter key submissions, and is more reliable for form interactions:

$("#reg-form").on("submit", function (e) {
    e.preventDefault(); // Prevent default form submission
    alert("Form submitted");

    // Collect form data (you can also use $(this).serialize() to simplify)
    let email = $("#email").val();
    let fname = $("#fname").val();
    let oname = $("#oname").val();
    let phone = $("#phone").val();
    let country = $("#country").val();
    let password = $("#password").val(); // Don't forget this!

    $.ajax({
        url: "../../../../store/register",
        type: "post",
        data: {
            fname: fname,
            oname: oname,
            phone: phone,
            password: password,
            email: email,
        },
        dataType: 'text', // Or 'json' if you switch to JSON responses
        success: function (dt) {
            alert(dt);
            // Optional: Reset form or close modal on success
            $("#reg-form")[0].reset();
            $("#reg-modal").hide();
        },
        error: function(xhr, status, error) {
            // Add error handling to debug issues
            alert("AJAX Error: " + error + "\nStatus: " + status);
            console.log(xhr.responseText); // Log full response to console for debugging
        }
    });
});

4. Backend Improvements (Optional but Recommended) #

• Return JSON responses instead of plain text for better AJAX handling. For example:

  // Replace echo statements with JSON
  echo json_encode(["status" => "error", "message" => "Please enter a valid email"]);
  // And on success:
  echo json_encode(["status" => "success", "message" => "Registration successful"]);
  

  Then set dataType: 'json' in your AJAX call and handle the response as an object.
• Ensure no PHP warnings/errors are outputted (enable error logging instead of displaying errors) to avoid corrupting the AJAX response.

After fixing these issues, the AJAX submission should work without page freezes or unintended reloads.

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