Hide div if ASP text box IsNull (OnPageLoad)

janehollin · 12-02-2012, 05:00 PM

Hi

Sorry if this is a double posting - I think I have deleted the text from the other (same) question. Not sure how I did that ??

I know this can be done with VB - something like this

Code:

If Not String.IsNullOrEmpty(Request.Form("SOME TEXT BOX NAME")) Then
strSOME OTHER NAME = Request.Form("SOME TEXT BOX NAME")

This can be to indiv boxes or whole divs.
But I am looking for a faster load and I think JS would not need to iterate though the whole form, and this is why I need to help with the JS

What I am trying to do is to set the Display:None or Display:Block of a div OnPageLoad, but this is dependant upon if a certain ASP:TextBox in the div contains data or IsNull.

Hope that make sense.

So, as an example, in this case
MyDiv1 would be style="display:none" as it is not null
MyDiv2 would be style="display:block" as it is null
MyDiv3 would be style="display:none" as it is not null
MyDiv4 would be style="display:block" as it is null

Note that the textboxes are always called MyTextBox + #

Code:

<body>

<div id="FormHolder">
	<form id="MyForm">
		<div id="MyDiv1">
			<asp:TextBox id="MyTextBox1" runat="server">Some text</asp:TextBox>
		</div>
		<div id="MyDiv2">
			<asp:TextBox id="MyTextBox2" runat="server"></asp:TextBox>
		</div>
		<div id="MyDiv3">
			<asp:TextBox id="MyTextBox3" runat="server">Somthing</asp:TextBox>
		</div>
		<div id="MyDiv4">
			<asp:TextBox id="MyTextBox4" runat="server"></asp:TextBox>
		</div>
	</form>
</div>

</body>

Thanks if you can help

Philip M · 12-02-2012, 05:19 PM

I am surprsied that you cannot do this yourself given the code you were supplied with before.

I don't do asp, but if there is an issue of som ekind I am sure that Old Pedant will sort it out.

Code:

<form id="myForm" >

<select id = "mylist" onchange = "showdivs()">
<option value = 0>Please select a number...</option>
<option value = 1>1</option>
<option value = 2>2</option>
<option value = 3>3</option>
<option value = 4>4</option>
</select>
<br><br>	

<div id="MyDivNumber1" style="display: none"> <input type = "text" id="MyTextBox1" value = "Somestuff"><br> Hi, I'm Div Number 1</div><br>
<div id="MyDivNumber2" style="display: none"> <input type = "text" id="MyTextBox2" value=  ""><br>Hi, I'm Div Number 2</div><br>
<div id="MyDivNumber3" style="display: none"> <input type = "text" id="MyTextBox3" value = "MoreStuff"><br>Hi, I'm Div Number 3</div><br>
<div id="MyDivNumber4" style="display: none"> <input type = "text" id="MyTextBox4" value = 0><br>Hi, I'm Div Number 4</div><br>

</form>

<script type = "text/javascript">

function showdivs() {
var numdivs = 4;  // number of divs - could be 50 or as many as you like
var num = document.getElementById("mylist").value;
for (var i =1; i<=numdivs; i++) {
var which = "MyDivNumber" + i;  // naming convention for div ids
var boxval = document.getElementById("MyTextBox" + i).value;
if ((boxval !="") && (boxval !=0)) {
document.getElementById(which).style.display = num>=i? "block" : "none";
}
}
}

</script>

In Javascript the value of a textbox cannot ever be null - only "" (blank).

Before you erased your thread you said you wanted the <div> not to display if the corresponding textbox value was 0. If that no longer applies you can easily adjust the above code.

Quizmaster: The Royal Albert Bridge at Saltash in Cornwall was designed and built by which engineer?
Contestant: Islamabad Brunel

janehollin · 12-02-2012, 05:46 PM

Hi thnks for your help.

The other JS works really well OnClick (or OnChange) but this new requirement is that last stage in the process.

I have a serise of forms that a RequestForm call from the previous.
I am just trying to neaten up one forms. If there is no data called from the previous one then I don't want to shown an empty div.

Sorry about all the questions. I actually write databases and do the data-analasis for our Co. But with the cut backs the IT dept is now just 4 people (there were 12 last year), so I have been asked (told) to upgrade the on-line systems and lets just say it is a steep learning curve.

Old Pedant · 12-03-2012, 06:53 AM

Why did you start another thread asking the *SAME THING*???

In any case, *CLEARLY* you should be doing this in ASP.NET code and *NOT* using JavaScirpt. Period.

And there is NO REASON to use a <div> and then hide the <asp:TextBox> by hiding the <div>.

