Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Could someone help me in enhancing this code 1

Status
Not open for further replies.
lcs01

lcs01

Programmer
Aug 2, 2006
182
US
Hi, Experts,

I wrote a piece of html/javascript code, which does following:

1) if you select a country name other than USA, then you need to enter a state/province name;
2) if you select USA, then you need to pick a state name from a dropdown list.

Here is my code:

Code: 
<HTML> <HEAD> <TITLE>Intelligent Forms</TITLE>
<SCRIPT>
function change(userInput) {
  if(userInput.value == 'usa') {
    StateDiv2.style.visibility='hidden';
    StateDiv1.style.visibility='visible';
    mainform.state1.focus();
  }
  else {
    StateDiv1.style.visibility='hidden';
    StateDiv2.style.visibility='visible';
    mainform.state2.focus();
  }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="mainform">
  Select a country
  <select name="country" onclick="change(this);">
    <option value="cv1">Country 1</option>
    <option value="cv2">Country 2</option>
    <option value="usa">USA</option>
    <option value="cv4">Country 4</option>
  </select>
  <DIV ID="StateDiv1" style="visibility:hidden">
    <LABEL FOR="state1">
    State/Province:
    <select name="statename">
    <option value="sv1">Select a State</option>
    <option value="sv2">MA</option>
    <option value="sv3">NH</option>
    <option value="sv4">NY</option>
    </select>
    </LABEL>
  </DIV>
  <DIV ID="StateDiv2" style="visibility:visible">
    <LABEL FOR="state2">
      State/Province: <input name="pn"/>
    </LABEL>
  </DIV>
  <BR>
  <INPUT TYPE="SUBMIT">
  <INPUT TYPE="RESET">
</FORM>
</BODY> </HTML>

Bascially, the above code works OK, except one thing:

The POSITION of the State/Province row is NOT fixed on the screen. Please have a test run and you'll see what I mean.

Is there a way to fix its position? Thank you for your help.
 
Sort by date Sort by votes
First, lets fix this error:

Code: 
<LABEL FOR="state1">
<LABEL FOR="state2">

The for= should contain the id of the object that the label is for.

In your case, you have no objects with id=state1 or state2, and that is causing a javascript error.

To fix this, you really don't need to put the for attrubute, just take that out.

<LABEL FOR="state1">
<LABEL FOR="state2">


[monkey][snake] <.
 
Upvote 0 Downvote
Thank you, monksnake, for your help.

But I did not get any js error at all. And if 'FOR="state1"' was removed, how would 'mainform.state1.focus();' work?

Thanks again for your help.
 
Upvote 0 Downvote
The way these are written,

mainform.state1.focus();

The object to gain focus is going to be under <form name="mainform"> and that object will have a name="state1".

I do have to apoloigize, this line I said didn't make any sense:
me said:
In your case, you have no objects with id=state1 or state2, and that is causing a javascript error.
Click to expand...

That's not causing a javascript error, it can't. But, I am getting a JS because of these 2 lines

mainform.state1.focus();
mainform.state2.focus();




[monkey][snake] <.
 
Upvote 0 Downvote
Name this state2

<input name="pn"/>


Name this state1

<select name="statename">


[monkey][snake] <.
 
Upvote 0 Downvote
Thank you, monksnake, for you advice.

But what about the position problem?

 
Upvote 0 Downvote
I had to rewrite your code, I was getting scared.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head> 
<title>Intelligent Forms</title>
<script type="text/javascript">
function change(userInput) {
  if (userInput.value == 'usa') {
    document.getElementById("StateDiv2").style.display = 'none';
    document.getElementById("StateDiv1").style.display = 'block';
    document.getElementById("stateNameDD").focus();
  }
  else {
    document.getElementById("StateDiv1").style.display = 'none';
    document.getElementById("StateDiv2").style.display = 'block';
    document.getElementById("stateProvText").focus();
  }
}
</script>
<style type="text/css">
div.rowDiv {
   height:25px;
   margin:0px 0px 10px 0px;
}

div#stateDiv1 {
   display:none;   
}
</style>
</head>
<body>
<form id="mainform" method="post" action="test2.html">
  <div class="rowDiv">
     Select a country
     <select id="countryDD" onchange="change(this)">
       <option value="cv1">Country 1</option>
       <option value="cv2">Country 2</option>
       <option value="usa">USA</option>
       <option value="cv4">Country 4</option>
     </select>
  </div>   
  <div id="stateDiv1" class="rowDiv">
    State/Province:
    <select id="stateNameDD">
       <option value="sv1">Select a State</option>
       <option value="sv2">MA</option>
       <option value="sv3">NH</option>
       <option value="sv4">NY</option>
    </select>
  </div>
  <div id="StateDiv2" class="rowDiv">
     State/Province:
     <input type="text" id="stateProvText" />
  </div>
  <div>
    <input type="submit" />
    <input type="reset" />
  </div>  
</form>
</body>
</html>

The reason the position is messed up is because you are using the CSS visibility. With visibility, the stuff you hide will still take up space, but you can't see it. The state dropdown box is always right where it appears, to fix that you use the CSS display property and ,in my case set a fixed height and bottom margin on divs that contain the things you hide and show.


[monkey][snake] <.
 
Upvote 0 Downvote
Thank you so much, monksnake!

I'll use your code as base and go from there. I may come back for more questions later.

Again, thank you, monksnake. Your code looks so nice.
 
Upvote 0 Downvote
I do have more questions. :)

I modified your code a little bit by adding table tags (the part omitted here is the SAME):

Code: 
<form id="mainform" method="post" action="test2.html">
[COLOR=red]<table border=1 align=center>
<tr><td>[/color]
  <div class="rowDiv">
     Select a country
     <select id="countryDD" onchange="change(this)">
       <option value="cv1">Country 1</option>
       <option value="cv2">Country 2</option>
       <option value="usa">USA</option>
       <option value="cv4">Country 4</option>
     </select>
  </div>
[COLOR=red]</td></tr>
<tr><td>[/color]
  <div id="stateDiv1" class="rowDiv">
    State/Province:
    <select id="stateNameDD">
       <option value="sv1">Select a State</option>
       <option value="sv2">MA</option>
       <option value="sv3">NH</option>
       <option value="sv4">NY</option>
    </select>
  </div>
[COLOR=red]</td></tr>
<tr><td>[/color]
  <div id="StateDiv2" class="rowDiv">
     State/Province:
     <input type="text" id="stateProvText" />
  </div>
[COLOR=red]</td></tr>
<tr><td align=center>[/color]
  <div>
    <input type="submit" />
    <input type="reset" />
  </div>
[COLOR=red]</td></tr>
</table>[/color]
</form>

The above code works ok. But it would look nicer if each row can be splitted into TWO columns, i.e. "Select a country"/"State/Province" in the left column, while the country dropdown list and states dropdown/input text fields in the right column. But I don't know how to arrange those table tags along with <div></div>.

Would you please help? My experiment code is too ugly to post here.

Thank you!
 
Upvote 0 Downvote
I just did more research on this. Is it true that I can only implement this using css::div.class instead of table tags? That would be a headache!
 
Upvote 0 Downvote
To be honest, it's not considered good practice to use tables when they aren't needed.

Your best bet is to use the span/div tags and look into CSS and floating elements.



[monkey][snake] <.
 
Upvote 0 Downvote
Hi, monksnake,

I just found out that your code only works with IE. It does not work with firefox 1.5.

I tried twisting your code a bit, but it did not work. Would you please modify it so that it can work with both browsers?

Thank you very much.
 
Upvote 0 Downvote
The problem is right here:
Code: 
<div id="[!]s[/!]tateDiv1" class="rowDiv">

In the javascript the id is referenced as StateDiv1 not stateDiv1, so
change id="stateDiv1" to

id="StateDiv1" and all will be well.


[monkey][snake] <.
 
Upvote 0 Downvote
Monksnake,

