How can I format <div> fields?

@celia05esDec 21.2004

Hello,
I have the following code that works perfectly ….. except that the fields are not correctly formatted.
If you try to execute it you will see, for instance, that the comments, the fields are not aligned under each other.
I don’t know how to do it! I have tried to enclose the form in the <table> tag but it does not work.
And there is something “funny” as well, I would like the following comment: “Número máximo de conexiones” AND the field to be on the same line…. but it is not!!!!

Could someone help me with it?
Many thanks

=================================
<html>
<head>
<title></title>
<style type=”text/css”>
<!–
#menu {
position:relative;
font-family: Arial, Helvetica, sans-serif;
width:400px;
}
–>
</style>
<script language=”JavaScript” type=”text/JavaScript”>
subcol=’white’;//El bgcolor de los sub-enlaces
indent=20;//La indentacion a la izquiereda en pixels
function coll()
{
var dd=document.getElementById(‘menu’).getElementsByTagName(‘div’);
for (var i=1;i<dd.length;i=i+2)
{
dd~~[i]~~.style.position=’relative’;
dd~~[i]~~.style.display=’none’;
dd~~[i]~~.style.backgroundColor=subcol;
dd~~[i]~~.style.left=indent+’px’;
}
}

}
}
onload=coll;
function formValid()
{
alert(“formValid”);
document.forms[0].submit();
}

</script>
</head>
<body>
<form action=”” method=post>
<P>Contraseña:
<input type=text name=”password” tabindex=1 maxlength=31 >
<!– Menu –>
<div id=”menu”>
<bl>
<%
String type=”1″;
if (type.equals(“1”)) // tipo = 2 => Service A cannot exist
{
%>
<!– Service A –>
<div><li><a href=”#” id=”L1″ tabindex=1 onclick=”activ(this)”>ServiceA</a><br>
<div>
Contraseña túnel:<input type=text name=”name” tabindex=2 max
length=15 ><br>
Salvad la contraseña?:
<input type=”Radio” name=”radioa” tabindex=4 value=”si” >Si
<input type=”Radio” name=”radioa” tabindex=5 value=”no” checked>No
</div>
</div>
<!– FIN Service A –>
<%
}
String usu=”Msisdn”;
String siz=”18″;
if (!type.equals(“1”))
{
usu=”Usuario”;

siz=”15″;
}
%>
<!– Service B –>
<br>
<div><li><a href=”#” onclick=”activ(this)” tabindex=4>ServiceB</a><
br>
<div>
<%=usu%>:</td><td><input type=text name=”usu” tabindex=2 maxlength=<%=siz%

> ><br>
* Número máximo de conexiones:<input type=text name=”con_max”
tabindex=3 maxlength=10 ><br>
* Autenticación por clave?:
<input type=”Radio” name=”c_auth” tabindex=4 value=”si” checked>Si
<input type=”Radio” name=”c_auth” tabindex=5 value=”no” >No
<br>
* Autenticación por MSISDN llamante?:
<input type=”Radio” name=”a_auth” tabindex=4 value=”si” checked>Si
<input type=”Radio” name=”a_auth” tabindex=5 value=”no” >No
<br>
</div>
</div>
<!– FIN Servicios No Externos –>
</bl>
</div>
<!– END Menu –>
<input type=hidden name=”generico1″ maxlength=32 value=”0″>
<input type=hidden name=”generico2″ maxlength=32 value=”0″>
<input type=hidden name=”accesos_validos” maxlength=64 tabindex=10 value=”0″>
<input onclick=formValid() type=button value=Alta name=Submit tabindex=11>
<input onblur=focusField() onclick=del() type=button value=Borrar tabindex=12>
</form>
</body>
</html>

to post a comment

JavaScript

50 Comments(s) _↴

@Warren86Dec 21.2004 — #Best I can do with the time available.

<html>

<head>

<title></title>

<style type="text/css">



</style>

<script language="JavaScript" type="text/JavaScript">

subcol='white';//El bgcolor de los sub-enlaces

indent=20;//La indentacion a la izquiereda en pixels

function coll()

{

var dd=document.getElementById('menu').getElementsByTagName('div');

for (var i=1;i<dd.length;i=i+2)

{

dd[i].style.position='relative';

dd[i].style.display='none';

dd[i].style.backgroundColor=subcol;

dd[i].style.left=indent+'px';

}

}

function tab(w)

{

var d=w.parentNode.getElementsByTagName('div')[0];

if (d.style.display=='none')

{

document.getElementById('L1').focus();

}

}

function activ(w)

{

var d=w.parentNode.getElementsByTagName('div')[0];

if(d.style.display=='none')

{

coll();d.style.display='inline';

}

else

{

d.style.display='none';

}

}

onload=coll;

function formValid()

{

alert("formValid");

document.forms[0].submit();

}

</script>

</head>

<body>

<form action="" method=post>

<P>Contraseña:

<input type=text name="password" tabindex=1 maxlength=31 >



<div id="menu">

<bl>

<%

String type="1";

if (type.equals("1")) // tipo = 2 => Service A cannot exist

