javascript - jQuery 代码无法识别表单提交值

Question

我有这个表格:

<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>

这是我的 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>

我学习了基本的 jQuery 教程，但仍然对其语法感到困惑。出于某种原因，这些变量显示为未定义:

    var name = $("#problem_name").val();
    var problem_blurb = $("#problem_blurb").val();
alert ("name: " + name);
alert ("problem_blurb: " + problem_blurb);

知道我做错了什么吗？

Answer 1

# 指的是 id 属性，而不是名称。 使用 $('input[name="problem_name"]') 来引用元素。