Javascript - проверять значения полей с динамическими именами

1

У меня есть набор текстовых полей qty с динамическими именами: например qty541; qty542; qty957 образованный словом: "qty" и product id

Как проверить, все ли поля qty пусты или нет с помощью Javascript?

Большое спасибо.

  • 0
    Можете ли вы использовать что-то вроде jQuery?
  • 0
    Да, но я также хочу использовать window.onbeforeunload, чтобы предотвратить выход пользователя из страницы и потерю данных, когда он набрал количество в полях qty ...
Показать ещё 2 комментария
Теги:

4 ответа

0
Лучший ответ

Использование:

<p>
 <input type="text" name="qty3232" value="43"/><br/>
 <input type="text" name="qty5532" value="as"/><br/>
 <input type="text" name="qty5521" value=""/><br/>
 <input type="text" name="qty3526" value="34"/>
</p>
<br/>
<h3>Log</h3>
<pre id="log"></pre>

Javascript (нет jQuery):

var inputs = document.getElementsByTagName('input');
var log = document.getElementById('log');

for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].type == 'text' && inputs[i].name.substring(0,3) == 'qty') {
        if (inputs[i].value == '') {
            log.innerHTML += inputs[i].name + " value empty.\n";
        } else {
            log.innerHTML += inputs[i].name + " value not empty.\n";
        }
    }
}

http://jsfiddle.net/jxmMW/

Это намного проще с помощью селектора в jQuery.

var log = $('#log');

$('input[name^="qty"]').each(function(){
    if (this.value == '') {
        log[0].innerHTML += this.name + " value empty.\n";
    } else {
        log[0].innerHTML += this.name + " value not empty.\n";
    }
});

http://jsfiddle.net/jxmMW/1/

  • 0
    Спасибо, что делает log.innerHTML + = input [i] .name + "value empty. \ N"; делать ? :)
  • 0
    @Bizboss: он преобразует содержимое DOM элемента log в строку, затем добавляет дополнительное содержимое к этой строке, затем разбирает содержимое DOM элемента log и создает новое содержимое с обновленной строкой. Я настоятельно рекомендую не использовать += с innerHTML , но это работает.
Показать ещё 3 комментария
1

Самый простой способ - использовать структуру javascript, такую ​​как JQuery, Protoype и т.д. С помощью этой структуры вы можете создать шаблон поиска в режиме reg expr. Если вы не можете использовать его, ему потребуется больше работы:

Один способ:

var formObj = document.forms[0]; //as an example
var fields = formObj.getElementsByTagName("input");
for (i=0; i < fields.length, i++)
{
   if (fiedls[i].name.indexOf("qty") > 1)
   {
     //do something
   }
}
  • 0
    +1 Первый ответ, который хорош. Но скорее fiedls[i].name.indexOf("qty") == 0 как это должны быть первые 3 символа.
1

Вы можете прокручивать элементы формы:

var form = document.getElementById('theForm');
var index;
var field;
for (index = 0; index < form.elements.length; ++index) {
    field = form.elements[index];
    if (field.name.substring(0, 3) === "qty") {
        // Check field.value here
    }
}

Живой пример

Вышеприведенное предполагает, что форма имеет id, но, тем не менее, вы получаете доступ к элементу form, остальное следует.


Не в теме: многие из этих материалов значительно упрощены функциями утилиты, доступными в различных библиотеках JavaScript, таких как jQuery, Prototype, YUI, Closure или любой из нескольких других. Они также сглаживают различия браузера (или прямые ошибки браузера), что позволяет сосредоточиться на задании, а не беспокоиться о несоответствиях браузера.

  • 0
    J. превосходный! +1
0

Обычная JS:

Например, используйте class= "количество" во всех полях и используйте getElementsByClassName - что почти приводит нас в режим jQuery

window.onbeforeunload=function() {
  var elems = document.getElementsByClassName("quantity"); // needs help in some browsers
  for (var i=0,n=elems.length;i<n;i++) {
    if (elems[i].value!="") {
      return "You have filled in a quantity");
    }
  }
}

window.onload=function() {
  document.forms[0].onsubmit=validate;
}

function validate() {
  var elems = document.getElementsByClassName("quantity"); 
  for (var i=0,n=elems.length;i<n;i++) {
    if (elems[i].value=="") {
        alert("Please fill in a quantity");
        elems[i].focus();
        return false;
      }
    }
  }

стандартный метод:

function validate() {
  var elem;
  for (var i=0,n=this.elements.length;i<n;i++) {
    elem = this.elements[i];
    if (elem.name && elem.name.indexOf("qty")===0) {
      if (elem.value=="") {
        alert("Please fill in a quantity");
        elem.focus();
        return false;
      }
    }
  }
  return true; // allow submit
}
  • 0
    Будьте осторожны с рекомендацией .getElementsByClassName (). Эта функция доступна только в новом Javascrip HTML5.
  • 0
    Отсюда ссылка на необходимые расширения для неподдерживаемых браузеров.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню