Form submit values not recognized in jQuery code

I have this form:

<form  name="form"  method="post">
    <div>
        <p>
        Problem Name: <input type="text" size="20" name="problem_name"></input>
        </p>
        <p>
        Explain the problem
        </p>
        <p>
                <textarea name="problem_blurb" cols=60 rows=6 ></textarea>
        </p>
    </div>
    <div>
<span class="error" style="display:none"> Please Enter Valid Data</span>
<span class="success" style="display:none"> Registration Successfully</span>

        <input type="submit" class="button" value="Add Problem"></input>
    </div>
<form>

and here is my JS:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

<script type="text/javascript" >
$(function()
{
    $("input[type=submit]").click(function()
    {
        var name = $("#problem_name").val();
        var problem_blurb = $("#problem_blurb").val();
    alert ("name: " + name);
    alert ("problem_blurb: " + problem_blurb);


        var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender;

if(name=='' || username=='' || password=='' || gender=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "join.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>

I went through the basic jQuery tutorials, but still confused with their syntax. For some reason, these variables show up as undefined:

    var name = $("#problem_name").val();开发者_高级运维
    var problem_blurb = $("#problem_blurb").val();
alert ("name: " + name);
alert ("problem_blurb: " + problem_blurb);

Any idea what I am doing wrong?

# refers to id attributes, rather than names. Use $('input[name="problem_name"]') to refer to the elements.

Add id="problem_name" and id="problem_blurb" respectively. The jQuery '#' selector looks for id attributes.

You can have both id and name attributes. id is the DOM identifier while name is the form input identifier.

The hash-tag selector tells it to look for that ID. In your HTML you only have those tags with a name attribute. Put the same value in the id attribute and you will be all set.

<input id="problem_name" type="text" size="20" name="problem_name"></input>
<textarea id="problem_blurb" name="problem_blurb" cols=60 rows=6 ></textarea>

You would also try ID in your elements, which is the identifier for # in jQuery.

<input type="text" size="20" id="problem_name">

Which also go for your Button.
If you have <input type="button" ... id="bn"> you can replace "input[type=submit]" (which in your case will activate ALL submit buttons on the page) with $("#bn").click(function() { .. });.