Retrieving an Array of All Elements With a Given Class Name and No Value

**HectorRashbaum** · 10-18-2007, 01:02 AM

Hello!

I'm working on a script to fill in the first three blank text inputs where class="characters" with variables I specify in the .js file. There are 24 fields, and I specfically need the script to only add the required values to already blank inputs - no overwriting.

I'm using document.getElementsByClassName('character') to get the array, which works excellently. Problem being, it's meant to create an array of all 24 text inputs with the character class name - which means when I invoke the function, it cycles through and replaces ALL the empty fields with the first value.

Since there are three values I want to add, if I get it to include only blank fields in the array I can hard code it to add the first var to inputs[0], second to inputs[1], third to inputs[3], so I can get all the vars in once and that's it.

Something like:

Code:

function addZico() {
	var Chris="Chris";
	var Ollie="Ollie";
	var Paul="Paul";
	
	var Inputs = document.getElementsByClassName('character');
	var numInputs = Inputs.length;
	var oInput;
	
	for (var i=0; i<numInputs; i++){
		oInput = Inputs[0];
		if (oInput.type != 'text') { continue; }
		if (oInput.value == ''){
			oInput.value =Chris;
		}; 
		oInput = Inputs[1];
		if (oInput.value == ''){
			oInput.value=Ollie;
		};
		oInput = Inputs[2];
		if (oInput.value == ''){
			oInput.value=Paul;
		};
		
	};
	
}

(Please note that this is very rough code in its first stage - I'm aware it needs some tidying up)

However, if the array includes every element, the first three text inputs may not be blank, in which case it will stop checking because of the hard coded numbers, and the values won't be added.

Is there a way to fetch only empty text inputs? Or is there another way to approach this problem?

Thanks!

**codeexploiter** · 10-18-2007, 04:38 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		<style type="text/css">
			.character{
				
			}
			.test{
				
			}
		</style>
		<script>
			function addZico(formName) {
				var j = 0;
				var inputs = document.forms[formName].getElementsByTagName('input');
				var storeVals = ['Chris','Ollie','Paul'];
				for(var i = 0; i < inputs.length; i++) {
					if(inputs[i].className == 'character' && inputs[i].value == '' && inputs[i].type == 'text'){
						inputs[i].value = storeVals[j];
						j++;			
						if(j == 3) break;
					}
				}
			}
		</script>
	</head>
	<body>
		<form name="form1">
			<input type='text' value='90' class='character' /><br/>
			<input type='text' value='' class='test' /><br/>
			<input type='text' value='' class='character' /><br/>
			<input type='text' value='90' class='character' /><br/>
			<input type='text' value='' class='character' /><br/>
			<input type='text' value='' class='character' /><br/>
			<input type='text' value='' class='test' /><br/>
			<input type="button" value="click" onclick="addZico('form1');" />
		</form>
	</body>
</html>

I think your need is similar to the above code? Try to use the JS function

**HectorRashbaum** · 10-18-2007, 06:14 PM

Thank you! That's exactly what I need.

Thread: Retrieving an Array of All Elements With a Given Class Name and No Value

Thread Tools

Search Thread

Retrieving an Array of All Elements With a Given Class Name and No Value

Bookmarks

Bookmarks

Posting Permissions