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"]')来引用元素。

Answer 2

分别添加id =“problem_name”和id =“problem_blurb”。 jQuery'＃'选择器查找id属性。

您可以同时拥有id和name属性。 id是DOM标识符，而name是表单输入标识符。

Answer 3

hash-tag选择器告诉它查找该ID。在HTML中，您只有那些带有name属性的标记。将相同的值放在id属性中，您将全部设置。

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

Answer 4

您还可以在元素中尝试ID，这是jQuery中＃的标识符。

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

哪个也适用于你的按钮。
如果您有<input type="button" ... id="bn">，则可以使用$("#bn").click(function() { .. });替换“input [type = submit]”（在您的情况下将激活页面上的所有提交按钮）。

表单提交值在jQuery代码中无法识别

4 个答案: