Получить идентификатор с serializeArray и inArray

Question

У меня есть форма

<form action="test.php" id="loginform" name="loginform" method="post">

         <input name="title[]" id="title1" type="text" value=""  />
         <input name="title[]" id="title2" type="text" value=""  />
         <input  name="title[]" id="title3" type="text" value=""  />
         <input  name="label" id="label" type="text" value=""  />
         <input type="submit" name="submit" value="Submit" id="submit"/>  
</form>

Я пытаюсь получить идентификатор каждого элемента, как этот

$('#loginform').bind('submit', function () {
    {
        var value = {};
        var x = 0;
        var y = 0;
        var temp = {};
        var elements = $(this).serializeArray();
        $.each(elements, function (i, element) {
            var tempname = elements[i].name;
            var tempvalue = elements[i].value;
            if (tempname.indexOf("[]") === -1) {
                var tempid = $("#" + tempname);
            } else if ($.inArray(String(tempname.replace("[]", "")), temp) == -1) {
                temp[y] = String(tempname.replace("[]", ""));
                var tempid = $("#" + tempname.replace("[]", x));
                y++;
            } else if ($.inArray(String(tempname.replace("[]", "")), temp) == 0) {
                x++;
                var tempid = $("#" + tempname.replace("[]", x));

            } else {
                var tempid = $("#" + tempname.replace("[]", x));
            }(tempvalue == "") ? tempid.addClass("hightlight").css({
                'background': '#FFC4C4',
                'border': '1px solid #F00'
            }) : tempid.removeClass("hightlight");
        });
        return false;
    });

Этот inArray всегда возвращает -1 независимо от строки в массиве.

может кто-нибудь в этом разобраться. Много пытался, но все тщетно

Answer 1

Обновление:

Ознакомьтесь с демо

Используемый код:

var elements = $('#loginform').serializeArray();

for (var p = 0; p <= elements.length; p++){
  if (elements[p]) {
   var counter = 1;
   counter += p;
   var id = elements[p].name.replace(/\[\]/, '');
   id = (id.indexOf('title') !== -1) ? id + counter : id;
   alert(id);
 }
}

---

Вы можете просто получить id каждого элемента внутри формы следующим образом:

$('#loginform :input').each(function(){
  var id = this.id;
  // manipulate id variable
});

Answer 2

Это старый пост, но я решил добавить свои мысли. Скопировав исходный код по ссылке ниже, вы сможете добавить любой атрибут элемента, который вы хотели бы в возвращаемый массив. Таким образом, ваша реализация в точности соответствует jQuery. Да, вам нужно будет вручную обновить ваш код, если обновлен исходный код jQuery, но то же самое с другими решениями.

https://searchcode.com/codesearch/view/25323764/

var
  rbracket = /\[\]$/,
  rCRLF = /\r?\n/g,
  rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
  rsubmittable = /^(?:input|select|textarea|keygen)/i,
  rcheckableType = /^(?:checkbox|radio)$/i;

$.fn.extend({
  customSerializeArray: function() {
    return this.map(function() {

      // Can add propHook for 'elements' to filter or add form elements
      var elements = $.prop(this, 'elements');
      return elements ? $.makeArray(elements) : this;
    })
    .filter(function() {
      var type = this.type;

      // Use .is(':disabled') so that fieldset[disabled] works
      return this.name && !$(this).is(':disabled') &&
        rsubmittable.test(this.nodeName) && !rsubmitterTypes.test(type) &&
        (this.checked || !rcheckableType.test(type));
    })
    .map(function(i, elem) {
      var val = $(this).val();

      if (val == null) {
        return null;
      }

      if ($.isArray(val)) {
        return $.map(val, function(val) {
          return { name: elem.name, value: val.replace(rCRLF, '\r\n') };
        });
      }

      return { name: elem.name, value: val.replace(rCRLF, '\r\n') };
    }).get();
  }
});

Answer 3

Сначала я бы посоветовал взглянуть на jquery.validator для проверки формы: Проверка jQuery . Это облегчает проверку формы.

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

Для этого вы можете попробовать что-то вроде этого:

$('#loginform').bind('submit', function (){
    var elements = $(this).serializeArray();
    $(":input").each(function{
      var $this = $(this);
      ($this.val()=="") ? $this.addClass("hightlight").css({
                'background': '#FFC4C4',
                'border': '1px solid #F00'
        }) : $this.removeClass("hightlight");

    });
 });

Теперь, когда вы назвали текстовые поля заголовка заголовком [], я предполагаю, что вы хотите проверить, чтобы эти текстовые поля имели хотя бы одно значение. Если это так, используйте это (это может быть использовано там, где имеется более одной группы элементов):

$('#loginform').bind('submit', function (){
    var elements = $(this).serializeArray();
    //Trim all Inputs
    $(':input', this).each(function(){
        $(this).val($.trim($(this).val()));
    });
    //Validated non Grouped Inputs
    $(':input:not([name*="\[\]"])', this).each(function{ //Selects all input elements that don't end with []
        var $this = $(this);
        ($this.val()=="") ? $this.addClass("hightlight").css({
                            'background': '#FFC4C4',
                            'border': '1px solid #F00'
            }) : $this.removeClass("hightlight");
    });
 //Validated Grouped Inputs
  $(':input[name$="\[\]"]', this).each(function(){
        var $namedEls = $(':input[name="' + this.name + '"]', this);
            //If no element in the name group is selected then mark as invalid.
        if($namedEls.filter('[value!=""]').length == 0){
            var $this = $namedEls.eq(0);
            $this.addClass("hightlight").css({
                'background': '#FFC4C4',
                'border': '1px solid #F00'
            }) : $this.removeClass("hightlight");
        }
    });
});