Javascript - checking field values ​​with dynamic names

Question

I have a set of text fields qty with dynamic names: for example qty541 ; qty542 ; qty957 formed by the word: "qty" and product id

How to check if qty fields are all empty or not using Javascript?

Thank you very much.

Answer 1

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> = "qty3232" value = " <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> = "qty5532" value = "as" /> <br/> <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> = "qty5521" value = "" /> <br/> <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"; } } } ); 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"; } } } '') { 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"; } } } + "value empty \ n."; 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"; } } } + "value not empty \ n."; 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/

It is much easier with the selector in 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"; } }); '); 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"; } }); "qty"]'). each (function () { 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"; } }); not empty \ n."; 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/

Answer 2

You can scroll through the form elements:

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

Living example

The foregoing suggests that the form has id , but nevertheless, you get access to an element form , the rest follows.

---

Not in the subject: many of these materials are considerably simplified utility functions available in a variety of JavaScript libraries, such as the jQuery , of Prototype , the YUI , the Closure or any of several others . They also smooth out browser differences (or direct browser errors), which allows you to focus on the task and not worry about browser inconsistencies.

Answer 3

The easiest way is to use a javascript structure like jQuery, Protoype etc. With this structure, you can create a search pattern in the mode reg expr. If you can not use it, it will 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 } } ); 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 } } "qty")> 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 } } 

Answer 4

Plain JS:

For example, use the class = "number" in all fields and use getElementsByClassName - that almost leads us in 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; } } } ); 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; } } } ; i ++) { 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; } } } = "") { 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; } } } "); 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; } } } ); 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; } } } ; i ++) { 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; } } } "") { 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; } } } "); 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 } ") === 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 } "); 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 }