{

%>



<div><li><a href="#" id="L1" tabindex=1 onclick="activ(this)">ServiceA</a><br>

<div>

Contraseña túnel:<input type=text name="name" tabindex=2 max

length=15 ><br>

Salvad la contraseña?:

<input type="Radio" name="radioa" tabindex=4 value="si" >Si

<input type="Radio" name="radioa" tabindex=5 value="no" checked>No

</div>

</div>



<%

}

String usu="Msisdn";

String siz="18";

if (!type.equals("1"))

{

usu="Usuario";

siz="15";

}

%>



<br>

<div><li><a href="#" onclick="activ(this)" tabindex=4>ServiceB</a><br>

<div>

<%=usu%>:<input type=text name="usu" tabindex=2 maxlength=<%=siz%><br>

* Número máximo de conexiones: <input type=text name="con_max"

tabindex=3 maxlength=10 ><br>

* Autenticación por clave?:

<input type="Radio" name="c_auth" tabindex=4 value="si" checked>Si

<input type="Radio" name="c_auth" tabindex=5 value="no" >No

<br>

* Autenticación por MSISDN llamante?:

<input type="Radio" name="a_auth" tabindex=4 value="si" checked>Si

<input type="Radio" name="a_auth" tabindex=5 value="no" >No

<br>

</div>

</div>



</bl>

</div>



<input type=hidden name="generico1" maxlength=32 value="0">

<input type=hidden name="generico2" maxlength=32 value="0">

<input type=hidden name="accesos_validos" maxlength=64 tabindex=10 value="0">

<input onclick=formValid() type=button value=Alta name=Submit tabindex=11>

<input onblur=focusField() onclick=del() type=button value=Borrar tabindex=12>

</form>

</body>

</html>

@celia05esauthorDec 21.2004 — #Thank you very much for your quick answer... the output is a lot better than mine!

But.... do you think it would be possible to have all the fields aligned too?

The output is now for ServiceB:

Msisdn:<field>

* Numero maximo de conexiones: <field>

* Authenticacion por clave: <si><no>

* Authenticacion por MSISDN llamante: <si><no>

Is there a way to have:

Msisdn: <field>

* Numero maximo de conexiones: <field>

* Authenticacion por clave: <si><no>

* Authenticacion por MSISDN llamante: <si><no>

@celia05esauthorDec 21.2004 — #Sorry... I did not format it well:

I meant all the fields under each other!

@celia05esauthorDec 21.2004 — #By the way, do you know how I could check what section is active?

I need to know that in order to be able to validate.

THanks

@Warren86Dec 21.2004 — #Yes. I will fix the alignment. Give me some time. Regarding validation you could use onfocus(), or on blur()when that field has focus you can call a validation function, or when it loses focus, meaning the user tabbed to the next field.

@celia05esauthorDec 21.2004 — #No problem!!! That's great you can help me! Thank you.

As far as the validation is concerned, I was doing a global validation and not an individual one.... but I guess it is easier to validate each time you enter a field. I will do it this way ...but just out of curiosity, how would you do it? I mean, how would you check which section is active if you had to do the validation once the user presses the submit button?

@celia05esauthorDec 21.2004 — #Well, I am affraid I will have to use the global validation..

If I try the "onblur" there is no way I can change link.

FOr instance, suppose I have chosen ServiceB... if Msisdn is empty, an alert should be given. Now, everytime the cursor moves away the alert will be given if it is empty. To change to ServiceA I would have to enter a value in Msisdn... and it does not seem right.

@Warren86Dec 21.2004 — #Well, I don't know. Take a look at it and test it. I did add the onblur events. I hope I didn't mangle it too much. The only easy way to align things is with a table. You had so many nested divs I didn't know where to begin. I think you will have to deal with the background color style you were changing, and the whole Style Section in the Head isn't used now. Overall, it looks fine to me. Hope you agree.

<html>

<head>

<title></title>

<style type="text/css">



</style>

<script language="JavaScript" type="text/JavaScript">

subcol='white';//El bgcolor de los sub-enlaces

indent=20;//La indentacion a la izquiereda en pixels

function activ(ID){

isService = document.getElementById(ID);
  if (isService.style.display == 'none'){isService.style.display = 'inline'}
  else {isService.style.display = 'none'}

}

function checkInput(isVal){

alert(isVal)

}

function coll()

{

var dd=document.getElementById('menu').getElementsByTagName('div');

for (var i=1;i<dd.length;i=i+2)

{

dd[i].style.position='relative';

dd[i].style.display='none';

dd[i].style.backgroundColor=subcol;

dd[i].style.left=indent+'px';

}

}

function tab(w)

{

var d=w.parentNode.getElementsByTagName('div')[0];

if (d.style.display=='none')

{

document.getElementById('L1').focus();

}

}

function formValid()

{

alert("formValid");

document.forms[0].submit();

}

</script>

</head>

<body>

<form action="" method=post>

<Table width=600 border=0>

<TR>

<TD>Contraseña:</TD>

<TD align='right' colspan='2'><input type=text name="password" tabindex=1 maxlength=31 onblur="checkInput(this.value)"></TD>

</TR>

</Table>



<bl>

<%

String type="1";

if (type.equals("1")) // tipo = 2 => Service A cannot exist

