Cross-Browser Solution for Form Submission and Popup Closure

Problem Background and Original Approach Analysis

In web development, popups are commonly used for independent tasks such as form submission. User requirements typically include: clicking a button to open a popup containing a form, and automatically closing the popup after submission to return to the original page. The original approach uses the HTML form's onsubmit attribute to call a JavaScript function closeSelf(), which executes self.close() and returns true to allow form submission. However, this approach fails in Firefox: the popup closes but the form is not submitted, while it works fine in IE8 and Chrome. This stems from browser differences in handling the order of window.close() and form submission events, with Firefox potentially interrupting the process due to security policies or event bubbling mechanisms.

Core Solution: Manual Form Submission

Based on the best answer (score 10.0), the improved solution changes the submit button from type="submit" to type="button" and calls the JavaScript function closeSelf() via the onclick event. In the function, document.forms['certform'].submit() is first used to manually submit the form, followed by window.close() to close the popup. This ensures form data is sent to the server before closing, avoiding compatibility issues in Firefox. Example code:

<form action="/system/wpacert" method="post" enctype="multipart/form-data" name="certform">
    <div>Certificate 1: <input type="file" name="cert1"/></div>
    <div>Certificate 2: <input type="file" name="cert2"/></div>
    <div>Certificate 3: <input type="file" name="cert3"/></div>
    <div><input type="button" value="Upload" onclick="closeSelf();"/></div>
</form>
<script type="text/javascript">
function closeSelf(){
    // Add form validation logic here if needed
    if(/* conditions met */){
        alert("Form validation passed, submitting...");
        document.forms['certform'].submit();
        window.close();
    } else {
        alert("Please check form inputs");
    }
}
</script>

The key to this method is separating form submission from window closure, controlling the execution order programmatically. It is compatible with major browsers including IE, Chrome, and Firefox, and allows for validation logic before submission to enhance user experience.

Alternative Approaches: onsubmit Event and AJAX Asynchronous Handling

Referencing other answers (scores 5.0 and 2.5), developers can consider alternative solutions. One method uses the onsubmit event, passing the form object as a parameter: <form onsubmit="return closeSelf(this);">, and calling f.submit() and window.close() in the function. This maintains semantic clarity but may still be affected by browser event handling differences.

Another advanced approach is using AJAX asynchronous form submission, such as via the jQuery Form plugin. This allows sending data without page refresh and closing the popup upon successful server response, preventing premature closure due to network delays. Example code:

<form action="/system/wpacert" method="post" enctype="multipart/form-data" id="certform">
    <div>Certificate 1: <input type="file" name="cert1"/></div>
    <div>Certificate 2: <input type="file" name="cert2"/></div>
    <div>Certificate 3: <input type="file" name="cert3"/></div>
    <div><input type="submit" value="Upload"/></div>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://malsup.github.io/jquery.form.js"></script>
<script>
$(document).ready(function() {
    $('#certform').ajaxForm(function() {
        window.close();
    });
});
</script>

The AJAX approach improves interaction fluidity but requires additional library loading and handling of cross-origin and error cases. Developers should weigh simplicity, compatibility, and user experience based on project needs.

Conclusion and Best Practices

For cross-browser implementation of popup form submission and closure, the core is ensuring form submission precedes window closure. The manual submission method from the best answer is simple, effective, and highly compatible, recommended for most scenarios. For complex applications, consider AJAX solutions to enhance user experience. In development, always test across different browsers and follow web standards, such as providing clear size and name parameters when using window.open() to open popups. By understanding browser event mechanisms and DOM manipulation, developers can build more robust web applications.