POST method forms with AJAX and MySQL

[Kannebas]

Okay, I working on a registration form using Code Igniter that has two select fields. One for sports and the other for level of play... When the registering user selects a sport, a database query runs selecting the levels associated with said sport...

 

AJAX/JavaScript code (selectlevel.js):

var xmlhttp;

function showLevel(str)
{
var xmlhttp

if(window.XMLHttpRequest)
{
	// code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject)
  	{
  		// code for IE6, IE5
  		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  	}
else
  	{
  		alert("Your browser does not support XMLHTTP!");
  	}

var url = "register";
//url = url + Math.random();
var params = "lorem=ipsum&name=binny";
xmlhttp.open("POST", url, true);

//Send the proper header information along with the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");

xmlhttp.onreadystatechange = stateChanged;
xmlhttp.send(params);	
}

function stateChanged()
{
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
	document.getElementByName("level").innerHTML = xmlhttp.responseText;
}
}

 

PHP/XHTML Form (register):

<?php echo form_open('user/register', array('name' => 'registration')); ?>
<table width="300" cellpadding="1" cellspacing="2" border="0">
    	<tr><td align="right">
    		<label for="user_first_name">First Name:</label>
</td><td align="left">
		<input class="input" size="25" type="text" name="user_first_name" id="user_first_name" />
	</td></tr>
    	<tr><td align="right">
    		<label for="user_last_name">Last Name:</label>
	</td><td align="left">
		<input class="input" size="25" type="text" name="user_last_name" id="user_last_name" />
	</td></tr>
    	<tr><td align="right">
    		<label for="user_sn">Desired Username:</label>
	</td><td align="left">
		<input class="input" size="25" type="text" name="user_sn" id="user_sn" />
	</td></tr>
	<tr><td align="right">
		<label for="password">Password:</label>
	</td><td align="left">
		<input class="input" size="25" type="password" name="password" id="password" />
	</td></tr>
	<tr><td align="right">
		<label for="password_confirm">Confirm Password:</label>
	</td><td align="left">
		<input class="input" size="25" type="password" name="password_confirm" id="password_confirm" />
	</td></tr>
	<tr><td align="right">
		<label for="email">E-Mail Address:</label>
	</td><td align="left">
		<input class="input" size="25" type="text" name="email" id="email" />
	</td></tr>
	<tr><td align="right">
		<label for="email_confirm">Confirm E-Mail:</label>
	</td><td align="left">
		<input class="input" size="25" type="text" name="email_confirm" id="email_confirm" />
	</td></tr>
	<tr><td align="right">
		<label for="gender">Select Gender:</label>
	</td><td align="left">	
		<select class="input" name="gender" id="gender">
			<option value="M" selected>Male</option><option value="F">Female</option>
		</select>
	</td></tr>
	<tr><td align="right">
		<label for="sport">Select Sport:</label>
	</td><td align="left">
		<select class="input" name="sport" id="sport" onchange="showLevel(this.value)">
			<?php
			foreach($sport_query->result() as $sports)
			{
				?><option value="<?php echo ($sports->sport_id); ?>"><?php echo ($sports->sport_name); ?></option>
			<?php
			}?>
		</select>
	</td></tr>	
	<tr><td align="right">
		<label for="level">Select Level:</label>
	</td><td align="left">	
		<select class="input" name="level" id="level">
			<?php
				$division_query = $this->db->get_where('divisions',  array('division_sport_id' => $sports->sport_id));
				foreach($division_query->result() as $divisions)
				{
					$level_query = $this->db->get_where('levels', array('level_id' => $divisions->division_level_id));
					foreach($level_query->result() as $levels)
					{
						?><option value="<?php echo ($levels->level_id); ?>"><?php echo ($levels->level_name); ?></option>
						<?php
					}
				}
			?>
		</select>
	</td></tr>
	<tr><td>
		<input class="input-field" size="25" type="text" name="username" id="username" />
		<br />
	</td><td>
		<input class="input-field" size="25" type="text" name="email_address" id="email_address" />
		<br />
	</tr></td>
	<tr><td align="right">
		<label for="squiggle">Human Validation:</label>
	</td><td align="left">
		<input class="input" size="25" type="text" name="squiggle" id="squiggle" />
	</td></tr>
	<tr><td>
		<?php echo nbs(1); ?>
	</td><td align="left">
		<?php echo $captcha['image']; ?>
		<?php $_SESSION['squiggle_code'] = $captcha['word']; ?>
	</td></tr>
	<tr><td>
		<?php echo nbs(1); ?>
	</td><td align="left">
		<input class="input" type="submit" name="submit" id="submit" value="Submit" />
		<input class="input" type="reset" name="reset" id="reset" value="Reset" />
	</td></tr>			
</table>
</form>

 

Now I only have the query set up the way it is to make sure that it's working. The JavaScript error I get is 'xmlhttp.readyState' is null or not an object. Now, I already know that it's not NULL. So, what's the deal?¿

[Kannebas]

B-E-A-utiful...

  _________

    |        |

    |        0

    |        /|\

    |        / \

    |

    |

  _|__