{

%>



<Table width=600 border=0>

<TR><TD><li><a href="#" id="L1" tabindex=1 onclick="activ('serviceA')">ServiceA</a></TD></TR>

</Table>

<Div id='serviceA' style='display:none'>

<Table width=600 border=1>

<TR>

<TD>Contraseña túnel:</TD><TD align='right' colspan='2'><input type=text name="name" tabindex=2 max

length=15 onblur="checkInput(this.value)"></TD></TR>

<TR><TD>Salvad la contraseña?:</TD>

<TD align=right><input type="Radio" name="radioa" tabindex=4 value="si" >Si </TD>

<TD width=15% align=right><input type="Radio" name="radioa" tabindex=5 value="no" checked>No</TD>

</TR>

</Table>

</Div>



<%

}

String usu="Msisdn";

String siz="18";

if (!type.equals("1"))

{

usu="Usuario";

siz="15";

}

%>



<Table width=600 border=0>

<TR><TD><li><a href="#" onclick="activ('serviceB')" tabindex=4>ServiceB</TD></TR>

</Table>

<Div id='serviceB' style='display:none'>

<Table width=600 border=1>

<TR>

<TD><%=usu%>:</TD><TD align='right' colspan='2'><input type=text name="usu" tabindex=2 maxlength=<%=siz% onblur="checkInput(this.value)"></TD></TR>

<TR><TD>* Número máximo de conexiones:</TD><TD align='right' colspan='2'><input type=text name="con_max"

tabindex=3 maxlength=10 onblur="checkInput(this.value)"></TD></TR>

<TR>

<TD>* Autenticación por clave?:</TD>

<TD align=right><input type="Radio" name="c_auth" tabindex=4 value="si" checked>Si</TD>

<TD width=15% align=right><input type="Radio" name="c_auth" tabindex=5 value="no" >No</TD>

</TR>

<TR>

<TD>* Autenticación por MSISDN llamante?:</TD>

<TD align=right><input type="Radio" name="a_auth" tabindex=4 value="si" checked>Si</TD>

<TD width=15% align=right><input type="Radio" name="a_auth" tabindex=5 value="no" >No</TD>

</TR>

</Table>

</Div>



</bl>



<input type=hidden name="generico1" maxlength=32 value="0">

<input type=hidden name="generico2" maxlength=32 value="0">

<input type=hidden name="accesos_validos" maxlength=64 tabindex=10 value="0">

<input onclick=formValid() type=button value=Alta name=Submit tabindex=11>

<input onblur=focusField() onclick=del() type=button value=Borrar tabindex=12>

</form>

</body>

</html>

@celia05esauthorDec 21.2004 — #Well, thank you very much. I will test it. Now, executing it I am having a syntax error (Tag <%= not ended) which I will correct hopefully soon.

@Warren86Dec 21.2004 — #I didn't receive any errors. Is it in that %% code you are using?

@Warren86Dec 21.2004 — #I forgot to set all the table borders to 0. You'll need to do that too. Sorry, I overlooked that.

@celia05esauthorDec 21.2004 — #I have tested it.... and the parameters are aligned!!! Great

Now, both links are shown at the same time!!!

When I click on "A" section A is shown.... but when I click on "B" section A should be hidden and section "B" shown and vice-versa.

Apart from that it works just fine!!

My problem with the "onblur" thing was that if the field is incorrect I focus on it again.... which means that if I want to change service, the blur routine will be fired again!

@Warren86Dec 21.2004 — #I can fix the display manner. I'm sorry I didn't notice that in the beginning. I'll remove the onblurs then. I honestly don't understand what you mean, but that's okay. I'll fix the display problem, and respond soon.

@celia05esauthorDec 21.2004 — #The problem is that it has to work with Netscape too.... Now the only thing missing is that if I click on "A" I need the A section to be displayed and the B section to be hidden. When I click on "B" the opposite.

Sorry to bother you so much.

@Warren86Dec 21.2004 — #Okay. Try this. I eliminated the onblur code. And I think the "toggling" works the way you want it to. I put variables in the validate function so you can put the rest of your code there to check the text fiels.

<html>

<head>

<title></title>

<script language="JavaScript" type="text/JavaScript">

subcol='white';//El bgcolor de los sub-enlaces

indent=20;//La indentacion a la izquiereda en pixels

function activ(currID,oppID){

currService = document.getElementById(currID);
  if (currService.style.display == 'none')
   {
   currService.style.display = 'inline';
   isOpp = document.getElementById(oppID);
   if (isOpp.style.display == 'inline'){isOpp.style.display = 'none'}
   }
  else {
   currService.style.display = 'none'
   isOpp = document.getElementById(oppID);
   if (isOpp.style.display == 'inline'){isOpp.style.display = 'none'}
   }

}

function coll()

{

var dd=document.getElementById('menu').getElementsByTagName('div');

for (var i=1;i<dd.length;i=i+2)

{

dd[i].style.position='relative';

dd[i].style.display='none';

dd[i].style.backgroundColor=subcol;

dd[i].style.left=indent+'px';

}

}

function tab(w)

{

var d=w.parentNode.getElementsByTagName('div')[0];

if (d.style.display=='none')

{

document.getElementById('L1').focus();

}

}

