Reputation:
I have a submit form and want it to open a new window when users submits the form so i can track it on analytics.
Here is the code I'm using:
<form action="http://URL at mailchimp subscriber URL.com" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" onclick=window.open(google.html,'','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');>
<label for="name">Your Name</label><input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
<br/>
<br/>
<label for="email">Your Email </label><input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL">
<br/>
<br/>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="submit">
</form>
</div>
Upvotes: 172
Views: 380106
Reputation: 151
Thumbs up to @Awerealis for an authentic, php popup window solution.
But after getting the popup window and using it to insert data into my database, I ran into the further problem of having the results page of the db entry fill up the popup window. I wanted the popup window to go away and have the original (parent) page refresh with the new data.
I achieved that with the following:
On the parent page (from which the popup window is issued), I added this code to the <head> element:
<script>
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
window.close();
}
</script>
At the end of the popup (child) window, I added:
<script type="text/javascript">
window.close();
</script>
Upon returning to the parent page, the new data is displayed giving altogether the feeling of an ajax call from the popup window which is what I was looking for.
Hope this helps someone.
Upvotes: 0
Reputation: 299
i believe this jquery work for you well please check a code below.
this will make your submit action works and open a link in new tab whether you want to open action url again or a new link
jQuery('form').on('submit',function(e){
setTimeout(function () { window.open('https://www.google.com','_blank');}, 1000);});})
This code works for me perfect..
Upvotes: -2
Reputation: 612
In a web-based database application that uses a pop-up window to display print-outs of database data, this worked well enough for our needs (tested in Chrome 48):
<form method="post"
target="print_popup"
action="/myFormProcessorInNewWindow.aspx"
onsubmit="window.open('about:blank','print_popup','width=1000,height=800');">
The trick is to match the target
attribute on the <form>
tag with the second argument in the window.open
call in the onsubmit
handler.
Upvotes: 47
Reputation: 701
For a similar effect to form's target
attribute, you can also use the formtarget
attribute of input[type="submit]"
or button[type="submit"]
.
From MDN:
...this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the elements's form owner. The following keywords have special meanings:
- _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
- _blank: Load the response into a new unnamed browsing context.
- _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
- _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
Upvotes: 14
Reputation: 13727
No need for Javascript, you just have to add a target="_blank"
attribute in your form tag.
<form target="_blank" action="http://example.com"
method="post" id="mc-embedded-subscribe-form"
name="mc-embedded-subscribe-form" class="validate"
>
Upvotes: 340
Reputation: 362
I generally use a small jQuery snippet globally to open any external links in a new tab / window. I've added the selector for a form for my own site and it works fine so far:
// URL target
$('a[href*="//"]:not([href*="'+ location.hostname +'"]),form[action*="//"]:not([href*="'+ location.hostname +'"]').attr('target','_blank');
Upvotes: 2
Reputation: 46485
window.open
doesn't work across all browsers, Google it and you will find a way of detecting the correct dialog type.
Also, move the onclick call to the input button for it to only fire when the user submits.
Upvotes: -4
Reputation: 1615
The code you have given, needs to be corrected. In form tag you have to enclosed the onClick attribute value in double quote:
"window.open('google.htm','','scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');"
You also need to take care that first parameter of window.open
should also be enclosed using quotes.
Upvotes: 4
Reputation: 25951
onclick
may not be the best event to attach that action to. Anytime anyone clicks anywhere in the form, it will open the window.
<form action="..." ...
onsubmit="window.open('google.html', '_blank', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');return true;">
Upvotes: 9