1.   阿里云服务器1888元代金券领取
  2.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

JQuery动态创建表单并提交,动态创建form表单并ajax提交form表单,教程案例。

小川 技术文章

在日常开发中,有时候在写web 应用的时候,需要临时动态构造一个form并提交。


动态创建form表单的方法:

/**
 *  动态创建From表单
 *  @author xiaochuan
 *  @date 2016年03月26日
 */
function createForm(){
    // 取得要提交页面的URL地址 
    var url = "{:url('add')}";
    // 取得要提交的参数  
    var val_id = $("#inputId").val();
    var val_name = $("#inputName").val(); 
    
    // 创建Form 
    var form = $('<form></form>');      
    form.attr('action', action);        // 设置Form表单的action属性
    form.attr('method', 'post');        // 设置Form表单的method属性
    form.attr('target', '_self');       // 设置Form表单的target属性

    // 创建input 
    var input_id = $('<input type="text" name="id" />');
    input_id.attr('value', val_id);     // 设置input的value属性
    var input_name = $('<input type="text" name="name" />');
    input_name.attr('value', val_name); // 设置input的value属性

    // 把input添加到表单中 
    form.append(input_id);
    form.append(input_name);
    // 把表单添加到document.body中(不然在谷歌浏览器中会报错)
    $(document.body).append(form);

    // 提交表单(当然也可以通过AJAX来提交了,只要你喜欢)
    form.submit();
    return false;
}

如果不加上:$(document.body).append(form);


问题:

那么在 chrom 下 控制台 里输出了 Form submission canceled because the form is not connected 异常。


原因:

HTML标准规定如果form表单没有被添加到document里,那么form表单提交将会被终止。

在Chrome56之前的版本是不符合标准的,Chrome56修复了这个问题,让form表单提交符合标准要求。不加的话会报异常。


解决:

就是把form表单添加到document后再提交。

$(document.body).append(form);




 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
升级为VIP会员,有效期内免费下载本站所有VIP源码  点击升级为VIP

转载请注明来源地址:小川编程 » http://www.youhutong.com/index.php/article/index/197.html

郑重声明:
1、本站源码仅供个人学习研究和交流使用,请于下载后二十四小时内删除
2、本站大多资源来源于高价购买、互联网、会员分享,仅供学习交流使用,本站不提供任何技术支持
3、如侵犯到任何版权问题,请立即告知本站,本站将及时删除并致以最深的歉意
4、如有侵犯您的版权,请提交软件证书、图片地址、源码链接和联系方式到Email:youhutong@youhutong.com

( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情