function formValid(){

isPass = document.forms[0].password.value;
  isName = document.forms[0].name.value;
  isUsu = document.forms[0].usu.value;
  isMax = document.forms[0].con_max.value;
 
  alert(isPass+", "+isName+", "+isUsu+", "+isMax)
  // You can validate each text field here;
 
  document.forms[0].submit();

}

</script>

</head>

<body>

<form action="" method=post>

<Table width=600 border=0>

<TR>

<TD>Contraseña:</TD>

<TD align='right' colspan='2'><input type=text name="password" tabindex=1 maxlength=31></TD>

</TR>

</Table>



<bl>

<%

String type="1";

if (type.equals("1")) // tipo = 2 => Service A cannot exist

{

%>



<Table width=600 border=0>

<TR><TD><li><a href="#" id="L1" tabindex=1 onclick="activ('serviceA','serviceB')">ServiceA</a></TD></TR>

</Table>

<Div id='serviceA' style='display:none'>

<Table width=600 border=0>

<TR>

<TD>Contraseña túnel:</TD><TD align='right' colspan='2'><input type=text name="name" tabindex=2 max

length=15></TD></TR>

<TR><TD>Salvad la contraseña?:</TD>

<TD align=right><input type="Radio" name="radioa" tabindex=4 value="si" >Si </TD>

<TD width=15% align=right><input type="Radio" name="radioa" tabindex=5 value="no" checked>No</TD>

</TR>

</Table>

</Div>



<%

}

String usu="Msisdn";

String siz="18";

if (!type.equals("1"))

{

usu="Usuario";

siz="15";

}

%>



<Table width=600 border=0>

<TR><TD><li><a href="#" onclick="activ('serviceB','serviceA')" tabindex=4>ServiceB</TD></TR>

</Table>

<Div id='serviceB' style='display:none'>

<Table width=600 border=0>

<TR>

<TD><%=usu%>:</TD><TD align='right' colspan='2'><input type=text name="usu" tabindex=2 maxlength=<%=siz%></TD></TR>

<TR><TD>* Número máximo de conexiones:</TD><TD align='right' colspan='2'><input type=text name="con_max"

tabindex=3 maxlength=10></TD></TR>

<TR>

<TD>* Autenticación por clave?:</TD>

<TD align=right><input type="Radio" name="c_auth" tabindex=4 value="si" checked>Si</TD>

<TD width=15% align=right><input type="Radio" name="c_auth" tabindex=5 value="no" >No</TD>

</TR>

<TR>

<TD>* Autenticación por MSISDN llamante?:</TD>

<TD align=right><input type="Radio" name="a_auth" tabindex=4 value="si" checked>Si</TD>

<TD width=15% align=right><input type="Radio" name="a_auth" tabindex=5 value="no" >No</TD>

</TR>

</Table>

</Div>



</bl>



<input type=hidden name="generico1" maxlength=32 value="0">

<input type=hidden name="generico2" maxlength=32 value="0">

<input type=hidden name="accesos_validos" maxlength=64 tabindex=10 value="0">

<input onclick=formValid() type=button value=Alta name=Submit tabindex=11>

<input onblur=focusField() onclick=del() type=button value=Borrar tabindex=12>

</form>

</body>

</html>

@celia05esauthorDec 21.2004 — #It works just fine with Explorer but now it does not work with Netscape.

Once a link is selected it stays (may be the "hidden" stuff only works with Explorer?)

@celia05esauthorDec 21.2004 — #As far as the validation is concerned, I am still not sure how to find out which section is active. For instance, if ServiceA is active there is nothing to do (since no field is compulsary) but if ServiceB is active there are two compulsary fields (msisdn and con_max).

I cannot check if there is a value since if ServiceB is not active it will not be relevant.

Do you see what is my problem?

@Warren86Dec 21.2004 — #Yes. Just create and set a global variable.

Something like:

var activeService = ""

function activ(currID,oppID){

currService = document.getElementById(currID);
  if (currService.style.display == 'none')
   {
   currService.style.display = 'inline';
   isOpp = document.getElementById(oppID);
   if (isOpp.style.display == 'inline'){isOpp.style.display = 'none'}
   }
  else {
   currService.style.display = 'none'
   isOpp = document.getElementById(oppID);
   if (isOpp.style.display == 'inline'){isOpp.style.display = 'none'}
   }
  activeService = currService;

}

You can then check the value of activeService, in another function, it will be either 'serviceA' or 'serviceB'

@celia05esauthorDec 21.2004 — #ok, I will try that. I am sure it will work, using a global variable is a good idea.

What about the fact that the "toggling" is not working with Netscape?

Is there a way we can modify it?

@Warren86Dec 21.2004 — #What "hidden" stuff? Do you mean display:none? I'm using the same values you used: 'none' and 'inline'. And all I used is document.getElementById, and that works in Netscape. Many times, in IE only, you don't have to use it, you can address the object directly, like: thisID.src = "", instead of: document.getElementById('thisID').src = ""

So, I have no idea what could be the problem. It sure isn't the intial style declaration in the two divs, simply setting display to none, to avoid using an onload event.

@celia05esauthorDec 21.2004 — #I mean that at the beginning the two links appear.

