I am having trouble with getting the JavaScript to do what I need it to. I have a form with a country drop down list that has United States or Other; then I have a State field with a list of all 50 states in the US; then I have a text field for people to put what country they live in if they don't live in the United States. What I want to be able to do is if United Sates is selected in the country drop down list I want the "other" text field to be disabled and the state drop down list enabled; then vice versa, if they select other, then the state drop down list is disabled and the "other" text field is enabled.   

Here is the HTML code:   

```
<!DOCTYPE html>
<html>

<head>
<script src="countryValidation.js"></script>
</head>
<body>
<div id="form2">
<form name="createForm" onsubmit="return createValidation();" method="get">
<p>Country:    <select id="country">
            <option value="0">United States</option>
            <option value="1">Other</option>
           </select>&nbsp;*&nbsp;&nbsp;&nbsp;</p>
<p>State:    <select id="state">
          <option value="0">- -Select state- -</option>
          <option value="Alabama">Alabama</option>
          <option value="Alaska">Alaska</option>
          <option value="Arizona">Arizona</option>
          <option value="Arkansas">Arkansas</option>
          <option value="California">California</option>
          <option value="Colorado">Colorado</option>
          <option value="Connecticut">Connecticut</option>
          <option value="Delaware">Delaware</option>
          <option value="Florida">Florida</option>
          <option value="Georgia">Georgia</option>
          <option value="Hawaii">Hawaii</option>
          <option value="Idaho">Idaho</option>
          <option value="Illinois">Illinois</option>
          <option value="Indiana">Indiana</option>
          <option value="Iowa">Iowa</option>
          <option value="Kansas">Kansas</option>
          <option value="Kentucky">Kentucky</option>
          <option value="Louisiana">Louisiana</option>
          <option value="Maine">Maine</option>
          <option value="Maryland">Maryland</option>
          <option value="Massachusetts">Massachusetts</option>
          <option value="Michigan">Michigan</option>
          <option value="Minnesota">Minnesota</option>
          <option value="Mississippi">Mississippi</option>
          <option value="Missouri">Missouri</option>
          <option value="Montana">Montana</option>
          <option value="Nebraska">Nebraska</option>
          <option value="Nevada">Nevada</option>
          <option value="New Hampshire">New Hampshire</option>
          <option value="New Jersey">New Jersey</option>
          <option value="New Mexico">New Mexico</option>
          <option value="New York">New York</option>
          <option value="North Carolina">North Carolina</option>
          <option value="North Dakota">North Dakota</option>
          <option value="Ohio">Ohio</option>
          <option value="Oklahoma">Oklahoma</option>
          <option value="Oregon">Oregon</option>
          <option value="Pennsylvania">Pennsylvania</option>
          <option value="Rhode Island">Rhode Island</option>
          <option value="South Carolina">South Carolina</option>
          <option value="South Dakota">South Dakota</option>
          <option value="Tennessee">Tennessee</option>
          <option value="Texas">Texas</option>
          <option value="Utah">Utah</option>
          <option value="Vermont">Vermont</option>
          <option value="Virginia">virginia</option>
          <option value="Washington">Washington</option>
          <option value="West Virginia">West Virginia</option>
          <option value="Wisconsin">Wisconsin</option>
          <option value="Wyoming">Wyoming</option>
         </select>&nbsp;*&nbsp;&nbsp;&nbsp;</p>
 <p>Please type in what country you live in:
<input type="text" id="countryOther" />&nbsp;*&nbsp;&nbsp;&nbsp;</p>

```

And here is what I am trying to do with JavaScript:

```
function countryValidation ()
 {
  var country = document.forms["createForm"]["country"].value;
  var countryOther = document.forms["createForm"]["countryOther"];
  var state = document.forms["createForm"]["state"];

  if (country == 0)
   {
   countryOther.createAttribute("disabled","disabled");
   }
  else if (country == 1)
   {
   state.createAttribute("disabled","disabled");
   countryOther.removeAttribute("disabled");
    }
 }

```

I do have another JavaScript function that Validates the whole form, because it is a form that I will be using to allow people to create an account. I haven't gotten to the point of having an SQL server, nor have I learned SQL, PHP or ASP.net... I am doing this for a project and could really use some help with this problem.

Thanks!
['https://Stackoverflow.com/questions/22902486', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2810473/']
You need to understand what `include` does. Literally everything in the "included" file will be put where you call that function. So in this case, you're putting practically an entire HTML document inside the `<head>` of another.

headertop.php should likely only be:

```
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
<meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, portfolio, thumbnails"/>
<link rel="shortcut icon" href="images/art_favicon.png" type="image/x-icon"/>
<link rel="stylesheet" href="css/headertop.css" type="text/css" media="screen"/>

```

And the `<header>` tag does not belong in there at all. That needs to go in the body of your document.
You can do it like this.

index.php

```
<!DOCTYPE html>
<html>
<head>
    <title>HOME</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta name="description" content="Slide Down Box Menu with jQuery and CSS3" />
    <meta name="keywords" content="jquery, css3, sliding, box, menu, cube, navigation, 
portfolio, thumbnails"/>
    <link rel="shortcut icon" href="images/art_favicon.png" type="image/x-
icon"/>
    <link rel="stylesheet" href="css/body.css" type="text/css" media="screen"/>
    <link rel="stylesheet" href="css/headertop.css" type="text/css" media="screen"/>

    <style>
        body{
            background-image: url(images/graphy.png);
            font-family:Arial, Helvetica, sans-serif;
            margin: 0;
            padding: 0;
        }       
    </style>

<?php

require_once("headertop.php");

?>    

</head>
<body>

<div id="contents">

</div>

</body>
</html>

```

headertop.php

```
<header> 
<div id="headertop">
  <div id="adams">
    <p>
  <span style="color: #F60;">A</span>ncajas
  <span style="color: #F60;">D</span>igital
  <span style="color: #F60;">A</span>rts &amp;
  <span style="color: #F60;">M</span>edia
  <span style="color: #F60;">S</span>olutions
    </p>
  </div>
</div>
</header> 

```

You don't need to have two same meta-tags or declared Doctype, head or body tag. And for sure, I suggest to you using `require_once`instead of `include`.