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

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

小川 技术文章
郑重声明:
  本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,否则后果请用户自负,下载后请24小时内删除。 本站所有内容均不能保证其完整性,不提供任何技术支持,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用。

在日常开发中,有时候在写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);




 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!

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


  1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,下载后请24小时内删除。
  2、本站所有内容均不能保证其完整性,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用
  3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
  4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意
( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情