First of all, thank you again for your excellent help. I also want to tell you that I have successfully modified your codes using div tags and floating elements. They now look very nice in IE (not in firefox,though. But I'll worry that later).

However, I do have further questions about the sample code you posted on 18 Jun 07 17:33.

Here is what I want to accomplish:

** On the page of your sample code displays, a user picks USA so he gets a state dropdown list with the first choice as "Pick a State".

** At this point, the user clicks submit button w/o actually pick a state. So on the next page, how do I make the state dropdown menu as a default? The 'USA' is already a default shown in Country field, which I know how to implement.

I have tried onLoad and onFocus, neither worked. I also tried to implement the css code dynamically, which is somewhat like this in perl:

Code: 
my $sty = &getStyle;
# something here
# ......
# ......
print   $q->start_html(-style=>{src=>'/styles/msf_style.css',-code=>"$sty"},-script=>$jscode);
# something here
# ......
# ......

sub getStyle {
  my $sty;
  my @cgiArr = $q->param();
  my $val = $q->param('cname');
  if($#cgiArr > -1 && $val eq 'usa') { # USA is picked
    $sty = <<ENDOFSTY;
div#StateDiv2 { display:none; }
ENDOFSTY
  }
  else {
    $sty = <<ENDOFSTY;
div#StateDiv1 { display:none; }
ENDOFSTY
  }
  return $sty;
}

But it did not work either.

In addition, could you please explain to me what the difference between div.StateDiv1 and div#StateDiv1?
 
Upvote 0 Downvote
At this point, the user clicks submit button w/o actually pick a state. So on the next page, how do I make the state dropdown menu as a default? The 'USA' is already a default shown in Country field, which I know how to implement.
Click to expand...

You can force them to pick a state by putting a validation check on the onsubmit of the form.

You can make the state dropdown as default by running the function change on the onload.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head> 
<title>Intelligent Forms</title>
<script type="text/javascript">
[!]
function validationCheck() {
   if (document.getElementById('countryDD').value == "usa") {
      if (document.getElementById("stateNameDD").value == "sv1") {
         alert("Please select a state.");
         document.getElementById("stateNameDD").focus();
         return false;
      }
   }
   return true;
}
[/!]
function change(userInput) {
  if (userInput.value == 'usa') {
    document.getElementById("StateDiv2").style.display = 'none';
    document.getElementById("StateDiv1").style.display = 'block';
    document.getElementById("stateNameDD").focus();
  }
  else {
    document.getElementById("StateDiv1").style.display = 'none';
    document.getElementById("StateDiv2").style.display = 'block';
    document.getElementById("stateProvText").focus();
  }
}
</script>
<style type="text/css">
div.rowDiv {
   height:25px;
   margin:0px 0px 10px 0px;
}

div#stateDiv1 {
   display:none;   
}
</style>
</head>
<body [!]onload="change(document.getElementById('countryDD')"[/!]>
<form id="mainform" method="post" action="test2.html" [!]onsubmit="return validationCheck()"[/!]>
  <div class="rowDiv">
     Select a country
     <select id="countryDD" onchange="change(this)">
       <option value="cv1">Country 1</option>
       <option value="cv2">Country 2</option>
       <option value="usa">USA</option>
       <option value="cv4">Country 4</option>
     </select>
  </div>   
  <div id="stateDiv1" class="rowDiv">
    State/Province:
    <select id="stateNameDD">
       <option value="sv1">Select a State</option>
       <option value="sv2">MA</option>
       <option value="sv3">NH</option>
       <option value="sv4">NY</option>
    </select>
  </div>
  <div id="StateDiv2" class="rowDiv">
     State/Province:
     <input type="text" id="stateProvText" />
  </div>
  <div>
    <input type="submit" />
    <input type="reset" />
  </div>  
</form>
</body>
</html>


In addition, could you please explain to me what the difference between div.StateDiv1 and div#StateDiv1?
Click to expand...

div.StateDiv1 is used when a div has a class name equal to StateDiv1, so that div would look like this:

Code: 
<div [!]class[/!]="StateDiv1">blah blah blah</div>

div#StateDiv1 is used when a div has an id equal to StateDiv1, so that div would look like this:

Code: 
<div [!]id[/!]="StateDiv1">blah blah blah</div>





[monkey][snake] <.
 
Upvote 0 Downvote
Thank you so much, monksnake!

And sorry for not getting to you earlier, 'cause I was dragged away to work on other emergent tasks for the last couple days.

Again, thank you! You are the best!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
707
bdwilcox
bdwilcox
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
773
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
717
PeDa
PeDa
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top