Ошибки представления динамической формы jQuery

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, и $ undefined. В 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).

Update: Вы не можете сделать это с помощью required атрибута таким образом, вы должны держать input поля формы в focusable/visible, чтобы сделать его работу с html5 required attribute, вы можете использовать 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).