0

在我当前的项目中，我需要“汇总”输入、选择和其他表单字段的变量选择，并将它们作为表单提交。为了实现这一点，我正在动态创建一个<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()。

有关工作演示，请参阅此小提琴

这行得通-但仅在一定程度上。我遇到的问题

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

也许这里有人可以对其中一些问题有所了解？

4

1 回答 1

2

你可以试试这样的

$('#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();
});

工作示例。（在 Chrome 和 FF 中测试）。

更新： 您不能required以这种方式使用属性来执行此操作，您必须保留表单的input字段focusable/visible以使其使用html5 required attribute，您可以使用在提交时js使用输入输入来验证表单，例如（也适用于）：class=requiredIE-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但现在可以正常工作。

工作示例。（在IE-10和FF中Chrome）。

于 2013-10-02T07:29:57.913 回答