I'm trying to make a universal "Check Empty" javascript function. What I figured I would do was onsubmit get the number of input boxes in the form and take it's length like so:
I did pass the form name into the function via this.name and called it formVar
var len = formVar.input[].value;
Then I would use that variable as a limit to a loop so I could check each one and see if it was empty. What's the problem with the above code snippet? Is there a way to get a number of inputs in a form?
DEMO
input[] isn't a valid identifier in JavaScript, so you'll need to access these inputs as a string index on your form:
var allInputs = formVar["input[]"];
var len = allInputs.length;
var anyChecked = false;
for (var i = 0; i < len; i++)
if (allInputs[i].checked){
anyChecked = true;
break;
}
if (!anyChecked)
alert("all checkboxes are empty!");
You can use the following to figure out the number of input elements in your form:
document.forms['search'].getElementsByTagName('input').length
this assumes you have a form named search. or you can use your formVar to replace dcoument.forms['search'] part
Related
I have the below code, is there a way to put this in a simpler format.
I am having to blank out 50 or more fields when a date in a certain key field is changed or made blank.
if (zEntry ==""){
document.getElementById("Q229I1226").value="";
document.getElementById("DQ230I1227").value="";
document.getElementById("DQ231I1228").value="";
document.getElementById("Q4I1001").value="";
//Date from fall to arrival
document.getElementById("Q232I1229").value="";
document.getElementById("DQ233I1230").value="";
document.getElementById("DQ234I1231").value="";
document.getElementById("Q5I1002").value="";
//Date Time of referral to T&O surgery
document.getElementById("Q238I1235").value="";
document.getElementById("DQ239I1236").value="";
document.getElementById("DQ240I1237").value="";
document.getElementById("Q15I1012").value="";
document.getElementById("Q17I1014").value="";
//Date seen T&O 1st on call
document.getElementById("Q241I1238").value="";
document.getElementById("DQ242I1239").value="";
document.getElementById("DQ243I1240").value="";
document.getElementById("Q16I1013").value="";
}
Thank you
You have to add common class to your inputs.
var array = document.getElementsByClassName('className');
for (var i = 0, lng = array.length; i < lng; i++) {
array[i].value = '';
}
If you want to clear out all fields with same tag you can just use
document.getElementsByTagName(arg) while arg being 'input', 'option' etc.
But if you want specific inputs to be cleared, you have to give them a class and use
document.getElementsByClassName(arg)
Add class to the input fields and try
var array_container = document.getElementsByClassName('example');
for (var i = 0, i < array_container.length; i++) {
array_container[i].value = '';
}
You may try this approach too:
// store all the element ids in an array
var element_ids = ['Q229I1226', 'DQ230I1227', 'DQ231I1228', 'Q4I1001',
'Q232I1229'];
element_ids.forEach(function(element_id){
document.getElementById(element_id).value = '';
});
Here is a solution of how to clear all input boxes/fields by looping.
Loop though all input boxes and clear them
I was wanting to count the occurrences of input fields that has a class name of text where that text input contains a specific value.
document.getElementById('c_files').getElementsByClassName('text').length;
So far this counts all textboxes with the class name of text but how can i make it value specific, say if i have 50 textboxes but i only want to count the ones where the value of that textbox contains abc somewhere within the string.
Thanks.
Edit: Thank you everyone for your time and answers, i have voted you all up, but i prefer John Bupit's solution out of them all so thats the one i will accept. Thanks again.
You can iterate over the elements and see which ones have the desired value:
var elems = document.getElementById('c_files').getElementsByClassName('text');
var count = 0;
for(var i = 0; i < elems.length; i++) {
if(elems[i].value.match(/abc/)) count++;
}
You can select all textboxes first and after that filter those matching your criteria. For example, by using Array.prototype.filter method:
var allText = document.getElementById('c_files').getElementsByClassName('text'),
filtered = [].filter.call(allText, function(textbox) {
return textbox.value.indexOf('abc') > -1;
});
Above code will produce and array of text elements where value contains substring "abc".
Hi I think you need to review this SO post-
https://stackoverflow.com/a/9558906/3748701
https://stackoverflow.com/a/10095064/3748701
This is something which would help in getting your solution.
You'll need to loop over all of the text boxes with the specified class and calculate it from there.
Something like the following logic should work:
var counter = 0;
var inputElements = document.getElementById('c_files').getElementsByClassName('text').length;
for (var i = 0; i < inputElements.length; i++) {
if (inputElements.value == "someText") {
counter++;
}
}
I have a form with radio buttons that I'm using javascript to loop through and return the sum of all the radio buttons to an input element at the bottom of the page. The script I'm using is this and it works fine.
<script type="text/javascript">
function checkTotal() {
var radios = document.querySelectorAll('input[type=radio]'),
sumField = document.querySelector('input[type=text]');
var sum = 0;
for (var i = 0, len = radios.length - 1; i <= len; i++) {
if (radios[i].checked) {
sum += parseInt(radios[i].value);
}
}
sumField.value = sum;
}
</script>
Here's my form http://cognitive-connections.com/Prefrontal_Cortex_Questionnaire.htm
However I need to build another form where there are several questions in different groups and I need to sum the totals for each group separately and post them to their corresponding input elements on the page accordingly. Here's my new form http://cognitive-connections.com/Prefrontal_Cortex_Questionnaire100913.htm
I'm not an advanced javascript user but do have a pretty good understanding of programming itself (I think, lol) My head tells me that I should be able to simply declare a unique var for each different group and a unique element to post it's results to and use the same loop (with correct vars for each group) for each group. But when I add [name="elements name"] as the identifier for the document.querySelectAll it grabs the elements with that name only and if I name the elements themselves the same name the radio buttons loose their inherent property of only letting one radio button per question be selected at a time? I've also tried creating a class id for each group and tried to use it as the identifier in the document.querySelectAll and it doesn't seem to work at all then. Any help is greatly appreciated..
As per my understanding of question, below is my answer. And here is the fiddle http://jsfiddle.net/8sbpX/10/.
function enableQ(cls) {
var ele = document.querySelectorAll('.' + cls)[0],
ev = (document.addEventListener ? "#addEventListener" : "on#attachEvent").split('#');
ele[ev[1]](ev[0] + "change", function () {
var radios = ele.querySelectorAll('[type="radio"][value="1"]:checked').length;
ele.querySelector('[type="text"]').value = radios;
});
}
enableQ("rad-grp");
I have a contact form that I'm going to validate with JS.
I want a function to loop through all the inputs and work out which one is the email by searching it for a '#' symbol, then assigning it to a variable to be handled later.
I've initialized variables for each input box and assigned them as values in the input array.
I've looped through them and checked them against a regular expression (a simple a-z letter check), just to make sure they've all had content inputted.
If they match the RegExp then I want them to be passed to a string search to look for an # symbol to determine which one is the email input.
This is my code below but it's not working.
Can anyone tell me where i've gone wrong?
Thanks!
var emailaddress;
function find_email() {
var name = document.getElementById("username");
var email = document.getElementById("email");
var msg = document.getElementById("messagecontent");
var racenum = document.getElementById("racenum");
var input = [name, email, racenum, msg];
for (i = 0; i <= input.length; i++) {
var standard_check = /[a-zA-Z0-9]/g;
if (input[i].value.match(standard_check)) {
var str = input[i].value;
str.search("#");
if (str.match("#")) {
emailaddress= str;
}
}
}
}
The Problem with this code is that you have for (i = 0; i <= input.length; i++) which attempts to go one pass the number of elements in the array. Get rid of the equals making it for (i = 0; i < input.length; i++) and you should be fine.
I have a form that currently only parses the first input variable in the POST.
I have had to add multiple variables, so I would like the function to loop through and grab all the input parameters and add to the POST
Here's the working code for grabbing the first name and value.... How can I get it to check the form and grab all custom name's and variables.
example here
// dynamically add key/value pair to POST body
function read_custom_param(){
var nameEl = document.getElementById("custom_name");
var valueEl = document.getElementById("custom_value");
// save custom param name and value
var cust_param_name = nameEl.value;
var cust_param_value = valueEl.value;
// remove old custom param form elements
if (valueEl.parentNode && valueEl.parentNode.removeChild){
valueEl.parentNode.removeChild(valueEl);
}
if (nameEl.parentNode && nameEl.parentNode.removeChild){
nameEl.parentNode.removeChild(nameEl);
}
// add new custom param form elements
var el=document.createElement("input");
el.type="text";
el.name=cust_param_name;
el.value=cust_param_value;
document.getElementById("dcapiform").appendChild(el);
}
Kind Regards,
Chris
for whatever purpose ur trying to send ambiguous field names to the server, here is what ur looking for (u should consider a smarter way, may br processing on the server side instead)
var elems = document.getElementsByTagName("input");
var arr = [];
for (var i = 0; i<elems.length; i++){
if (elems[i].type != "text") continue;
if (elems[i].name.indexOf("custom_name") < 0) continue;
var index = parseInt(elems[i].name.substring(11)); // you should rename custom_name to custom_name1, and so for custom_value
arr[arr.length] = elems[i].value+"=" + elems["custom_value"+index].value;
}
document.forms[0]["passedITems"] = arr.join(",");
docmentt.forms[0].submit();
on your server side, read "passedItems", and split by ",", you get an array of "name=value", split again on "=" you get a sub array of name, and value