Problema di Internet Explorer con attributo di modulo HTML5 per l'elemento del pulsante

Question

in HTML5, c'è l'attributo del modulo. Fondamentalmente

<form id="myform" method="get" action="something.jsp"> 
    <input type="text" name="name" /> 
</form> 
<input type="submit" form="myform" /> 

il codice sopra non funziona in IE. Qualcuno può aiutarmi a risolvere questo requisito.

Ho usato le seguenti JavaScript e jQuery per inviare il modulo, ma di fronte al problema Ajax. dove la mia pagina si sta ricaricando.

document.getElementById("myForm").submit(); 

$("#myForm").submit(); 

Come posso inviare il modulo in cui la mia pagina non deve essere caricata. Sto usando Anguler JS Ajax.

Answer 1

IE non supporta ancora l'attributo HTML5 form per l'elemento <input> o <button>.

Se si desidera associare un elemento di input esterno con la forma, è possibile duplicare un ' "ombra", come un campo di ingresso invisibile all'interno del vostro modulo, e allegare un gestore di eventi all'evento del form onsubmit. Quando l'utente invia il modulo, aggiorna il valore all'interno.

Il seguente polyfill (richiede jQuery) emula la funzione. Rende gli elementi di ingresso con form attributo si comportano come se fossero all'interno del modulo:

(function($) { 
    /** 
    * polyfill for html5 form attr 
    */ 

    // detect if browser supports this 
    var sampleElement = $('[form]').get(0); 
    var isIE11 = !(window.ActiveXObject) && "ActiveXObject" in window; 
    if (sampleElement && window.HTMLFormElement && sampleElement.form instanceof HTMLFormElement && !isIE11) { 
    // browser supports it, no need to fix 
    return; 
    } 

    /** 
    * Append a field to a form 
    * 
    */ 
    $.fn.appendField = function(data) { 
    // for form only 
    if (!this.is('form')) return; 

    // wrap data 
    if (!$.isArray(data) && data.name && data.value) { 
     data = [data]; 
    } 

    var $form = this; 

    // attach new params 
    $.each(data, function(i, item) { 
     $('<input/>') 
     .attr('type', 'hidden') 
     .attr('name', item.name) 
     .val(item.value).appendTo($form); 
    }); 

    return $form; 
    }; 

    /** 
    * Find all input fields with form attribute point to jQuery object 
    * 
    */ 
    $('form[id]').submit(function(e) { 
    var $form = $(this); 
    // serialize data 
    var data = $('[form='+ $form.attr('id') + ']').serializeArray(); 
    // append data to form 
    $form.appendField(data); 
    }).each(function() { 
    var form = this, 
     $form = $(form), 
     $fields = $('[form=' + $form.attr('id') + ']'); 

    $fields.filter('button, input').filter('[type=reset],[type=submit]').click(function() { 
     var type = this.type.toLowerCase(); 
     if (type === 'reset') { 
     // reset form 
     form.reset(); 
     // for elements outside form 
     $fields.each(function() { 
      this.value = this.defaultValue; 
      this.checked = this.defaultChecked; 
     }).filter('select').each(function() { 
      $(this).find('option').each(function() { 
      this.selected = this.defaultSelected; 
      }); 
     }); 
     } else if (type.match(/^submit|image$/i)) { 
     $(form).appendField({name: this.name, value: this.value}).submit(); 
     } 
    }); 
    }); 


})(jQuery); 

versione live: http://jsfiddle.net/hbxk4e61/

Tra l'altro, è possibile controllare this page per verificare quanti HTML5 presenta il browser attualmente supporta. Ad esempio, sto utilizzando Chrome 31 e supporta questo attributo.

Answer 2

Per quanto posso dire, Internet Explorer non (fino a IE10, almeno) sostenere l'attributo form.

È possibile sia Polyfill questo in javascript, o spostare la input di sedersi all'interno l'apposito modulo. Questo è già stato risposto altrove però: https://stackoverflow.com/a/16694990/13019

Answer 3

Beh, IE in fondo non supporta l'attributo forma in ingresso, ma si potrebbe usare javascript per inviare il modulo:

document.getElementById("myForm").submit(); 

o jQuery

$("#myForm").submit(); 

Answer 4

<form id="form-any-name"> 
    <input type="button" value="Submit" class="myButton" /> 
</form> 
<button type="submit">Submit</button> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('button[type=\'submit\']').on('click', function() { 
      $("form[id*='form-']").submit(); 
     }); 
    }); 
</script> 

Dal momento che tutti i progetti ha incluso jquery 100% :) è possibile definire in esterno o qualsiasi incluso js presentare la sulla funzione pronto documento per prendere il pulsante di invio cliccato fuori forma siie catturando tutte le forme id iniziando con form- così cattura forme su pagine diverse con nomi diversi in modo da non dover ripetere lo stesso snipet del codice jquery

Answer 5

Dalla risposta di @Voldemaras Birškys, ho migliorato il suo script per funzionare come polyfill in modo da poter ancora avere l'attributo form senza il tuo pulsante e funzionerà come se EDGE/IE rispetterebbe l'attributo form.

<form id="form-any-name"> 
    <input type="button" value="Submit" class="myButton" /> 
</form> 
<button type="submit" form="form-any-name">Submit</button> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('button[type=\'submit\']').click(function (e) { 
     var formId = $(e.target).attr("form"); 
     $("form[id*="+formId+"]").submit(); 
    }); 
}); 
</script> 

La differenza principale è che ora includiamo form sul submit pulsante esterno. Inoltre, all'interno del gestore click, utilizzo l'evento solo per ottenere l'elemento target e dall'ID per scoprire lo id del modulo di destinazione.

:)