Discuss "display problem" in the JavaScript Programming forum.

todd2006 · #1 (**permalink**) May 2nd, 2008, 03:39 PM

Hi,

I have a textbox so when someone enters value in it the page refreshes and the value is displayed in a table

Code:

First name: <input type="text" class="writein" name="FName" id="FName" 
value="<%=Request.Form("FName")%>" size="30" onChange="this.form.action = '<%=Request.ServerVariables("Script_Name")%>'; this.form.submit();"> 

<table>
<tr>
<td align="center"><%=Request.Form("FName")%></td>
</tr>
</table>

what i want to do is i dont want to refresh the page i want to fire a event when someone enters a value in the textbox its automatically displayed in the table

can someone suggest me how to do it

todd

jmurrayhead · #2 (**permalink**) May 2nd, 2008, 03:47 PM

Using JavaScript, you can do such a thing. Get reference to the table cell that you want this value to populate and set the value of it using the onchange event of the textbox.

todd2006 · #3 (**permalink**) May 2nd, 2008, 03:51 PM

OK I GOT IT USE span

thank you so much i am caught on this one also jmurrayhead

I have 4 radio buttons and when one of them is selected i show content related with that radio button

here is the code

Code:

<table>
<tbody>
<tr>
<td>Registration <input type="radio" name="confreg" id="confreg" value="Registration" 
<% if Request.form("confreg")= "Registration" then 
Response.Write "checked=""true""" 
Else
Response.Write "" 
end if
%>
onClick="this.form.action = '<%=Request.ServerVariables("Script_Name")%>'; this.form.submit();"/></td>


<td>Campus <input type="radio" name="confreg" id="confreg" value="Campus"
<% if Request.form("confreg")= "Campus" then 
Response.Write "checked=""true""" 
Else
Response.Write "" 
end if
%>
onClick="this.form.action = '<%=Request.ServerVariables("Script_Name")%>'; this.form.submit();"/></td>

<td>Survey<input type="radio" name="confreg" id="confreg" value="survey"
<% if Request.form("confreg")= "survey" then 
Response.Write "checked=""true""" 
Else
Response.Write "" 
end if
%>
onClick="this.form.action = '<%=Request.ServerVariables("Script_Name")%>'; this.form.submit();"/></td>

</tr>

</tbody>
</table>

<%

Dim getvalues
getvalues=Trim(Request.form("confreg"))

If confreg <> "" then
	IF confreg="Registration" then
		Response.write "Reg"
	elseif confreg="Campus" then
		Response.write "Campus"
	elseif confreg="survey" then
		Response.write "Survey"
	End if
	
		
End if

%>

Now instead of having radio buttons there will be a picture how can i display the content related with campus when a user clicks on campus picture

can you tell me how can i make this happen

todd

jmurrayhead · #4 (**permalink**) May 4th, 2008, 01:33 PM

You could load all the different content into its own <div> with a unique id and style with display: none;:

Code:

<div id="campus1" style="{display: none;}">
    Campus 1 content here
</div>
<div id="campus2" style="{display: none;}>
    Campus 2 content here
</div>

Then using JavaScript, on the onclick event of the image, change the styling on the appropriate <div> and allow that particular div to display.

Your other option, which is probably the best option, is to use AJAX to retrieve the data that you need and load it into the appropriate element on your page.

todd2006 · #5 (**permalink**) May 5th, 2008, 12:04 PM

Code:

<%
ReserveDisplay = "none"
%>

Code:

<script type="text/javascript">
<!--
function changeDiv(the_div,the_change)
 {
	var the_style = getStyleObject(the_div);
	if (the_style != false)
		{
			the_style.display = the_change;
		}
  }


function hideAll()
 {
	changeDiv("reserve", "none");
 }


function getStyleObject(objectId)
{ 
	if (document.getElementById && document.getElementById(objectId))
		{
			return document.getElementById(objectId).style;
		}
	else if (document.all && document.all(objectId))
		{
		return document.all(objectId).style;
		}
	else
		{
		return false;
		}
}

</script>

Code:

<table>
<tbody>
<tr>
<td><img src="/images/reg.gif" onclick="hideAll(); changeDiv('reserve', 'block');"></td>
<td><img src="/images/reg.gif"></td>
<td><img src="/images/reg.gif"></td>
<td><img src="/images/reg.gif"></td>
</tr>

</tbody>
</table>

Code:

<%

Dim getvalues
getvalues=Trim(Request.form("confreg"))

If confreg <> "" then
	IF confreg="Registration" then
	%>
	<div id="reserve" style="display: <%=ReserveDisplay%>;">
	<%
		Response.write "Reg"
	%>
	</div>
	<%
	elseif confreg="Campus" then
		Response.write "Campus"
	elseif confreg="survey" then
		Response.write "Survey"
	End if
	
		
End if

%>

i tried the above code it doesnt work any ideas

todd

