У меня есть набор текстовых полей qty с динамическими именами: например qty541
; qty542
; qty957
образованный словом: "qty"
и product id
Как проверить, все ли поля qty пусты или нет с помощью Javascript?
Большое спасибо.
Использование:
<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";
}
}
}
Это намного проще с помощью селектора в 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";
}
});
log
в строку, затем добавляет дополнительное содержимое к этой строке, затем разбирает содержимое DOM элемента log
и создает новое содержимое с обновленной строкой. Я настоятельно рекомендую не использовать +=
с innerHTML
, но это работает.
Самый простой способ - использовать структуру 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
}
}
fiedls[i].name.indexOf("qty") == 0
как это должны быть первые 3 символа.
Вы можете прокручивать элементы формы:
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 или любой из нескольких других. Они также сглаживают различия браузера (или прямые ошибки браузера), что позволяет сосредоточиться на задании, а не беспокоиться о несоответствиях браузера.
Обычная 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
}