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 "Unspecified Error" at form.appendTo(body).
What could I be doing wrong here?
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>
Use document.write when you want to write in a new window. The way you are doing will not work in all the browsers.
try using jquery to define the form when appending
$(form).appendTo(body);
i think a simpler approach is to use jquery UI dialog
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.
加载中,请稍侯......
精彩评论