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?
sknoll84Asked:
Who is Participating?
 
skrombeenConnect With a Mentor Commented:
you will either need to put it on your form tag or on the button:
<form onsubmit="YourFunctionName();"
or
<input type="button" onclick="YourFunctionName();"

<script language='javascript'>
 function YourFunctionName()
{
 if (LL_FormTag_1_2_3.value == null)
{
textbox1.style.visible = 'hidden';
}
}
</script>
0
 
skrombeenCommented:
i assume you are using standard html pages...

if (LL_FormTag_1_2_3.value == null)
{
textbox1.style.visible = 'hidden';
}
0
 
sknoll84Author Commented:
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?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
sknoll84Author Commented:
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?
0
 
skrombeenCommented:
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

}
0
 
sknoll84Author Commented:
do you think this can be done with onPageLoad?
0
 
skrombeenCommented:
how are you populating the controls?
0
 
sknoll84Author Commented:
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?
0
 
skrombeenCommented:
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>
0
 
sknoll84Author Commented:
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?
0
 
skrombeenCommented:
you can hide a table the same way as above, but replace the textbox name with the table name!
Give it a try!
0
 
knx007Commented:
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

0
 
sknoll84Author Commented:
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
0
 
skrombeenCommented:
this was provided in my sample.
0
 
sknoll84Author Commented:
@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!
0
 
skrombeenCommented:
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();">
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.