Make html form to not open a new window every time form gets submitted

Recently I got this scenario and researched a lot to find the hack/solution.

Solution - If you can put a window names and refer same every time, then browser will make sure to open new tab if not opened already, otherwise it will just refresh the window.

Example snippet: demo here

    <form id="myForm" action="<URL>" method="POST" target="_blank" onsubmit="target_popup(this)">
        First name: <input type="text" name="fname"/><br/>
        Last name: <input type="text" name="lname"/><br/>
        <button type="submit" id="btnTest"> Submit</button>
    </form>


    <script>
    var target_popup = function(form) {
        window.open('',//URL should be blank so that it will take form attributes.
                    'UniqueWindowName', //window name
                    'width=400,height=400,resizeable,scrollbars');
        form.target = 'UniqueWindowName';
    }
    </script>


Another way of  posting a form is via javascript itself. When form is posted using form.submit() function, then onsubmit event will not fire ( as per javascript documentation ). Hence we have to tweak the hack a little bit to achieve the same behavior. Code snippet given below:

function test(windowName){
    var form = document.createElement("form");
        var element1 = document.createElement("input");
        var element2 = document.createElement("input");
     
        form.method = "POST";
        form.action = "{!URLFOR($Page.formPost2)}";
        var win = window.open('', windowName, 'width=400,height=400,resizeable,scrollbars');
        form.target = windowName;
        form.id="testForm"+windowName;
        //form.onsubmit = target_popup2;
     
        element1.value= Math.random();
        element1.name="fname";
        element1.type="text";
        form.appendChild(element1);
     
        element2.value=Math.random();
        element2.name="lname";
        element2.type="text";
        form.appendChild(element2);
             
        document.body.appendChild(form);
     
        form.submit();
        win.focus();     
    }

Comments