Solved

javascript onSubmit - hide text box if value is null

Posted on 2010-11-09
16
598 Views
Last Modified: 2012-05-10
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?
0
Comment
Question by:sknoll84
  • 8
  • 7
16 Comments
 
LVL 1

Expert Comment

by:skrombeen
Comment Utility
i assume you are using standard html pages...

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

Author Comment

by:sknoll84
Comment Utility
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
 
LVL 1

Accepted Solution

by:
skrombeen earned 500 total points
Comment Utility
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
 

Author Comment

by:sknoll84
Comment Utility
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
 
LVL 1

Expert Comment

by:skrombeen
Comment Utility
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
 

Author Comment

by:sknoll84
Comment Utility
do you think this can be done with onPageLoad?
0
 
LVL 1

Expert Comment

by:skrombeen
Comment Utility
how are you populating the controls?
0
 

Author Comment

by:sknoll84
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Expert Comment

by:skrombeen
Comment Utility
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
 

Author Comment

by:sknoll84
Comment Utility
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
 
LVL 1

Expert Comment

by:skrombeen
Comment Utility
you can hide a table the same way as above, but replace the textbox name with the table name!
Give it a try!
0
 
LVL 1

Expert Comment

by:knx007
Comment Utility
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
 

Author Comment

by:sknoll84
Comment Utility
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
 
LVL 1

Expert Comment

by:skrombeen
Comment Utility
this was provided in my sample.
0
 

Author Comment

by:sknoll84
Comment Utility
@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
 
LVL 1

Expert Comment

by:skrombeen
Comment Utility
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

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to dynamically set the form action using jQuery.

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now