使用下一个 js 将表单发布到 iframe 而不渲染到正文

Posted 2023-02-26

【中文标题】使用下一个 js 将表单发布到 iframe 而不渲染到正文

【英文标题】：posting form to iframe with extjs without rendering to bidy

【发布时间】：2016-08-14 18:18:54

【问题描述】：

我正在尝试将表单发布到 iframe。我的问题是，当我将 iframe 渲染到正文时，我的表单会很好地发布。但问题是容器显示在页面底部，而不是我希望它显示的位置。如果我不使用 renderTo 属性，我的表单根本不会发布到 iframe。在我不使用 renderTo 属性的情况下，我认为我的表单甚至看不到 iframe。

这是我为表单发布工作的代码，但容器一直掉到页面底部

    var myContainer = Ext.create('Ext.form.FieldSet', 
            title: "my frame container",
            labelWidth: 1,
            bodyStyle: "padding-right:15px;padding-left:25px;",
            renderTo: Ext.getBody(),
            items: [
                
                    xtype: 'box',
                    autoEl: 
                        tag: 'iframe',
                        name: 'myIframe',
                        id: 'myIframe'
                    
                
            ]
        );

$('myform').submit();

这会提交表单，但面板会下拉到页面底部。我怎样才能保持它的位置，也能够发布到它。 同样，如果我将这部分取出 renderTo: Ext.getBody()，那么表单将永远不会发布到 iframe。

不知有没有办法渲染到特定的div可能？不确定这是否也有效。

已编辑

我试过这样做

renderTo: 'x-panel'

 ext-all.js Uncaught TypeError: Cannot read property 'dom' of null

** 完整的代码和表单提交**

var f = document.createElement("form");
f.setAttribute('method',"post");
f.setAttribute('name',"checkout-form");
f.setAttribute('id',"checkout-form");
f.setAttribute('target',"myIframe");
f.setAttribute('action',"http://example.com");
var formFields = [
    'field1',
    'field2',
    field3'
];
    for (var i = 0; i < formFields.length; i++)
        var formFieldName  =  'formFieldName'+i;
        formFieldName = document.createElement("input");
        formFieldName.type = "text";
        formFieldName.name = formFields[i];
        f.appendChild(formFieldName);
    

var myContainer = Ext.create('Ext.form.FieldSet', 
    title: "my title",
    labelWidth: 1,
    bodyStyle: "padding-right:15px;padding-left:25px;",
    //renderTo: Ext.getBody(),
    renderTo: Ext.getElementById("myId"),
    items: [
        
            xtype: 'box',
            autoEl: 
                tag: 'iframe',
                name: 'myIframe',
                id: 'myIframe',

            ,
            listeners: 
                load: 
                    element: 'el',
                    fn: function () 
                        console.log("iframe loaded");
                        $('iframe#component-9808').css('border','0');

                    
                
            
        
    ]
);

$("body").append(f);
$('#checkout-form').submit();

【参考方案1】：

也许您可以尝试像这样发送表单数据：

    Ext.create(Ext.form.Panel).submit(
        clientValidation: false,
        method: 'GET',
        params: 
            // Your params like:
            id: myId
        ,
        standardSubmit: true,
        target: '_blank',
        url: 'your/url'
    );

【参考方案2】：

var formFields = [
    'field1',
    'field2',
    field3'
];

你还有一个' 也不见了... Wacthout！