If the user clicks on ServiceA, the serviceA parameters appears

If the user clicks on ServiceB, ServiceA parameters disappear and ServiceB parameters appear... and so on.

It works that way now with Explorer... but with Netcape, the service parameters remain.

If the user clicks on ServiceA, the serviceA parameters appears

If the user clicks on ServiceB, ServiceA parameters remain and ServiceB parameter appear.

I know it was working previously, so do you think the <table> stuff may have altered something in the way Netscape thinks?

@Warren86Dec 21.2004 — #The only thing I can think of is maybe you have to go the long way on EVERYTHING in that toggle function. Meaning, you can't set a variable to the ID.

currService = document.getElementById(currID);

You would have to use document.getElementById(currID).style.display

in place of that, and similarly replace ALL the other lines that do the same thing.

I honestly have no idea why it won't work. Try testing it with alerts.

Put an alert in the code section that you expect to be executed to see if it is actually running.

function activ(currID,oppID){

currService = document.getElementById(currID);
  if (currService.style.display == 'none')
   {alert()
   currService.style.display = 'inline';
   isOpp = document.getElementById(oppID);
   if (isOpp.style.display == 'inline'){isOpp.style.display = 'none'}
   }
  else {alert()
   currService.style.display = 'none'
   isOpp = document.getElementById(oppID);
   if (isOpp.style.display == 'inline'){isOpp.style.display = 'none'}
   }
  activeService = currService;

}

@Warren86Dec 21.2004 — #Wow, there sure isn't anything unusual about the tables. I purposely kept typing all that documement.getElementById code so that it would work for you.

You know, if you test it with the alert, I'm sure you can isolate the section that isn't working, and then fight with it until it does.

@celia05esauthorDec 21.2004 — #ok, I will try what you suggest and set the alert the whole way.

Thank you very much for your great help.

It is late over here so I might not write again till tomorrow.

Thank you again.

@Warren86Dec 21.2004 — #Okay. You're welcome. Take care. I'm sure you'll get it going.

@celia05esauthorDec 21.2004 — #Well, I have tried with the alert .... and I have not got one thing!

It is quite important that it works in both browsers.

I put the following alerts.... and tested it Netscape and IE... the same alerts came out.... it is just that Netscape does not hide the section when it should!!!

I will need the help of an expert PLEASE!!!

Here is my code with the alerts:

function activ(currID,oppID)

{

alert("Entering activ... currID="+currID+" oppID="+oppID);

currService = document.getElementById(currID);

alert("Display "+currID+"="+currService.style.display);

if (currService.style.display == 'none')

{

currService.style.display = 'inline';

isOpp = document.getElementById(oppID);

alert("Display "+oppID+"="+isOpp.style.display);

if (isOpp.style.display == 'inline')

{

isOpp.style.display = 'none'}

}

else

{

currService.style.display = 'none'

isOpp = document.getElementById(oppID);

alert("Display "+oppID+"="+isOpp.style.display);

if (isOpp.style.display == 'inline')

{

isOpp.style.display = 'none'

}

}

activeService= currID;

}

Now, what do you mean with:
==============================

currService = document.getElementById(currID);

You would have to use document.getElementById(currID).style.display

in place of that, and similarly replace ALL the other lines that do the same thing.
===========================

@Warren86Dec 21.2004 — #Try this:

<html>

<head>

<title></title>

<script language="JavaScript" type="text/JavaScript">

var activeService = ""

function activ(currID,oppID){

currService = document.getElementById(currID);
  if (currService.style.visibility == 'hidden')
   {
   currService.style.visibility = 'visible';
   isOpp = document.getElementById(oppID);
   if (isOpp.style.visibility == 'visible'){isOpp.style.visibility = 'hidden'}
   }
  else {
   currService.style.visibility = 'hidden'
   isOpp = document.getElementById(oppID);
   if (isOpp.style.visibility == 'visible'){isOpp.style.visibility = 'hidden'}
   }
  activeService = currService;

}

function formValid(){

isPass = document.forms[0].password.value;
  isName = document.forms[0].name.value;
  isUsu = document.forms[0].usu.value;
  isMax = document.forms[0].con_max.value;
 
  alert(isPass+", "+isName+", "+isUsu+", "+isMax)
  // You can validate each text field here;
 
  document.forms[0].submit();

}

function init(){

document.getElementById('serviceA').style.visibility = 'hidden'
  document.getElementById('serviceB').style.visibility = 'hidden'

}

window.onload=init;

</script>

</head>

<body>

<form action="" method=post>

<Table width=600 border=0>

<TR>

<TD>Contraseña:</TD>

<TD align='right' colspan='2'><input type=text name="password" tabindex=1 maxlength=31></TD>

</TR>

</Table>



<bl>

<%

String type="1";

if (type.equals("1")) // tipo = 2 => Service A cannot exist

{

%>



<Table width=600 border=0>

<TR><TD><li><a href="#" id="L1" tabindex=1 onclick="activ('serviceA','serviceB')">ServiceA</a></TD></TR>

</Table>

<Div id='serviceA'>

<Table width=600 border=0>

<TR>

<TD>Contraseña túnel:</TD><TD align='right' colspan='2'><input type=text name="name" tabindex=2 max

length=15></TD></TR>

<TR><TD>Salvad la contraseña?:</TD>

<TD align=right><input type="Radio" name="radioa" tabindex=4 value="si" >Si </TD>

<TD width=15% align=right><input type="Radio" name="radioa" tabindex=5 value="no" checked>No</TD>

</TR>

</Table>

</Div>



<%

}

