Implementing POST Form Submission with Result Display in New Window Using JavaScript

Introduction

In modern web development, form submission is a common user interaction scenario. Traditional form submissions cause page navigation, but in certain application contexts, developers prefer to maintain the current page state while displaying submission results in new windows. Based on technical discussions from Stack Overflow, this article provides a thorough analysis of implementing dynamic POST form creation with result display in new windows using JavaScript.

Fundamental Principles of Form Submission

HTML forms use the method attribute to define submission type and the action attribute to specify the processing URL. When users submit a form, the browser sends a request to the specified URL based on the method attribute. By default, response results display in the current window, which may cause users to leave the original page.

Core Implementation Solution

Setting the form's target attribute to "_blank" enables displaying submission results in new windows or tabs. This represents the simplest and most direct solution, offering good compatibility and straightforward implementation.

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");
form.setAttribute("target", "_blank");

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);

document.body.appendChild(form);
form.submit();

Advanced Window Control Solution

Beyond using the "_blank" target, developers can achieve more precise control through named windows and custom window features. This approach allows specification of window names and custom window parameters.

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");
form.setAttribute("target", "formresult");

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);

document.body.appendChild(form);

window.open('', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');
form.submit();

Technical Detail Analysis

In the first solution, when the target attribute is set to "_blank", the browser automatically opens results in new windows or tabs, with specific behavior depending on user browser settings. This method is simple and reliable but doesn't allow control over specific window features.

The second solution, by pre-creating named windows with specific parameters, enables precise control over window dimensions, toolbars, menu bars, and other features. The window name "formresult" corresponds with the form's target attribute, ensuring submission results display in the designated window.

User Experience Considerations

According to discussions in reference articles, displaying form results in new windows helps maintain user context on the current page. Particularly in popup form or embedded form scenarios, this design prevents users from losing their navigation path.

In practical applications, combining user feedback mechanisms is recommended. For example, after form submission, display success messages on the current page while showing detailed results or download content in new windows. This design provides immediate feedback while maintaining page continuity.

Code Implementation Considerations

When dynamically creating form elements, forms must be added to the DOM tree for proper submission. Although some browsers might allow submission of forms not added to DOM, for compatibility, always use document.body.appendChild(form) or similar methods.

Hidden field creation should explicitly set type to "hidden". While modern browsers might infer types, explicit declaration improves code readability and reliability.

Browser Compatibility

Both solutions discussed in this article enjoy good support in modern browsers. The target attribute is part of HTML standards, and the window.open() method is standard JavaScript functionality. However, on mobile devices, new window behavior might be restricted by browser policies.

Conclusion

By properly configuring form target attributes and combining window.open() methods, developers can flexibly control how form submission results display. Choice between solutions depends on specific requirements: use target="_blank" for simple new window display; use the named window approach for precise window feature control.

In actual development, consider user experience and accessibility factors to ensure new window usage doesn't confuse users. Through techniques introduced in this article, developers can provide users with more friendly and efficient form interaction experiences.