Question

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?

Answer 1

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