String usu="Msisdn";

String siz="18";

if (!type.equals("1"))

{

usu="Usuario";

siz="15";

}

%>



<Table width=600 border=0>

<TR><TD><li><a href="#" onclick="activ('serviceB','serviceA')" tabindex=4>ServiceB</TD></TR>

</Table>

<Div id='serviceB'>

<Table width=600 border=0>

<TR>

<TD><%=usu%>:</TD><TD align='right' colspan='2'><input type=text name="usu" tabindex=2 maxlength=<%=siz%></TD></TR>

<TR><TD>* Número máximo de conexiones:</TD><TD align='right' colspan='2'><input type=text name="con_max"

tabindex=3 maxlength=10></TD></TR>

<TR>

<TD>* Autenticación por clave?:</TD>

<TD align=right><input type="Radio" name="c_auth" tabindex=4 value="si" checked>Si</TD>

<TD width=15% align=right><input type="Radio" name="c_auth" tabindex=5 value="no" >No</TD>

</TR>

<TR>

<TD>* Autenticación por MSISDN llamante?:</TD>

<TD align=right><input type="Radio" name="a_auth" tabindex=4 value="si" checked>Si</TD>

<TD width=15% align=right><input type="Radio" name="a_auth" tabindex=5 value="no" >No</TD>

</TR>

</Table>

</Div>



</bl>



<input type=hidden name="generico1" maxlength=32 value="0">

<input type=hidden name="generico2" maxlength=32 value="0">

<input type=hidden name="accesos_validos" maxlength=64 tabindex=10 value="0">

<input onclick=formValid() type=button value=Alta name=Submit tabindex=11>

<input onblur=focusField() onclick=del() type=button value=Borrar tabindex=12>

</form>

</body>

</html>

@celia05esauthorDec 21.2004 — #It works!!!!!

Thank you so much!!!! ..... and merry Christmas!

@Warren86Dec 21.2004 — #You're welcome. It's still a mystery to me, but I'll take it. Yes, and a Merry Christmas to you and yours.

@celia05esauthorDec 21.2004 — #One more (and last) thing..... is there a way that the spaces between both links can be deleted. I mean there is:

- ServiceA

Space for the parameters

- ServiceB

Space for the parameters

Could we have:

ServiceA

ServiceB

and once the user clicks on one link have for instance:

ServiceA

parameters

ServiceB

@Warren86Dec 21.2004 — #No. You, see, that's the difference between visibility and display.

Display none, is actually that, but visibility still takes up screen space.

I thought it might work, although I still don't know why, but I'm sorry, obviously changing it back to display:none, won't work in Netscape.

@celia05esauthorDec 21.2004 — #OK, it does not matter really.

THank you very much anyway.

@Warren86Dec 21.2004 — #Okay. Good luck to you.

@celia05esauthorDec 21.2004 — #Hello again,

I just realized there is a "small" problem with activeService.

If I click on "ServiceA" => activeService="ServiceA" and ServiceA is active

If I click again on "ServiceA" => activeService="ServiceA" but ServiceA is not active. activeService shoud be ""

Now I have tried to inicialized activeService in the activ routine is the display is not hidden but it does not seem to work....it is certainly not the place where to initialize it isnt'it?

Any idea?

=================================

function activ(currID,oppID){

currService = document.getElementById(currID);

if (currService.style.visibility == 'hidden')

{

activeService=currID; <== activeService= "ServiceA" or "ServiceB"

currService.style.visibility = 'visible';

isOpp = document.getElementById(oppID);

if (isOpp.style.visibility == 'visible'){isOpp.style.visibility = 'hidden'}

}

else

{

// The link is active so I though I should put activeService=""

activeService="";

currService.style.visibility = 'hidden'

isOpp = document.getElementById(oppID);

if (isOpp.style.visibility == 'visible'){isOpp.style.visibility = 'hidden'}

}

}

@Warren86Dec 21.2004 — #Yes. I understand. Clicking again on one of your links should make activeService = "";

Give me a 15 minutes. I think I know what to do. If not, I won't keep you waiting, I'll let you know and work on it tomorrow.

@Warren86Dec 21.2004 — #I think does it.

<html>

<head>

<title></title>

<script language="JavaScript" type="text/JavaScript">

var activeService = ""

function activ(currID,oppID){

currService = document.getElementById(currID);
  if (currService.style.visibility == 'hidden')
   {
   activeService = currID;
   currService.style.visibility = 'visible';
   isOpp = document.getElementById(oppID);
   if (isOpp.style.visibility == 'visible'){isOpp.style.visibility = 'hidden';}
 
   }
  else {
   currService.style.visibility = 'hidden'
   activeService = "";
   isOpp = document.getElementById(oppID);
   if (isOpp.style.visibility == 'visible'){isOpp.style.visibility = 'hidden'}
 
   }

}

