首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

(如何)我可以在新窗口中打开表单提交的结果吗?

在新窗口中打开表单提交的结果,可以通过使用JavaScript和HTML实现。以下是一个简单的示例:

  1. 在HTML中创建一个表单,并添加一个按钮,当点击按钮时,调用一个JavaScript函数。
代码语言:html
复制
<form id="myForm">
 <input type="text" name="username" placeholder="Username">
 <input type="password" name="password" placeholder="Password">
 <button type="button" onclick="submitForm()">Submit</button>
</form>
  1. 在JavaScript中编写一个函数,该函数将在新窗口中打开表单提交的结果。
代码语言:javascript
复制
function submitForm() {
  // 获取表单元素
  const form = document.getElementById('myForm');

  // 创建一个新的表单,并将原表单的数据复制到新表单
  const newForm = document.createElement('form');
  newForm.setAttribute('method', 'POST');
  newForm.setAttribute('action', 'https://your-server-url.com/submit');
  newForm.innerHTML = form.innerHTML;

  // 添加一个隐藏的iframe,用于提交表单并在新窗口中打开结果
  const iframe = document.createElement('iframe');
  iframe.setAttribute('name', 'resultFrame');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);

  // 设置表单的target属性为iframe的name属性
  newForm.setAttribute('target', 'resultFrame');

  // 将新表单添加到文档中,并提交表单
  document.body.appendChild(newForm);
  newForm.submit();

  // 删除新表单和iframe
  document.body.removeChild(newForm);
  document.body.removeChild(iframe);
}

在这个示例中,当用户点击“提交”按钮时,将在新窗口中打开表单提交的结果。请注意,您需要将https://your-server-url.com/submit替换为您的服务器URL,以便将表单数据发送到正确的位置。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

js控制浏览器新开窗打开页面

2016-07-18 09:07:01 a标签有一个属性为target,将其值设置为“_blank“,即可新开一个窗口打开页面,那么通过js也可以控制打开窗口来开启页面。...我们都知道form表单提交可以刷新页面,同时如果给form表单设置一个target同样也可以达到a标签效果 form.target="_blank"; form.action="aaa.aspx";...form.submit(); 如上代码,页面设置一个隐藏form表单,只不过里面不放置任何东西,提交表单几个跳转到一个新页面,同时是用一个新窗口打开。...都是使用jswindow.open有一个缺点就是容易被浏览器屏蔽。本文介绍了js打开新窗口各种方法。...,下面来说一下如何避开浏览器拦截打开一个新页面的方式 var newTab=window.open('about:blank'); newTab.location.href ="https://www.oecom.cn

