Обнаружение атрибута формы ввода HTML5 и попытка сериализации, если не поддерживается

У меня есть несколько полей ввода за пределами формы. используя атрибут формы HTML5

<form id="myform">
    <input type="text" name="mytext" />
    <input type="submit" value="test" />
</form>
<input form="myform" type="hidden" name="extra" id="extra" value="777" />
<select form="myform" name="filter" id="filter">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

и попробуйте сериализовать форму при отправке

$('#myform').on('submit', function (e) {
    var query = $(this).serialize();
    if ($.browser.msie) { 
        //fixed form attribute not supported in IE
        var extra = $('[form=myform]').each(function () {
            if (/(=)\w*/gi.test(query)) query += '&';
            query += this.name + '=' + this.value;
        });
    }
    console.log(query);
    return false;
});

но в настоящее время http://api.jquery.com/jquery.browser/ сказал

"Это свойство было удалено в jQuery 1.9 и доступно только через плагин jQuery.migrate. Пожалуйста, попробуйте вместо этого использовать функцию обнаружения функций".

Итак, как мне определить, что браузер поддерживает эту функцию атрибута формы? или есть лучший подход для этого

Источник

3 ответа

Решение

Если вы хотите проверить form Атрибут без использования внешнего плагина или библиотеки вы можете попробовать следующее:

Изменить:

if ($.browser.msie) {

Для того,чтобы:

if ($("#extra")[0].form === null) {

Посмотрите document.getElementById против jQuery $() для получения дополнительной информации о том, почему $("#extra")[0] используется.

В результате чего:

$('#myform').on('submit', function (e) {
    var query = $(this).serialize();
    if ($("#extra")[0].form === null) { 
        //fixed form attribute not supported in IE
        var extra = $('[form=myform]').each(function () {
            if (/(=)\w*/gi.test(query)) query += '&';
            query += this.name + '=' + this.value;
        });
    }
    console.log(query);
    return false;
});

JS Fiddle:

http://jsfiddle.net/ezq9mu1a/1/

Насколько я знаю, это своего рода проверка, которую выполняет Modernizr (хотя я думаю, что он динамически создает входные данные для тестирования). Запуск этой скрипки в IE вызывает запасной код, в то время как Safari, Chrome, Firefox и Opera просто используют serialize,

РЕДАКТИРОВАТЬ

Поскольку мы не можем полагаться на существующий элемент на странице, нам нужно создать тест form а также input для целей проверки, если form атрибут поддерживается. Для этого мы можем изменить код следующим образом:

Добавлять:

//Create test elements and amend them to the DOM
var testForm = $('<form />', { 'id': "testForm" })[0];
var testInput = $('<input />', { 'form': "testForm" })[0];
$('body').append(testForm, testInput);
//Set a variable to store whether the form attribute is supported
var formSupported = (testInput.form !== null) ? true : false;
//Remove the test elements from the DOM
$(testForm).remove();
$(testInput).remove();

Изменить:

if ($("#extra")[0].form === null) {

Для того,чтобы:

if (!formSupported) {

В результате чего:

//Create test elements and amend them to the DOM
var testForm = $('<form />', { 'id': "testForm" })[0];
var testInput = $('<input />', { 'form': "testForm" })[0];
$('body').append(testForm, testInput);
//Set a variable to store whether the form attribute is supported
var formSupported = (testInput.form !== null) ? true : false;
//Remove the test elements from the DOM
$(testForm).remove();
$(testInput).remove();

if (!formSupported) {
    $("#formSupported").html("No");
}

$('#myform').on('submit', function (e) {
    var query = $(this).serialize();
    if (!formSupported) { 
        //fixed form attribute not supported in IE
        var extra = $('[form=myform]').each(function () {
            if (/(=)\w*/gi.test(query)) query += '&';
            query += this.name + '=' + this.value;
        });
    }
    console.log(query);
    return false;
});

JS Fiddle:

http://jsfiddle.net/ezq9mu1a/3/

Источник

Используйте плагин jQuery Migrate https://github.com/jquery/jquery-migrate/

Или используйте modernizr ( http://modernizr.com/)

Источник

Редактировать, обновлять

Обратите внимание, пытался на то есть 11

v2

// click `test`
$("#myform").on("submit", function(e) {
e.preventDefault();
if ("msFlex" in document.body.style) {
var query = "";
$("[form=myform]").not("form *").each(function (k, v) {
    var params = ["name", "value"];
    $.each(params, function (i, val) {
        query += (val === "name" 
                   ? "&" + $(v).prop(val) + "=" 
                   : $(v).prop(val)
                   );
    });
});
// do stuff
// tried at ie11 , `$("[form=myform]").serialize()`
// appear to serialize those elements ?
// see `console` ?
// either `query` or `$("[form=myform]").serialize()`
// should return `&extra=777&filter=1` 
// possible reason `checkFormAttr()` returned `true` ?
// tried `v1` with `checkFormAttr()` ? without `!` ?
console.log(query, $("[form=myform]").serialize());
$("body").append(query)
};
})

http://jsfiddle.net/guest271314/g4v2fcaa/10/ (v2)

&extra=777&filter=1

следует приложить к документу

v1

function checkFormAttr() {
  var form = document.createElement("form");
  form.id = "abc";
  var input = document.createElement("input");
  input.type = "text";
  input.form = "abc";
  form.appendChild(input);
  console.log(form, input.form);
  // (form === input.form) => `true` if supported 
  // (form !== input.form) => cast as `false`
  return (form === input.form) // `false` if not supported
};

для включения в кусок в OP,

$("#myform").on("submit", function( event ) {
  event.preventDefault();
  var query = $(this).serialize();
    if (!checkFormAttr()) { 
        //fixed form attribute not supported in IE
        var extra = $('[form=myform]').each(function () {
            if (/(=)\w*/gi.test(query)) query += '&';
            query += this.name + '=' + this.value;
        });
    }
    console.log(query);
    return false;
});

в качестве альтернативы, чтобы проверить document.body.style для конкретного vendor-prefixes,

var ms = (("msFlex" || "msAnimation") in document.body.style );
var webkit = ("WebkitAnimation" in document.body.style );
var moz = ("MozAnimation" in document.body.style );
var opera = ("OTransition" in document.body.style );

console.log("form attribute:"+ checkFormAttr()
            + "\nform attribute , cast as `false`:"+ !checkFormAttr()
            + "\nms:" + ms 
            + "\nwebkit:" + webkit
            + "\nmoz:" + moz 
            + "\nopera:" + opera);

jsfiddle http://jsfiddle.net/guest271314/g4v2fcaa/

См. HTML5 в 4.10.18.3 Ассоциация элементов управления и форм

Источник
Другие вопросы по тегам