?
Solved

javascript onSubmit - hide text box if value is null

Posted on 2010-11-09
16
Medium Priority
?
611 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
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 2000 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

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

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
The viewer will learn how to dynamically set the form action using jQuery.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month16 days, 16 hours left to enroll

862 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