js点击按钮弹出表单,js点击添加按钮弹出对话框

http://www.itjxue.com  2023-01-20 06:08  来源:未知  点击次数: 

因为需要分页,所以一个页面有多个form,最后只有一个提交按钮,如何用js点击提交按钮提交所有fo

你好,多表单同时提交建议使用异步模式,或者使用iframe实现伪异步

我写了一个使用iframe提交的例子:

!DOCTYPE?html

html?lang="en"

head

????meta?charset="UTF-8"

????titleMultiple?Form?Submit/title

/head

body

????form?action="a.php"?target="J_ASubmit"

????????input?type="text"?name="a"?value="a"

????/form

????form?action="b.php"?target="J_BSubmit"

????????input?type="text"?name="b"?id=""?value="b"

????/form

????form?action="c.php"?target="J_CSubmit"

????????input?type="text"?name="c"?id=""?value="c"

????/form

????input?type="button"?value="提交所有表单"?id="J_Button"

script

(function(){

????var?btn?=?document.getElementById('J_Button'),

????????forms?=?document.getElementsByTagName('form');

????btn.onclick?=?function()?{

????????for?(var?i?=?forms.length?-?1;?forms[i];?i--)?{

????????????var?ifr?=?document.createElement('iframe');

????????????ifr.style.display?=?'none';

????????????ifr.id?=?forms[i].getAttribute('target');

????????????ifr.setAttribute('name',?forms[i].getAttribute('target'));

????????????document.body.appendChild(ifr);

????????????forms[i].submit();

????????}

????}

})();

/script

/body

/html

打开页面后,点击“提交所有表单”按钮,会同时提交三个表单,可以在控制台验证:

当然,这么简单的写肯定不行,实际使用至少还得增加iframe存在性验证,不然body中会append很多空的同名,且同id的iframe,这是不合理的。

希望是你想要的答案,望采纳~~

html里面,点击按钮时,怎么使用js或jq给iframe里面的表单赋值和提交

其实JQ是可以直接操作IFRAME里面的元素的

query取得iframe中元素的几种方法

在iframe子页面获取父页面元素

代码如下:

$('#objId', parent.document);

// 搞定...

在父页面 获取iframe子页面的元素

代码如下:

$("#objid",document.frames('iframename').document)

$(document.getElementById('iframeId').contentWindow.document.body).html()

显示iframe中body元素的内容。

$("#testId", document.frames("iframename").document).html();

根据iframename取得其中ID为"testId"元素

$(window.frames["iframeName"].document).find("#testId").html()

用JS或jQuery访问页面内的iframe,兼容IE/FF

注意:框架内的页面是不能跨域的!

假设有两个页面,在相同域下.

index.html 文件内含有一个iframe:

XML/HTML代码

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title页面首页/title

/head

body

iframe src="iframe.html" id="koyoz" height="0" width="0"/iframe

/body

/html

iframe.html 内容:

XML/HTML代码

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

titleiframe.html/title

/head

body

div id="test"/div

/body

/html

先绑定按钮的点击事件,然后再去操作iframe的表单元素。

但如果你只想模拟提交表单里面的元素,完全可以用PHP或者其他的语音模拟提交。

html5中如何通过点击按钮 自动填写表单

可以写一个为表单内元素赋值的方法,三个按钮上面添加点击事件,点击时调用这个赋值方法,但是传的参数不一样,在方法中根据不同的参数,为表单赋不同模板的值。

不知上面是否写的清楚,我写了一个对应的小demo:

html

head

titledemo/title

script?type="text/javascript"?src="jquery-1.8.3.js"/script

script?type="text/javascript"

function?demo(demo){

if(demo?==1){

$("#input1").attr("value","这是模板1");

$("#input2").attr("value",demo);

}?else?if(demo?==2){

$("#input1").attr("value","这是模板2");

$("#input2").attr("value",demo);

}?else?if(demo?==3){

$("#input1").attr("value","这是模板3");

$("#input2").attr("value",demo);

}

}

/script

/head

body

button?onclick="demo(1)"模板1/button

button?onclick="demo(2)"模板2/button

button?onclick="demo(3)"模板3/button

form

input?id="input1"?type="text"/

input?id="input2"?type="text"/

/form

/body

/html

以上,希望对你有帮助!

在form中,使用js动态生成input,提交表单通过ajax添加数据到数据库,无法触发ajax请求

最好贴全代码。我觉得这个问题很费解。我没有遇到过。不过我可以跟你说一下我的思路。

我一般不太愿意用js输出表单之后再提交。性能不太好,而且容易出问题。我都是建立一个position:fixed的隐藏层,需要弹出表单的时候,通过显示与隐藏,来显示表单。并且,可以再此基础上加入一个全屏的position:fixed的隐藏层,用以模式化窗口,设置透明度为30% 这样页面除了这个表单,其它的部分不可操作。可以一次性显示这两个层,关闭的时候,再隐藏这两个层。(登陆框的常见办法) 我的做法一般是这样的。

怎么用js提交表单

取得表单对象,然后让这个对象执行submit事件即可

比如,给表单加一个id属性,form id="form"

连接加一个点击事件:onclick="document.getElementById('form').submit()"

js表单提交后,如何获取表单中的数据并显示出来

表单是用form来填写,在提交前可以获取表单里面的数据。我这里用jquery实现。

html

body

????form?method='post'?action=''

????????label?for='inputText'inputText/label

????????input?type='text'?id='inputText'/

????????br/

????????label?for='checkBox1'checkBox1/label

????????input?type='checkbox'?id='checkBox1'/

????????br/

????????label?for='checkBox2'checkBox2/label

????????input?type='checkbox'?id='checkBox2'/

????????!--其他你想填写的表单选项--

????????input?type='button'?value='提交表单'?id='submitBtn'/

????/form

????script

????????$(document).ready(function()

????????{

????????????$('#submitBtn').click(function(e)

????????????{

????????????????/*一系列根据自己的意图判断输入框是否已输入内容并决定是否往下执行*/

????????????????

????????????????//获取表单的系列化数据。这会生成一个A=valueAB=valueB这种形式的字符串。

????????????????var?formData?=?$('form').serialize();

????????????????$.post('目标地址',formData,成功/失败回调函数);

????????????????e.preventDefault();

????????????});

????????????

????????});

????/script

/body

/html

(责任编辑:IT教学网)

更多

推荐站内动态文章