Instead, when you determine that you want to hide the form field yet still get its value when the <form> is posted, just use

Code:

<asp:HiddenField id="somename" runat="server" value="somevalue" />

instead of

Code:

<asp:TextBox id="somename" runat="server" value="somevalue" />

(And, by the way, you didn't even have the syntax for the textbox correct!! You set its value by assigning to a value= attribute! Not as you were doing it.

janehollin · 12-03-2012, 03:23 PM

Quote:

Originally Posted by Old Pedant

Why did you start another thread asking the *SAME THING*???

As I delete the other post by mistake.
Sorry if I have offended you in some way.

You don't sound very nice. I don't think there is any law that says you had to reply - it obviously made you very angry, so you may have been better just not bothering.

I understand that having made an average of (approx.) 15 posts per day for the past few years (since Feb., 09) you may have become quite possessive of the forum, but may I suggest that you chill out a little.

Thanks for taking the time to point out my errors , although in the end I used some simple VB (you'll be relieved to know)

Now as my mum would advise, you should take a few deep breaths or, better still, have a rest before answering any more posts.

Old Pedant · 12-03-2012, 08:04 PM

No anger, just a bit of frustration.

I do understand that you are being called upon to do tasks that you have never learned to do, but Phillip *did* ask you why you weren't doing this in ASP.NET code and you ignored him.

One more time: You really should be doing all this with ASP.NET code. There is no good reason to use JavaScript for this. There are many reasons NOT to use JavaScript code for this.

If you don't know how to use ASP.NET, then maybe you will just have to go to your boss and say you need time to learn ASP.NET if he/she expects you to perform your job.

I really do have a lot of sympathy for you, stuck in a position where you have to make something work when you have no idea how. But at the same time, you need to take the advice of more experienced people and learn the right way to do the task.

You never have shown us any of the ASP.NET code you are using to create all this, so we can't tell you what to change in that code. And *THERE* is my personal source of frustration: What you want to do *SHOULD* be easy in ASP.NET, but a lot of it depends on how you write the ASP.NET code.

If you are willing to show the ASP.NET code, then you are more likely to get the right kind of help you need.

janehollin · 12-04-2012, 12:44 PM

Fair enough

I would be interested in seeing how this would be done in ASP ?

But in case anyone else is wondering how they would do this:
Carry a number form one form to another and show/hide divs depending on this number.
Here is one method (there will be others)

This one uses
Java
VB
CSS
HTML

1st create 2 forms (ASPX)
call them Form1 and Form2

Code for form1

Code:

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
</head>

<body>

<form runat="server" method="post">
	<asp:DropDownList id="MyListBox" runat="server">
	<asp:listitem></asp:listitem>
	<asp:listitem>1</asp:listitem>
	<asp:listitem>2</asp:listitem>
	<asp:listitem>3</asp:listitem>
	<asp:listitem>4</asp:listitem>
	</asp:DropDownList>
	<br />
	<asp:Button id="btnSubmit" runat="server" postbackurl="form2.aspx" text="Next Form Go" />
</form>

</body>

</html>

Code for form2

Code:

<!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 content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
<script runat="server" language="VB" type="text/vb"> 
Dim strSomeNumber
Sub Page_Load() 
strSomeNumber = Request.Form("MyListBox")
txtMyNumber.Text = strSomeNumber
End Sub 
</script>
<style type="text/css">
#txtMyNumber {
	display: none;
}
</style>
</head>

<body>

<form id="form1" runat="server">
	<asp:TextBox id="txtMyNumber" runat="server"></asp:TextBox>
	<div id="MyDiv1">
		Div number 1 is showing</div>
	<br />
	<div id="MyDiv2">
		Div number 2 is showing</div>
	<br />
	<div id="MyDiv3">
		Div number 3 is showing</div>
	<br />
	<div id="MyDiv4">
		Div number 4 is showing</div>
	<br />
	<asp:Button id="btnSubmit" runat="server" postbackurl="form1.aspx" text="Go Back" width="78px" />
	<br />
</form>
<script type="text/javascript">
function selectrooms() {
var numdivs = 4;
var num = document.getElementById("txtMyNumber").value;
for (var i =1; i<=numdivs; i++) {
var which = "MyDiv" + i;  
document.getElementById(which).style.display = num>=i? "block" : "none";
}}
window.onload=selectrooms ; 
</script>

</body>

</html>

I hope someone will post a much simpler method of doing this - but until then this should start you along the way.

NOTE - I normally work with MySQL/SQL/VBA etc. I DON'T do websites, but due to cutbacks I am now the firm's webbie