Technical Implementation of Submitting Multiple HTML Forms with a Single Button

Problem Background and Challenges

In modern web applications, scenarios requiring simultaneous processing of multiple form submissions are common. For instance, when users complete an order, data needs to be saved to a database while redirecting to a payment page. Traditional HTML form submission mechanisms have limitations—when a user clicks the submit button, the browser navigates to the URL specified in the form's action attribute, preventing concurrent submission of multiple forms.

Limitations of Traditional Methods

Attempting to call the submit() method on multiple forms sequentially using JavaScript typically results in only the last submission being executed. This occurs because, within the same JavaScript execution context, browsers cancel previous requests and retain only the final one. This behavior is consistent across Chrome, IE9, and modern browsers.

JavaScript Asynchronous Submission Solutions

Basic Implementation Approach

By setting IDs or names for form elements, these forms can be easily referenced in JavaScript:

<input type="button" value="Submit All Forms" onclick="submitForms()" />

<script>
function submitForms() {
    document.getElementById("form1").submit();
    document.getElementById("form2").submit();
}
</script>

If forms use the name attribute instead of IDs, they can be accessed via the document.forms collection:

function submitForms() {
    document.forms["updateDB"].submit();
    document.forms["payPal"].submit();
}

Asynchronous Request Handling

To overcome the limitations of traditional methods, asynchronous request techniques are essential. XMLHttpRequest offers a reliable solution:

function submitBothForms() {
    var form = document.forms.updateDB;
    var postData = [];
    
    for (var i = 0; i < form.elements.length; i++) {
        var element = form.elements[i];
        if (element.name) {
            postData.push(encodeURIComponent(element.name) + "=" + 
                        encodeURIComponent(element.value));
        }
    }
    
    var xhr = new XMLHttpRequest();
    xhr.open("POST", form.action, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(postData.join("&"));
    
    document.forms.payPal.submit();
}

Modern Fetch API Implementation

Using the ES6+ Fetch API allows for more concise code implementation:

function submitBothForms() {
    const { updateDB, payPal } = document.forms;
    
    fetch(updateDB.action, {
        method: updateDB.method,
        headers: { "content-type": updateDB.enctype },
        body: new FormData(updateDB)
    });
    
    payPal.submit();
}

Error Handling and Sequential Control

In certain scenarios, it is necessary to ensure the first form submission succeeds before executing the second:

async function submitBothForms() {
    const { updateDB, payPal } = document.forms;
    
    try {
        const response = await fetch(updateDB.action, {
            method: updateDB.method,
            headers: { "content-type": updateDB.enctype },
            body: new FormData(updateDB)
        });
        
        if (!response.ok) {
            const error = new Error(`Database update failed! Status: ${response.status}`);
            const isJSON = response.headers.get("content-type") === "application/json";
            error.body = await (isJSON ? response.json() : response.text());
            throw error;
        }
        
        payPal.submit();
    } catch (error) {
        console.error("Form submission error:", error);
        // Handle error message display here
    }
}

Practical Application Scenarios

In real-world applications like referral systems, hidden forms can simplify the user interface. By setting appropriate field values, one form can be submitted automatically after another succeeds, reducing user interaction steps.

Performance Optimization Recommendations

To enhance user experience, consider the following:

• Use asynchronous requests to avoid page refreshes
• Implement appropriate loading state indicators
• Add form validation to ensure data integrity
• Consider single-form designs to reduce complexity

Browser Compatibility

The techniques discussed in this article are well-supported in modern browsers. For older browsers, it is advisable to use XMLHttpRequest as a fallback and provide appropriate degradation handling.