28427

How to create HTML Form in a new window

I have the following function:

// open a new window. Create and submit form function createSubmitForm(response) { var external = window.open('about:blank', 'external'); var doc = external.document; var body = $('body', doc); // create a new form element var form = $("<form id='authForm'></form>"); // set the form's attributes and add to iframe form.attr("action", response.action) .attr("method", response.method); form.appendTo(body); // create form elements; for (var i = 0, len = response.fields.length; i < len; i++) { var field = response.fields[i]; if (field.name != "") { $("<input type='hidden'/>") .attr("name", field.name) .attr("value", field.value) .appendTo(form); } } // submit the form form.submit(); }

When I try to execute it, I get an <strong>"Unspecified Error"</strong> at form.appendTo(body).

What could I be doing wrong here?

Answer1:

Try this: Please notice that You must have a blank page on Your server http://localhost/some-blank-page-on-your-server.php

<!DOCTYPE html> <html> <head> <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <meta charset=utf-8 /> <title>JS Bin</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; } </style> </head> <body> </body> <script> (function($) { $(function() { // open a new window. Create and submit form function createSubmitForm(response) { var external = window.open('http://localhost/some-blank-page-on-your-server.php', 'external'); setTimeout(function() { var doc = external.document; var body = $('body', doc); // create a new form element var form = $("<form id='authForm'></form>"); // set the form's attributes and add to iframe form.attr("action", response.action) .attr("method", response.method); // create form elements; for (var i = 0, len = response.fields.length; i < len; i++) { var field = response.fields[i]; if ( field.name !== "" ) { $("<input type='text'/>") .attr("name", field.name) .attr("value", field.value) .appendTo(form); } $("<input type='submit' value='submit' />").appendTo(form); } // submit the form form.submit(); body.append(form); }, 1000); } createSubmitForm({ action: 'http://www.example.com', method: 'get', fields: [{ name: 'field1', value: 'some value' }] }); }); })(jQuery); </script> </html>

Answer2:

Use document.write when you want to write in a new window. The way you are doing will not work in all the browsers.

Answer3:

try using jquery to define the form when appending

$(form).appendTo(body);

Answer4:

i think a simpler approach is to use jquery UI dialog

Answer5:

I would throw an alert(form) just before the appendTo just to see what the page thinks the form variable is at that point.

Another option to help pinpoint the issue would be loading firebug in firefox and use this to debug the problem. As a quick test I would get rid of the camelcase though since I've had instances before where even though it is supposed to be camelcase it only works when it is all lower case. Usually this is in IE. silly, but it is a quick check.

Recommend

  • Why does the official JVM documentation contradict its implementation in addShutdownHook?
  • Issue loading 'dplyr' packages
  • Base Internationalization and “Could not find a storyboard named […]”
  • UITableView takes much longer to load when numberOfRows returns a large number
  • Security issues with PHP's Readfile method
  • onBackPressed() not being executed
  • Meteor: Do Something On Email Verification Confirmation
  • How can I send an e-mail from a vbs script
  • Sails.js/waterline: Executing waterline queries in toJSON function of a model?
  • Can Jackson SerializationFeature be overridden per field or class?
  • Resize panoramic image to fixed size
  • AES padding and writing the ciphertext to a disk file
  • Volusion's generic SQL folder, functionality
  • Where to put my custom functions in Wordpress?
  • htaccess rewriting URLs with multiple forward slashes
  • How can I use Kendo UI with Razor?
  • Javascript + PHP Encryption with pidCrypt
  • Display Images one by one with next and previous functionality
  • Web-crawler for facebook in python
  • Delete MySQLi record without showing the id in the URL
  • Apache 2.4 - remove | delete | uninstall
  • RestKit - RKRequestDelegate does not exist
  • bootstrap to use multiple ng-app
  • retrieve vertices with no linked edge in arangodb
  • How to get icons for entities from eclipse?
  • A cron job substitute?
  • WPF Applying a trigger on binding failure
  • Hits per day in Google Big Query
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • How do you join a server to an Active Directory (domain)?
  • coudnt use logback because of log4j
  • how does django model after text[] in postgresql [duplicate]
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • Turn off referential integrity in Derby? is it possible?
  • Linking SubReports Without LinkChild/LinkMaster
  • apache spark aggregate function using min value
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • JaxB to read class hierarchy
  • Programmatically clearing map cache