HTML5のボタン要素

Question

のHTML5フォーム属性のInternet Explorerに問題があります。フォーム属性があります。基本的に

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

上記のコードはIEでは機能しません。 この要件の解決方法を教えてもらえますか？

次のjavascriptとjQueryを使用してフォームを送信しましたが、私はAjaxの問題に直面しています。 私のページがリロードされています。

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

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

マイページを読み込まないようにするにはどうすればよいですか？ Anguler JS Ajaxを使用しています。

Answer 1

IEは、<input>または<button>要素のHTML5 form属性をまだサポートしていません。

外部入力要素をフォームに関連付ける場合は、フォーム内の不可視入力フィールドとして「シャドー」を複製し、イベントハンドラをフォームのonsubmitイベントにアタッチすることができます。ユーザーがフォームを送信すると、内部の値が更新されます。

次のpolyfill（jQueryが必要）は、この機能をエミュレートします。彼らは、フォーム内にあるようですが、form属性行為で入力要素を作る：

(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); 

ライブバージョン：http://jsfiddle.net/hbxk4e61/

ところで、あなたはHTML5ブラウザは現在サポートしていますどのように多くのテストにthis pageを確認することができます。たとえば、Chrome 31を使用していて、この属性をサポートしています。私の知る限り

Answer 2

、Internet Explorerが（IE10まで、少なくとも）form属性をサポートしていません。

これはjavascriptでpolyfillするか、inputを関連するフォーム内に移動することができます。これはすでにかかわらず、他の場所で回答されていますhttps://stackoverflow.com/a/16694990/13019

Answer 3

まあ、IEは、基本的には、入力フォームの属性をサポートしていませんが、あなたはあなたのフォームを送信するためにはJavaScriptを使用することができます。

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

や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> 

すべてのプロジェクトにjquery 100％が含まれているので:)外部または任意のインクルードjsファイルで、ドキュメント上の準備完了機能を定義して、送信ボタンをキャッチすることができますあなたは非常に同じjqueryコードスニペットを繰り返す必要はありませんので、別のページ上のフォームをキャッチするようにフォームから始まるすべてのフォームidをキャッチしてsiieフォームを作成します。

Answer 5

@VoldemarasBiršskysの回答から、スクリプトをpolyfillとして機能させることができます。したがって、form属性をボタンなしにして、EDGE/IEが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> 

主な違いは、今、私たちは、外部submitボタンをformが含まれていることです。 また、clickハンドラの内部では、イベントを使用してtarget要素を取得し、IDからターゲットフォームのidを検出します。

:)の