Question

在我目前的项目中，我需要“整理”输入，选择和其他表单字段的变量选择并将其作为表单提交。为了实现这一点，我正在创建一个<form>元素。

的内容

HTML

<a id="fire" href="#" title="submit form">Submit form</a>
<input id='inpQ' name='q' type='text' required/>

JS

$('#fire').click(function (event) {
    event.preventDefault();
    var opts = {
        'action': 'http://www.google.com/search',
        'target': '_blank'
    }
    var newForm = $('<form>', opts).append($('#inpQ').clone());
    newForm.submit();
});

我应该解释一下，我需要保留原始元素而不是仅仅隔离它们以便在表单中使用 - 因此.clone（）。

有关正常工作的演示，请参阅this fiddle

这有效 - 但只有一点。我遇到的问题

Webkit浏览器：有效，但浏览器会忽略要求'inpQ值的禁令。
在Firefox和IE10中，它根本不起作用。在后者中，我得到的控制台错误是Access被拒绝而$是未定义的。在Firefox中没有错误，但......没有任何反应。

也许这里有人可以解释其中的一些问题？

Answer 1

您可以尝试这样的事情

$('#fire').click(function(event) {
    event.preventDefault();
    var url = 'http://www.google.com/search';
    var opts = { 'action':url, 'target':'_blank', 'style':'display:none' };
    var inpQ =  $('#inpQ').clone();
    var newForm =$('<form/>', opts).append(inpQ);

    $('body').append(newForm);
    newForm.trigger('submit').remove();
});

Working Example.（在Chrome和FF中测试过）。

更新您不能使用required属性以这种方式执行此操作，您必须保留表单的input字段focusable/visible以使其与html5 required attribute一起使用，您可以使用{{ 1}}在提交时使用输入中的js来验证表单，例如（也适用于class=required）：

IE-10

$(function(){ $('#fire').click(function(event) { event.preventDefault(); var url = 'http://www.google.com/search'; var opts = { 'id':'vForm', 'action':url, 'target':'_blank', 'style':'display:none' }; var inpQ = $('#inpQ').clone(); var newForm =$('<form/>', opts).append(inpQ); $('body').append(newForm); newForm.trigger('submit'); newForm.remove(); }); $(document).on('submit', '#vForm', function(e){ $('#vForm .rerquired').each(function(){ if(!this.value.length) { e.preventDefault(); alert(this.name +' is a required field'); $('#vForm').remove(); return false; } }); }); }); Internet explorer-10由于jQuery版本无效，但现在可以正常使用。

Working Example.（已在IE-10，FF和Chrome中测试过。

jQuery动态表单提交错误

1 个答案: