onClick Problem...

[jamesjmann]

I'm trying to get a value typed in by a user in one textfield and send it through a function that executes "onClick" on a button. Here's the code so far:

 

<input type="submit" name="check_availability" id="check_availability" value="Check Availability" onClick="check_username('document.getElementById('username').value');">

 

This part:

document.getElementById('username').value

Is where my script breaks. I can't find a way to use those single quotes around "username" to make the value of the "username" field get passed through.

 

Anyone know how to solve this?

 

[Adam]

To use single quotes within single quotes, you just need to escape them with a \'backslash\'.

 

check_username('document.getElementById('username').value');

 

However as you have quotes around the document.get(...) call, you're actually passing the entire thing as it's literal value - as a string - instead of the return object.

[jamesjmann]

To use single quotes within single quotes, you just need to escape them with a \'backslash\'.

 

check_username('document.getElementById('username').value');

 

However as you have quotes around the document.get(...) call, you're actually passing the entire thing as it's literal value - as a string - instead of the return object.

 

then how do you get the actual value from the username field?

 

Like this...?

onClick="check_username(document.getElementById('username').value);"

 

In which the document.get(...) call is not enclosed in quotes?

[jamesjmann]

Ok, doing that worked (after much trial and tribulation, I kinda feel like an idiot lol); however, now I'm having another problem that doesn't make sense...

 

Assuming you're familiar with AJAX...

 

After you click the button to check the availability of the username, if you type something different and try clicking again, nothing happens.

 

Here's my JS code:

function check_username(str) {
  
  document.getElementById("loading_availability").innerHTML = "<img src='../images/animations/loading 2.gif'>";

//If button hasn't been pushed...
if (str == "") {
//Display nothing in content box
  document.getElementById("availability_message").innerHTML = "";
  return;
} 

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

xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	setTimeout ('document.getElementById("availability_message").innerHTML = xmlhttp.responseText', 500);
  		setTimeout ('document.getElementById("loading_availability").innerHTML = ""', 500);
}
}

xmlhttp.open("GET", "../php/scripts/registration/username.php?username=" + str, true);

xmlhttp.send();

}

 

Here's my new html code:

<input type="submit" name="check_availability" id="check_availability" value="Check Availability" onClick="check_username(document.getElementById('signup_username').value);">

 

And here's my PHP code:

<?php

$username = $_GET["username"];

$mysql_host = "localhost";
$mysql_username = "root";
$mysql_password = "somethingyoudontknow";
$mysql_database = "database";
$mysql_connect = mysql_connect($mysql_host, $mysql_username, $mysql_password);

mysql_select_db($mysql_database, $mysql_connect);

//Begin mysql query
$sql = "SELECT * FROM fans WHERE username = '$username'";
$result = mysql_query($sql);
$count = mysql_num_rows ($result);

if ($count == 0) {
echo "<p class='box2'>This username is available!</p>";
} else {
echo "<p class='box'>This username is already in use!</p>";
}

mysql_close($mysql_connect);

?>

 

Now, you tell me