Форма отправки значений не распознается в коде 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"]') для ссылки на элементы.

Answer 2

Добавьте id = "problem_name" и id = "problem_blurb" соответственно.Селектор jQuery '#' ищет атрибуты id.

Вы можете иметь атрибуты id и name.id - это идентификатор DOM, а name - идентификатор ввода формы.

Answer 3

Вы также можете попробовать идентификатор в своих элементах, который является идентификатором # в jQuery.

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

, что также относится к вашей кнопке.
Если у вас есть <input type="button" ... id="bn">, вы можете заменить «input [type = submit]» (который в вашем случае активирует ВСЕ кнопки отправки на странице) на $("#bn").click(function() { .. });.

Answer 4

Селектор хеш-тега говорит ему искать этот идентификатор.В вашем HTML у вас есть только те теги с атрибутом имени.Поместите то же значение в атрибут 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>