jmurrayhead · #6 (**permalink**) May 5th, 2008, 01:23 PM

Elaborate more on the problem. What happens when you click an image? Do you get any JavaScript errors?

todd2006 · #7 (**permalink**) May 5th, 2008, 03:46 PM

hi,

I got it working now but ran into a second problem because of it

now depending on which pic you select it will display that content.

Now when the user select the fourth image he will see a drop down which has all he employees name and when he selects one of them the page will refresh and will show his history

But whats happening is when i click on the 4 image it displays me the drop down box and then when i select one name the page refreshes and the drop down disappears and it shows me the top 4 images i think its not retaining the state

Code:

var ids=new Array('a1','a2','a3','a4');

function switchid(id){	
	hideallids();
	showdiv(id);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i]);
	}		  
}

function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}

<table>
<tbody>
<tr>
<td><a href="javascript:switchid('a1');"><img src="/images/image1.gif" border="0"></a></td>
<td><a href="javascript:switchid('a2');"><img src="/images/image2.gif" border="0"></a></td>
<td><a href="javascript:switchid('a3');"><img src="/images/image3.gif" border="0"></a></td>
<td><a href="javascript:switchid('a4');"><img src="/images/image4.gif" border="0"></a></td>
</tr>
</tbody>
</table>


<div id='a1' style="display:none;">
</div>

<div id='a2' style="display:none;">
</div>


<div id='a3' style="display:none;">
</div>


<div id='a4' style="display:none;">
<select name="empopt" id="empopt" onChange="this.form.action = '<%=Request.ServerVariables("Script_Name")%>'; this.form.submit();">
<option value="">Select a name</option>
<%
If Not rs.eof Then
Do While Not rs.eof 
%>
<option value="<%=rs("Id")%>" <%if Trim(rs("Id"))=Trim(Request.Form("empopt")) then 
Response.Write "selected" end if%> ><%=rs("Name")%></option>
<%
rs.movenext
Loop
End If

rs.close
Set rs=Nothing

%>

</select>

<%

Dim getempopt
getempopt=Trim(Request.form("empopt"))

If getempopt <> "" then
	Response.write "content goes here"
End if
%>

</div>

any idea how to fix it.

todd

jmurrayhead · #8 (**permalink**) May 5th, 2008, 03:51 PM

Yeap, because you're performing a form post, the page refreshes and the whole thing is reloaded.

Two options:

Use AJAX: the page never completely refreshes, just updates the areas that need it

Use ASP to check if the select box has a selected value (i.e. If LenRequest.Form("empopt") > 0 Then)

By performing this check, you can then decide whether or not to display specific divs.

todd2006 · #9 (**permalink**) May 5th, 2008, 04:10 PM

Jmurryhead,

I tried it like this

Code:

var ids=new Array('a1','a2','a3','a4');

function switchid(id){	
	hideallids();
	showdiv(id);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i]);
	}		  
}

function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
	//safe function to show an element with a specified id
		  
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}

<table>
<tbody>
<tr>
<td><a href="javascript:switchid('a1');"><img src="/images/image1.gif" border="0"></a></td>
<td><a href="javascript:switchid('a2');"><img src="/images/image2.gif" border="0"></a></td>
<td><a href="javascript:switchid('a3');"><img src="/images/image3.gif" border="0"></a></td>
<td><a href="javascript:switchid('a4');"><img src="/images/image4.gif" border="0"></a></td>
</tr>
</tbody>
</table>


<div id='a1' style="display:none;">
</div>

<div id='a2' style="display:none;">
</div>


<div id='a3' style="display:none;">
</div>


<div id='a4' style="display:none;">
<select name="empopt" id="empopt" onChange="this.form.action = '<%=Request.ServerVariables("Script_Name")%>'; this.form.submit();">
<option value="">Select a name</option>
<%
If Not rs.eof Then
Do While Not rs.eof 
%>
<option value="<%=rs("Id")%>" <%if Trim(rs("Id"))=Trim(Request.Form("empopt")) then 
Response.Write "selected" end if%> ><%=rs("Name")%></option>
<%
rs.movenext
Loop
End If

rs.close
Set rs=Nothing

%>

</select>

<%

Dim getempopt
getempopt=Trim(Request.form("empopt"))


If Len(Request.Form("empopt") > 0) then
	Response.write "content goes here"
End if
%>

</div>

same thing it doesnt display the drop down after the value is selected

thank you so much for all your help all the time

todd

jmurrayhead · #10 (**permalink**) May 5th, 2008, 05:15 PM

It's because the style is intially set to display:none;

This is where you need to do the conditional:

Code:

If Len(Request.Form("empopt") > 0) Then
    <div id='a4'>
Else
    <div id='a4' style="display:none;">
End If

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Discuss "display problem" in the JavaScript Programming forum.

JavaScript Programming - Javascript is a cross-browser client-side scripting language. Discuss Javascript and AJAX related scripts here.