function formValid(){

isPass = document.forms[0].password.value;
  isName = document.forms[0].name.value;
  isUsu = document.forms[0].usu.value;
  isMax = document.forms[0].con_max.value;
 
  alert(activeService) 
 
  //alert(isPass+", "+isName+", "+isUsu+", "+isMax)
  // You can validate each text field here;
 
  //document.forms[0].submit();

}

function init(){

document.getElementById('serviceA').style.visibility = 'hidden'
  document.getElementById('serviceB').style.visibility = 'hidden'

@celia05esauthorDec 22.2004 — #Good morning!!

Well, it sure does the trick!!! Thank you so much!!

Now, before I finish bothering you there are just two little things I would like to ask.....I will not bother you again at least until next year!... I promise!

- 1) You see, depending on a certain variable (called type), serviceA can o cannot be shown. In the code, you will see that there is a statement like: "if (type.equals("1")) => show ServiceA. I know it is not enought because in this case I need: ServiceB to be always shown (and obviously the link cannot be clicked)

- 2) Inicially, i would like to focus on "password" .... but once the link is clicked, is there a way to focus on the first element (for ServiceA to focus on "name" and for ServiceB on "usu")?

Elisabeth

@Warren86Dec 22.2004 — #Good morning Elisabeth. I see you are online. Give me a minute.

@Warren86Dec 22.2004 — #I added the code to take of the focus issue.

Regarding that variable, and eliminating Service A, the only thing I can think of is you'll have to find a way to pass the value of that variable to a new JS global variable.

I set one up as testValue, and added code in the init function to test whether the value of testValue is >= 2, and if so, it hides the table that contains the "Service A" link, clicks the Service B link, and sets the focus to the password field.

I don't know any other way, because I don't know how to test that variable, except using JS.

<html>

<head>

<title></title>

<script language="JavaScript" type="text/JavaScript">

var activeService = "";

var testValue = 2;

function activ(currID,oppID){

currService = document.getElementById(currID);
  if (currService.style.visibility == 'hidden')
   {
   activeService = currID;
   currService.style.visibility = 'visible';
   isOpp = document.getElementById(oppID);
   if (isOpp.style.visibility == 'visible'){isOpp.style.visibility = 'hidden';} 
   if (currID == 'serviceA'){document.forms[0].name.focus()}
   if (currID == 'serviceB'){document.forms[0].usu.focus()}
   }
  else {
   currService.style.visibility = 'hidden'
   activeService = "";
   isOpp = document.getElementById(oppID);
   if (isOpp.style.visibility == 'visible'){isOpp.style.visibility = 'hidden'} 
   }

}

function formValid(){

isPass = document.forms[0].password.value;
  isName = document.forms[0].name.value;
  isUsu = document.forms[0].usu.value;
  isMax = document.forms[0].con_max.value;
 
  //alert(activeService) 
 
  //alert(isPass+", "+isName+", "+isUsu+", "+isMax)
  // You can validate each text field here;
 
  //document.forms[0].submit();

}

function init(){

document.getElementById('serviceA').style.visibility = 'hidden';
  document.getElementById('serviceB').style.visibility = 'hidden';
  document.forms[0].password.focus();
 
  if (testValue >= 2)
   {
   document.getElementById('isA').style.visibility = 'hidden'
   document.links[1].click();
   document.forms[0].password.focus();
   }

}

window.onload=init;

</script>

</head>

<body>

<form action="" method=post>

<Table width=600 border=0>

<TR>

<TD>Contraseña:</TD>

<TD align='right' colspan='2'><input type=text name="password" tabindex=1 maxlength=31></TD>

</TR>

</Table>



<bl>

<%

String type="1";

if (type.equals("1")) // tipo = 2 => Service A cannot exist

{

%>



<Table width=600 border=0 id='isA'>

<TR><TD><li><a href="#" id="L1" tabindex=1 onclick="activ('serviceA','serviceB')">ServiceA</a></TD></TR>

</Table>

<Div id='serviceA'>

<Table width=600 border=0>

<TR>

<TD>Contraseña túnel:</TD><TD align='right' colspan='2'><input type=text name="name" tabindex=2 max

length=15></TD></TR>

<TR><TD>Salvad la contraseña?:</TD>

<TD align=right><input type="Radio" name="radioa" tabindex=4 value="si" >Si </TD>

<TD width=15% align=right><input type="Radio" name="radioa" tabindex=5 value="no" checked>No</TD>

</TR>

</Table>

</Div>



<%

}

String usu="Msisdn";

String siz="18";

if (!type.equals("1"))

{

usu="Usuario";

siz="15";

}

%>



<Table width=600 border=0>

<TR><TD><li><a href="#" onclick="activ('serviceB','serviceA')" tabindex=4>ServiceB</TD></TR>

</Table>

<Div id='serviceB'>

<Table width=600 border=0>

<TR>

<TD><%=usu%>:</TD><TD align='right' colspan='2'><input type=text name="usu" tabindex=2 maxlength=<%=siz%></TD></TR>

<TR><TD>* Número máximo de conexiones:</TD><TD align='right' colspan='2'><input type=text name="con_max"

tabindex=3 maxlength=10></TD></TR>

