asked on

javascript onSubmit - hide text box if value is null

i have a website which displays 13 text boxes. not always will there be data in these text boxes. these text boxes are called:

LL_FormTag_1_2_1
LL_FormTag_1_2_2
LL_FormTag_1_2_3
LL_FormTag_1_2_4
LL_FormTag_1_2_5
LL_FormTag_1_2_6
etc, etc, etc

i would like to create a button where:
onSubmit IF the value in LL_FormTag_1_2_1 IS null THEN hide the text box

is this possible with javascript?
i've been able to hide tables based on selection boxes.....i figured this was similar?

skrombeen

i assume you are using standard html pages...

if (LL_FormTag_1_2_3.value == null)
{
textbox1.style.visible = 'hidden';
}

Steven

ASKER

okay, that makes sense and yes, standard html pages are being used.

i do need someone to hold my hand throughout this process. how would i make this a function for onSubmit?

ASKER CERTIFIED SOLUTION

skrombeen

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Steven

ASKER

okay so i want to scan the ENTIRE page for null text boxes. onSubmit will have to hide all text boxes that are null. from your example i see we can target one text box, what about all 13?

skrombeen

without a whole bunch of scripts and looping in javascript, its probably going to be quicker for you to just reference all 13 individually
you can use a script like this:
function CheckNullHide(whichone)
{
if (whichone.value == null)
{
whichone.style.visible = 'hidden';
}
}

function YourFunctionName()
{
CheckNullHide(LL_FormTag_1_2_3);
CheckNullHide(LL_FormTag_1_2_4);
//etc

}

Steven

ASKER

do you think this can be done with onPageLoad?

skrombeen

how are you populating the controls?

Steven

ASKER

i dont know how to answer that question

when the page comes through the workflow, content is populated into these text fields
(using livelink web forms 9.7.2, btw)

so most text fields will already be populated, its those that arent populated (null) that i'd like to hide
i figured a button which the user must click is the safe way...then i started thinking of a more automated way.

i don't know much about onPageLoad > am i making sense? is it even possible?

skrombeen

the onpageload will run before the controls are populated...
can you add the function to the bottom of your page before the </form> tag... something like this:

<script language='javascript'>
function YourFunctionName()
{
CheckNullHide(LL_FormTag_1_2_3);
CheckNullHide(LL_FormTag_1_2_4);
//etc

}

</script>

</form>
</html>

Steven

ASKER

i'm going to complicate things further, i'll think about onPageLoad later this week

let's focus on, onSubmit

i'd like to hide an entire table IF a specific text box within the table is null

table1 contains 4 text boxes: textbox1, textbox2, textbox3, textbox4
table2 contains 4 text boxes: textbox5, textbox6, textbox7, textbox8
table3 contains 4 text boxes: textbox9, textbox10, textbox11, textbox12

i only need to check for a null value in the second text box of each table.

if textbox2 is null then hide table1
if textbox6 is null then hide table2
if textbox10 is null then hide table3

i need to do this against all three tables with only one onSubmit button
possible?

skrombeen

you can hide a table the same way as above, but replace the textbox name with the table name!
Give it a try!

knx007

Try this...

I dont know what you are trying to do but i think this is pointless....

Why do you want to hide the empty input onsubmit ??? onsubmit will change the page !

Anyway, i gave you a window.onload function too, just uncomment the call to the hideTablesIf() to hide tables when page load.

Can you just tell us what you want to do at the end ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Insert title here</title>
	</head>
	<body>
		
		
		<script type="text/javascript">
			window.onload = function(){
				//hideTablesIf();
			};
			
			function hideTablesIf(){
				var tableWrap = document.getElementById("tableWrap");
				tableWrapTables = tableWrap.getElementsByTagName("table");
				console.log(tableWrapTables);
				for(i=0;i<tableWrapTables.length;i++){
					inputs = tableWrapTables[i].getElementsByTagName('input');
					indexOfInputTxt = 0;
					for(j=0;j<inputs.length;j++){
						if(inputs[j].type == 'text') indexOfInputTxt++;
						if(indexOfInputTxt == 2 && inputs[j].value == ""){
							tableWrapTables[i].style.display = "none";
						}
					}
				}
				return false;
			}
		</script>
		
		
		<form onsubmit="return hideTablesIf();">
			<div id="tableWrap">
				<table id="table1">
					<tr><td>Table1</td></tr>
					<tr><td><input type="text" name="textbox1" value="test"/></td></tr>
					<tr><td><input type="text" name="textbox2" value="yop"/></td></tr>
					<tr><td><input type="text" name="textbox3" value="test"/></td></tr>
					<tr><td><input type="text" name="textbox4" value="test"/></td></tr>
				</table>
				<table id="table2">
					<tr><td>Table2</td></tr>
					<tr><td><input type="text" name="textbox5" value="test"/></td></tr>
					<tr><td><input type="text" name="textbox6" value="test"/></td></tr>
					<tr><td><input type="text" name="textbox7" value="test"/></td></tr>
					<tr><td><input type="text" name="textbox8" value="test"/></td></tr>
				</table>
				<table id="table3">
					<tr><td>Table3</td></tr>
					<tr><td><input type="text" name="textbox9" value="test"/></td></tr>
					<tr><td><input type="text" name="textbox10" value="test"/></td></tr>
					<tr><td><input type="text" name="textbox11" value="test"/></td></tr>
					<tr><td><input type="text" name="textbox12" value="test"/></td></tr>
				</table>
			</div>
			<input type="submit" value="oneSubmitButton"/>
		</form>
	
	</body>
</html>

Open in new window

Steven

ASKER

please see the attached screen shot. what i have is a dynamic site which pulls values into a text box. it's integrated with opentext livelink web forms 9.7.2, which doesn't matter, we can generalize everything.

if a null value is detected within the PERSON text box, then i'd like the whole table hidden from view when the user clicks 'Remove Empty Fields'.

i've highlighted tables in orange on the screenshot. i didn't highlight them all, but you get the idea.

so the website loads
the website will have a button that the user clicks
this button will wipe all tables when a null value is detected within the PERSON text box

once wiped, the user has a nice clean form they can print > this form is used to approve high dollar projects.

so i have 13 tables which each contain a PERSON text box:

Reviewer1Table (text box _1_1_22_1_Name)
Reviewer2Table (text box _1_1_25_1_Name)
Reviewer3Table (text box _1_1_28_1_Name)
Reviewer4Table (text box _1_1_31_1_Name)
Reviewer5Table (text box _1_1_34_1_Name)
Manager1Table (text box _1_1_12_1_Name)
Manager2Table (text box _1_1_16_1_Name)
TechAssuranceTable (text box _1_1_20_1_Name)

etc. etc. etc

the logic i'm thinking when the button is pressed:

IF _1_1_22_1_Name = null THEN hide Reviewer1Table

i need this function to scan all 13 text boxes

i hope that make more sense!
11-10-2010-12-29-00-PM.png

skrombeen

this was provided in my sample.

Steven

ASKER

@skrombeen, thanks i am working on your solution now. the last post from the other expert made it seem like i wasnt clear - that's why i went into further detail

i apologize for my lack of javascript knowledge - but i already have a submit button at the bottom of my form which also has an onSubmit function.

this new button i have to create, will it be okay if i already have onSubmit somewhere else? do i need to do something differently so i don't conflict the 2 buttons?

thanks!

skrombeen

yes, you can have 2 buttons performing a onsubmit...
but, your new button may not need to submit the page... you can use an onclick event:
<input type="button" onclick="JavascriptFunction();">