6.6K20
  • 交互设计规范

    2.新窗口链接规范 用于规定页面链接是采用新窗口打开还是本窗口打开规则。 3.图片规范 用于规定图片信息是否带有alt title值,这些值又取自那里。...a.表单提交表单提交步骤,每个表单要求需要给出提示信息。(如密码要多少多少位。搜索框鼓励输入什么内容。) b.谨慎类操作 一个操作对用户来说需要慎重操作。如扣除金币等。需要预先提示。...(如评论字数为0或超过限制字数,搜索框未输入内容时提交) 3、结果信息提示 交互进行后给出结果反馈是应该给出适当提示 a.查询类结果 任何信息列表、查询结果,当对应信息无结果时候需要给出有无结果状态提示...b.保存类结果 一个表单是用户提交保存数据。如设置个人资料。提交保存后需要给出提示。成功绿色、失败红色、普通灰色。 c.附加类结果 一个表单是对其他数据进行附加,如评论等。...提交成功后应直接跳转到操作产生结果展示部分。

    97521

    JSP 防止网页刷新重复提交数据

    网页如何防止刷新重复提交如何防止后退解决方法 提交后禁用提交按钮(大部分人都是这样做) 如果客户提交后,按F5刷新怎么办?..."),然后用JS来提交表单,完成后window.close(); 简单说,就是提交表单时候弹出新窗口,关闭本窗口。...后来,看到竟然有那么多的人想要禁用这个后退按钮,也就释然(想要禁用只有后退按钮,不包括浏览器前进按钮)。因为默认情况下,用户提交表单之后可以通过后退按钮返回表单页面(而不是使用“编辑”按钮!)...一种更安全但相当恼人方法是,当表单提交打开一个新窗口,与此同时关闭表单所在窗口。但我觉得这种方法不值得认真考虑,因为我们总不能让用户每提交一个表单打开一个新窗口。      ...,是分步提交中一个人简历,写完第一个页面后跳到第二个页面,为了防止用户用后退返回到第一个页面,再重新提交第一个页面,是当用户提交第一次提交第一个页面时,把插入数据库记录自增长id号放到session

    11.5K20

    新窗口创建问题 | Electron 安全

    ,突然在当前窗口之外跳出来一个窗口,那就是一个新窗口创建了 Electron ,一个新窗口创建背后都意味着存在对应管理操作,这种管理可能可以让窗口赋予非凡权限,例如执行 Node.js 创建新窗口分为两种...a 标签和form标签,当 a标签 target 属性被设置为 _blank 时,点击标签会创建新窗口 当 form 标签渲染表达被提交时,也会打开新窗口 除此之外 alert 等创建弹窗就不在讨论范畴了...该属性指定在何处显示链接 URL,作为浏览上下文名称(标签、窗口或 iframe) 其实就是,在当前页面点击了一个 a 标签,标签 href 指向是百度地址,你想在哪里看到点击后结果,是当前页面呢...还是顶级导航页面,还是干脆新打开一个标签/窗口来展示 _self:当前页面加载。(a标签默认) _blank:通常在新标签页打开,但用户可以通过配置选择新窗口打开。...,如果此时,子窗口使用 window.opener 对象 open 方法再打开一个与父窗口同源新窗口,并且获取新窗口对象,用这个对象与父窗口进行通信,会不会就可以获取到父窗口上下文了呢?

    42110

    网页上收集信息如何发送?

    网页上收集用户信息完成后,都需要发送到服务器上存储起来,存储是后台事,但是我们需要负责发送,是如何发送消息呢? form标签属性及意义: action属性 定义表单提交地址,需要后台提供。...安全性:get传输数据暴露在url,post不会显示,有效保护用户信息,安全性高一些。 target属性 规定提交表单后何处显示收到响应。...具体属性值及意义: _blank 响应显示新窗口选项 _self 响应显示在当前窗口 _parent 响应显示父框架 _top响应显示在窗口整个框架 framename 响应显示命名iframe...框架 autocomplete属性 规定表单是否打开自动填写(用户之前输入)值,如果打开添加 autocomplete="on"。...novalidate属性 属性值是布尔值规定提交时是否验证表单数据。布尔值就是一个非真即假数据,不懂得可忽略,我们后边数据类型细讲。

    79950

    网页上收集信息如何发送?

    网页上收集用户信息完成后,都需要发送到服务器上存储起来,存储是后台事,但是我们需要负责发送,是如何发送消息呢? form标签属性及意义: action属性 定义表单提交地址,需要后台提供。...安全性:get传输数据暴露在url,post不会显示,有效保护用户信息,安全性高一些。 target属性 规定提交表单后何处显示收到响应。...具体属性值及意义: _blank 响应显示新窗口选项 _self 响应显示在当前窗口 _parent 响应显示父框架 _top响应显示在窗口整个框架 framename 响应显示命名iframe...框架 autocomplete属性 规定表单是否打开自动填写(用户之前输入)值,如果打开添加 autocomplete="on"。...novalidate属性 属性值是布尔值规定提交时是否验证表单数据。布尔值就是一个非真即假数据,不懂得可忽略,我们后边数据类型细讲。

    91120

    【前端就业课 第一阶段】HTML5 零基础到实战(八)表单详解

    注意:手机(APP)打开,内容显示更佳,不会私聊博主即可 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)拉到最下面(PC端Web打开)加博主即可,目录也最下面。...这样就可以通过你给name 值区分你这个表单提交是什么了;像在如上示例,给予了一个 register 作为名称,那么就知道这个表单信息是用于注册。...其中 from 表单可以添加一个 target 属性,点击提交按钮后可以选择新窗口打开还是当前页面打开,这个前几节已经讲过,在此就不再进行赘述了。 小媛:好,明白了。...1_bit:对,还有一个需要注意,input 标签 name 建议一定要给予,当你在这个 input 标签所显示页面的输入框输入内容后,点击提交内容进入后台时,需要通过你输入name 值进行值判断...1_bit:是的,这是页面显示情况。 小媛:但是发现点击右下角可以拖动这个多行文本框耶。 1_bit:这个你可以使用一个样式,就可以禁止拖动了。

    38730

    Chrome下打开新窗口

    > 4、form表单提交,同样target也必须设为_blank 现在遇到一个需求: 做了一个后台运维管理系统,点击datagrid头部一个按钮,需要打开一个新窗口...因为extjs运行效率比较低,所以选择使用chrome访问系统,而在操作些按钮时候发现很多很奇特现象,这些现象只出现在chrome: 1、打开一个窗口后,些窗口不关闭,将无法打开多个窗口,即使原有窗口关闭...打开窗口方式:window.open、form提交、iframe--表现上一致 2、页面中原本就有一个form,每次操作就修改里面一个参数,设置其值为随机数,亦不行 改用window.open还发现一个问题...,就是弹出窗口是没有工具栏和地址栏,且不在新选项卡打开 后来搜索到一篇文章,有所启发,就有了如下代码: var nwin = window.open(); nwin.location = ‘xxxx...’;//需要打开地址 如果使用ajax请求地址后面的参数的话,需要将ajax改为同步,不然弹出窗口会在新窗口打开,而且没有工具栏和地址栏

    3.6K30

    html+css学习笔记011-表单

    给公司工作计划造成了极大困扰 并不是责备他们 而是从他们身上 看到了以前那任性和不负责任自己 原来当初那些自以为小小无所谓举动 会给亲人、朋友和同事带来那么大麻烦 只是他们选择了宽容 /*内部样式表*/ form表单属性 action:' '; 定义数据提交地址 target:' '; 页面打开方式 _block...新窗口打开 _self 原窗口打开 method:' '; 数据提交方式 get 提交表单方式(明) post 提交表单方式(暗) form表单控件 type:' '; 控件类型...图片按钮,提交数据 submit; 提交按钮 reset; 重置按钮 file; 文件上传 hidden; 隐藏表单,悄悄提交数据 name:' '; 控件名称 value:' '; 神奇用法...摸索...'/> 提交按钮: 重置按钮: 上传文件:<input type

    81130

    HTML基础知识普及

    target=blank新窗口打开 img[src, alt] alt:alternative替代资源,一般为文字 table td[colspan, rowspan] 单元行 需要占用多行/多列,...用于单选框 复选框 如何理解HTML 描述网页内容各个部分之间 结构关系 H5新增内容 新区块标签 section article nav aside 表单增强 input新增类型:日期,时间,搜索...(content model): Flow: 文档流 有一些影响元素(大部分可见元素 都属于flow元素) Metadata:表示信息元素,有一些metadata不在flow,htmlhead...* 直接提交表单(直接用get/post方式 进行表单提交),必须有form * 表单和submit/reset配合,submit可以提交表单 reset可以重置表单 * 使用form...可以使 浏览器记录下 表单数据 * 第三方库 可以整体提取值 jqueryserialize 可以表单值 * 第三方库 在有form时,才能进行表单验证

    1.1K20

    免费表单模板库推荐

    劳动合同模板 百种免费模板自取链接 —ONLYOFFICE表单可以可以免费使用?...—可不可以下载表单并保存在本地使用它们创建文件?需要注册可以使用ONLYOFFICE Docs在线编辑器或者ONLYOFFICE桌面编辑器来填写并自己创建表单。...不需要注册,ONLYOFFICE将您所选择表单新窗口打开,可立即填写。为什么要制作模板 表单等?有什么作用?...第一步打开ONLYOFFICE官网或者点击第二步搜索栏输入自己需要模板表单内容,快速搜索 第三步创建自己表单,或者点击填写选项,进入表单在线填写。...填写完成之后,点击“download"按钮,下载你结果ONLYOFFICE为广大在线办公人群提供了各种各样模板 表单 例如有会议记录商业计划书夫妻财产协议广告设计制作服务合同房屋租赁协议房产抵押借款合同工作证明工作日报

    2.5K20

    C#页面之间跳转功能小结

    使用这种方法步骤如下: 1,使用控件创建web表单(form) 2,创建可以返回表单按钮和链接按钮 3,在按钮或链接按钮单击事件里创建一个保存URL字符变量 4,保存URL里添加QueryString...:   源页面代码:  使用Session变量   使用Session变量是可以页面间传递值另一种方式,本例我们把控件值存在Session变量,然后另一个页面中使用它,以不同页面间实现值传递目的...使用这种方法整个过程如下: 1,页面里添加必要控件 2,创建返回值Get属性过程 3,创建可以返回表单按钮和链接按钮 4,在按钮单击事件处理程序调用Server.Transfer方法转移到指定页面...但是可以通过设置 form 元素 target 属性,还是有办法打开新窗口。下面就是可以采用两种方法。 方法一:服务器端设置 target 属性,这个方法也非常适用于客户端不支持脚本情况。...Tab " /> 上面两种方法 target 属性可以采用任何合法名称,但要注意,如果相同名称窗口已经打开,则新窗口会在已经存在名称窗口里打开

    4K10

    DOM 和 BOM

    任何方式提交表单之前自动触发 form.onsubmit 常用于提交之前,验证所有表单元素内容 (7). 让 elem 获得焦点 elem.focus() (8)....新窗口打开,可打开多个 ①. html: ②. js: open("url","_blank") (4)....新窗口打开,只能打开一个 ①. html: ②. js: open("url","name 值") 内存每个窗口都有一个唯一...name 属性来标示一个窗口,浏览器规定,相同 name属性窗口只能打开一个,其实 html target 属性就是设置新窗口 name 属性值,如果 target 中使用自定义窗口名,则只能打开一个..._blank: 意为不指定窗口名,浏览器会随机生成不同窗口名,每次打开新窗口都随机生成不同 name 并且可打开任意多个 15. 定时器(2 种) (1).

    2.2K10

    02_JavaScript学习笔记整理-BOM浏览器对象模型

    document对象常用方法: write():页面输出文本。 writeln():页面输出文本,并自动换行(多一个换行符,看不出来)。...访问表单方式 document.forms[索引]:获取当前页面第几个表单(索引从0开始). document.表单名称: document.getElementById(“表单或者其他元素id...; 是否需要去 打开新窗口/关闭窗口 window.open()方法:打开一个新窗口 调用示例:...W3C规范浏览器(非IE):close方法只能关闭open方法打开窗口....timer)函数,清除由setInterval指定定时器; 电子时钟: 设置一个定时器时候,他会有一个返回值.通过这个返回值,可以设置取消定时器从而取消定时器.

    54410

    HTML5快速设计网页

    意思是超文本引用 target:用于指定链接页面的打开方式,其取值有self和blank两种,其中self为默认值,blank为新窗口打开方式 (6)、无序列表:无序列表各个列表项之间没有顺序级别之分... 我们网页, 我们也需要跟用户进行交互,收集用户资料,此时也需要表单HTML,一个完整表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。...表单域: 他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序url地址,以及数据提交到服务器方法。如果不定义表单域,表单数据就无法传送到后台服务器。...标签被用于定义表单域,即创建一个表单,以实现用户信息收集和传递,form所有内容都会被提交给服务器。...method 用于设置表单数据提交方式,其取值为get或post。 name 用于指定表单名称,以区分同一个页面多个表单。 注意: 每个表单都应该有自己表单域。

    2.3K20
    领券