• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / Post a form to a popup window with Javascript and jQuery

Post a form to a popup window with Javascript and jQuery

I recently needed to post an HTML form into a popup window instead of targeted to the current document or an existing window. The Javascript for doing this is very simple and in this post I show how to post the form into a popup window with regular Javascript and then with jQuery.

With regular Javascript

The Javascript window.open function normally takes a URL as the first parameter, but it can be left blank to open an empty window. The second parameter is the popup window’s name and it can be used to target the form into that window.

Using regular Javascript, assign an onsubmit event handler to the form to call a function which pops open a new window when the form is submitted and targets the form to that window. This is illustrated by the example HTML and Javascript code below.

HTML:

<form action="..." method="post" onsubmit="target_popup(this)">
<!-- form fields etc here -->
</form>

Javascript:

function target_popup(form) {
    window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
    form.target = 'formpopup';
}

With jQuery

The method for opening and targeting the popup window is the same as with the regular Javascript method, but the onsubmit code can be removed from the HTML code and added dynamically after the page has loaded. This keeps the HTML much cleaner.

The HTML form is the same as above, but no longer has a onsubmit handler and has an "id" property so it can be targeted easily by jQuery.

HTML:

<form id="myform" action="..." method="post">
<!-- form fields etc here -->
</form>

Javascript:

$(document).ready(function() {
    $('#myform').submit(function() {
        window.open('', 'formpopup', 'width=400,height=400,resizeable,scrollbars');
        this.target = 'formpopup';
    });
});

Check Out These Related posts:

  1. ExpressVPN vs. IPVanish – Which is Better?
  2. Write content into a dynamic Javascript popup from FCKEditor
  3. Opening a new window with Javascript
  4. Javascript: reference the parent window from a popup

Filed Under: Javascript

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap