Solved

javascript onSubmit - hide text box if value is null

Posted on 2010-11-09
16
606 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
16 Comments
 
LVL 1

Expert Comment

by:skrombeen
ID: 34094465
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
ID: 34094486
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
ID: 34094510
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
The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

 

Author Comment

by:sknoll84
ID: 34094603
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
ID: 34094849
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
ID: 34094932
do you think this can be done with onPageLoad?
0
 
LVL 1

Expert Comment

by:skrombeen
ID: 34094992
how are you populating the controls?
0
 

Author Comment

by:sknoll84
ID: 34095011
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
 
LVL 1

Expert Comment

by:skrombeen
ID: 34095070
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
ID: 34095374
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
ID: 34095957
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
ID: 34102066
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
ID: 34104841
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
ID: 34105003
this was provided in my sample.
0
 

Author Comment

by:sknoll84
ID: 34105352
@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
ID: 34109231
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

The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

705 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