jQuery.ajax does not fire

Question

I'm new to jQuery so bear with me :-)

What i'm trying to do is to validate user input in a form, checking the input against mysql database. Then set the color depending on T/F.

I have managed to get this working on a test page, but on my real page it does not work :(

This is the working code.

<style>
body{width:50%;}
#frmCheckUsername {border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
.demoInputBox{padding:7px; border:#F0F0F0 1px solid; border-radius:4px;}
.status-available{color:#2FC332;}
.status-not-available{color:#D60202;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>


$(document).ready(function(){
    $("#username").keyup(function(){
    //alert( "Handler for .keyup() called." );
    checkAvailability();
    });
});

function checkAvailability() {
    //$("#loaderIcon").show();
    jQuery.ajax({
    url: "check_av2.php",
    data:'username='+$("#username").val(),
    type: "POST",
    success:function(data){
        //alert( data );
            //if(data){$("#username").css("background-color", "yellow");}
        $("#username").css("background-color", data);
    },
    error:function (){}
    });
}
</script>


<label>Check Username:</label>
<input name="usernae" type="text" id="username" class="demoInputBox">  


----
check_av2.php

<?php
include ('inc/environment.php');
db_open();

$id = $_POST["username"];

if(!empty($id)) {
    $result = mysql_query("SELECT id FROM lakes WHERE id='".$id."'");
    $row = mysql_num_rows($result);
    db_close();
    if($row>0) {
    echo "#BAF490";

    }else{
    echo "#F22A26";
    }
}
?>

Now when copying this to the existing code it will not change the color. I don't know how to proceed now. Does 'div' affect the id's? The existing code also includes other scripts

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

Do these other script includes interfere?

Here the code that does not work.

<SCRIPT>
$(document).ready(function(){
$("#sm").keyup(function(){
  //alert( "Handler for .keyup() called." );
  checkAvailability();
});
});

function checkAvailability() {
  //$("#sm").css("background-color", "yellow");
  jQuery.ajax({
  url: "check_av2.php",
  data:'username='+$("#sm").val(),
  type: "POST",
  success:function(data){
        //alert( data );
        $("#rstm").css("background-color", "yellow");
        $("#sm").css("background-color", data);
        //$("#loaderIcon").hide();
  },
  error:function (){}
  });
}
</SCRIPT>   
<input name="sm"
type="text" class="uppercase"
id="sm" value="<?=$sm?>" size="4"
title="Eget">

---

Now if i un-comment $("#sm").css("background-color", "yellow"); the box will become yellow typeing in the box, but jquery.ajax does not seem to fire.

Not so easy to explain, but i hope you get it :-) And i can't post the whole code for the not working page here. I could send the code on mail if needed.

SOLVED I could not let this go past today. The solution if on of the more annoying. Found it by removing code in blocks and narrow the blocks. A BIG varning to

<meta http-equiv="X-UA-Compatible" content="IE=9" />

that was present in the code. Removing that line did the trick!! Tanks anyway :-)

Answer 1

Please Try

data:{'username':$("#username").val()}

Good work :)

Answer 2

Please pass an object as data

jQuery.ajax({
    url: "check_av2.php",
    data:{'username':$("#username").val()},
    type: "POST",
    success:function(data){
        $("#username").css("background-color", data);
    },
    error:function (){}
    });


jQuery.ajax({
    url: "check_av2.php",
    data:{'username':$("#sm").val()},
    type: "POST",
    success:function(data){
        $("#rstm").css("background-color", "yellow");
        $("#sm").css("background-color", data);
    },
    error:function (){}
});