sTr8_Struggin
sTr8_Struggin

Reputation: 675

How to Make a form not open a new window when it submits a url action?

I have a form that submits a url action. However I don't want it to open up a new window with the url when it is submitted. How should I avoid this?

<form name="leds" id="ledSend" method="get" target="_blank" action="https://agent.electricimp.com/Fk43xPMkSrWF">
Lamp Control: <input type="radio" name="led" value="0" checked>Off
            <input type="radio" name="led" value="1">On<br>
How long should the Lights stay on? <input type="text" name="timer" value="10">seconds<br>
Your name? For Our Records <input id="name" type="text" name="user" placeholder="Your name here">       <br>
<input type="submit" value="Update!" onclick="alert(theInput.value)"/>
<script>

var theInput = document.getElementById("name");

I don't want this form to change windows to

https://agent.electricinp.com

When it is submitted. How would I avoid this so that the user stays on the original page where they submit the form form.

Upvotes: 1

Views: 3417

Answers (2)

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 JSfiddle 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>

Please refer my blog for more details

Upvotes: 0

John Conde
John Conde

Reputation: 219884

Get rid of target="_blank"

<form name="leds" id="ledSend" method="get" action="">

Upvotes: 1

Related Questions