<TR>

<TD>* Autenticación por clave?:</TD>

<TD align=right><input type="Radio" name="c_auth" tabindex=4 value="si" checked>Si</TD>

<TD width=15% align=right><input type="Radio" name="c_auth" tabindex=5 value="no" >No</TD>

</TR>

<TR>

<TD>* Autenticación por MSISDN llamante?:</TD>

<TD align=right><input type="Radio" name="a_auth" tabindex=4 value="si" checked>Si</TD>

<TD width=15% align=right><input type="Radio" name="a_auth" tabindex=5 value="no" >No</TD>

</TR>

</Table>

</Div>



</bl>



<input type=hidden name="generico1" maxlength=32 value="0">

<input type=hidden name="generico2" maxlength=32 value="0">

<input type=hidden name="accesos_validos" maxlength=64 tabindex=10 value="0">

<input onclick=formValid() type=button value=Alta name=Submit tabindex=11>

<input onblur=focusField() onclick=del() type=button value=Borrar tabindex=12>

</form>

</body>

</html>

@celia05esauthorDec 22.2004 — #THank you so much!!!!

Now, I know I am asking and asking.....but....

Is there a way if testValue=2 that ServiceB inicially is shown and stays shown whatever happens?

@celia05esauthorDec 22.2004 — #The value that testValue should have is un the stack session.

Now, I was thinking that using JSP, I could read the value of that variable and put it in a <form> so it can be read by JS....

But I am wondering if it will not change the document.forms[0] stuff!!

since forms[0] will be the form with the variable!

I suppose I can solve the problem naming each form and using document.<form_name> instead of forms[0].... can't i?

@Warren86Dec 22.2004 — #You can add an "if" test in the toggle function, maybe at the bottom so that if (testVal == 2){document.getElementbyId['serviceB'].style.visibility = 'visible';

So, that no matter what is clicked, the last line always makes Service B visible if the value of testValue = 2

@Warren86Dec 22.2004 — #No, it won't change the form code in the JavaScript. I see you already have several hidden fields at the bottom of the form. Why not just add another one?

@Warren86Dec 22.2004 — #You probably caught it, but it should be like this:

if (testValue == 2){document.getElementbyId('serviceB').style.visibility = 'visible'}

@Warren86Dec 22.2004 — #And you might want to click the link as well:

if (testValue == 2){document.getElementbyId('serviceB').style.visibility = 'visible'; document.links[1].click()}

@celia05esauthorDec 22.2004 — #I just realized that the code you gave me does not work with Netscape.

I mean that if testValue=2, serviceB is shown with Explorer but not with Netcape.

I have tried to add the statement you wrote at the end of the activ function but if still does not work.

I am working on the testValue stuff.

@Warren86Dec 22.2004 — #Well, I give up. It's the same command as all the others: visibility. There's no reason for it to work in one part of a function and not another part. That makes no sense. I give up. Are you using two equal signs? == or just one, it has to be two.

if (testValue == 2){document.getElementbyId('serviceB').style.visibility = 'visible'; document.links[1].click()}

To say that the same command works in only one part of a function and not in another doesn't make any sense.

I give up. Take care.

@celia05esauthorDec 22.2004 — #Dont worry ! Your help has been great ... i will find out something.

Merry Christmas!

@celia05esauthorDec 22.2004 — #Warren,

I don't know if you are still login... just in case...

before <form.....>, I am including a logo....

Now, and only if testValue=2 (case where one ServiceB is shown): it works ok with Netscape but Not with explorer!!! ServiceA parameters (but not the link ServiceA) is shown!!!

============

I am including it : <%@ include file="../includes/logo1.html" %>

logo1.html:

<a href="http://www.lucent.com/"><img border="0" src="../images/logo.gif

" width="179" height="65" align="right" ></a></p>

<p> </p>

<p> </p>

<p font-family="COMIC SANS MS"><center> <B>PROVISIÓN </B></center></p>

<br>

@Warren86Dec 22.2004 — #Look, I'm sorry. I give up. It gets to be too much. I don't care about Netscape, never have, and never will. The only thing I can tell you is if the docuement.links[0].click() isn't working in Netscape, then don't use it, just make the div for that section visibile, which is what I tried to do by "clicking" the link. Then you can set the focus, which would have been done in the toggle code. I'm sorry. That's it for me. And remember, I added an id for the table that holds the "Service B" link. You'll have to manage the visibility of that, too. Take care. I'm finished for the day.

Also in #JavaScript _↴

can't get setInterval to work delete controls using some mouseover with these menu links

Success!

Help @celia05es spread the word by sharing this article on Twitter...

Tweet This

How can I format <div> fields?

50 Comments(s) _↴

Now, what do you mean with:
==============================

in place of that, and similarly replace ALL the other lines that do the same thing.
===========================

Also in #JavaScript _↴

Success!

Social

Version

How can I format <div> fields?

50 Comments(s) ↴

Now, what do you mean with: ==============================

in place of that, and similarly replace ALL the other lines that do the same thing. ===========================

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

50 Comments(s) _↴

Now, what do you mean with:
==============================

in place of that, and similarly replace ALL the other lines that do the same thing.
===========================

Also in #JavaScript _↴