Javascript - verify the values of fields with dynamic names

I have a set of text fields qty with dynamic names: like qty541 ;开发者_开发技巧 qty542 ; qty957 formed by the word: "qty" and the product id

How can I verify if all my qty fields are empty or not with Javascript ?

Thanks a lot.

---

The easiest way is to use a javascript framework like JQuery, Protoype, etc. With this framework you can create a search pattern in reg expr manner. If you unable to use one, it does need more work:

One way:

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

---

You can loop through the elements of the form:

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

Live example

The above assumes the form has an id, but however you get access to the form element, the rest follows.

---

Off-topic: A lot of this stuff is made much simpler by the utility functions available in various JavaScript libraries like jQuery, Prototype, YUI, Closure, or any of several others. They also smooth over browser differences (or outright browser bugs), allowing you to focus on the job in hand rather than worrying about browser inconsistencies.

---

Using:

<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 (no 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/

This is much easier using a selector in jQuery, though.

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/

---

Plain JS:

For example use class="quantity" on all fields and use getElementsByClassName - which almost takes us into jQuery mode

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;
      }
    }
  }

---

standard method:

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
}