在日常开发中，有时候在写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、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意