jquery fetching blank value from input field

i have a form where it have 2 input and 1 texatarea, when a user submit the form the default behavior of the form is stopped to make the way for ajax request. here is the code i am using.

$(document).ready(function(){
    $('input#submit').click(function(){
        $name = $('input#name').val();
        alert($name);
    return false;
    });
});

and here is my html form

<form action="" method="post" id="mail-form">
    <label for="name">Name *</label><br/>
    <input type="text" name="name" id="name"/><br/>
    <label for="email">Email *</label><br/>
    <input type="text" name="email开发者_开发知识库" id="email"/><br/>
    <label for="message">Message *</label><br/>
    <textarea id="message"></textarea>
    <input type="submit" name="submit" value="Send" id="submit"/>
</form>

when i click submit buttons it just displays blank value in alert box even if i enter some value in name field. whereas if i use the following code for form.

 <input type="text" name="name" id="name" value="yourname"/>

it display yourname in alert box properly. what is wrong with my code?

UPDATE :

Here is my whole index.html (http://jsfiddle.net/MknfR/)file, is there anything wrong with DOM?

Very weird. It works great. Test it here : http://jsfiddle.net/PLm5a/.

Please, test it by yourself with that link to be sure that it doesn't come from your development environment.

Regards

Try adding a blank value attribute to the HTML source:

<input type="text" name="name" id="name" value=""/>