HTML form submission with jquery

Question

I have put my code below. It basically has a text-input and a 'Search' button (form). Whenever the search button is clicked (form submitted), it must go to the .submit function and do the required processing.

HTML CODE:

<form id="twittersearch" name="twittersearch" method="post" action="">
    <input name="twitterq" type="text" id="twitterq"/>
    <button type="submit" >Search</button>
</form>
<div id="twitter-results"></div>

jquery code:

$(document).ready(function () {
    var twitterq = '';

    function displayTweet() {
        var i = 0;
        var limit = $("#twitter-results > div").size();
        var myInterval = window.setInterval(function () {
            var element = $("#twitter-results div:last-child");
            $("#twitter-results").prepend(element);
            element.fadeIn("slow");
            i++;
            if (i == limit) {
                window.setTimeout(function () {
                    clearInterval(myInterval);
                });
            }
        }, 20000);
    }

    $("form#twittersearch").submit(function () {
        twitterq = $('#twitterq').attr('value');
        $.ajax({
            type: "POST",
            url: "search.php",
            cache: false,
            data: "twitterq=" + twitterq,
            success: function (html) {
                $("#twitter-results").html(html);
                displayTweet();
            }
        });
        return false;
    });
});

My problem is that the form is unable to send the 'value' of input id=#twitterq to the javascript .submit function. Hence, the var twitterq has value 'undefined'. However, if I manually set the value of the input like this:

<input name="twitterq" type="text" id="twitterq" value="something"/>

var twitterq now gets the value 'something'. What might be the issue?

I am a newbie to javascript and jquery, so I apologise beforehand if the question is kind of stupid, it has been bugging me for hours.

Answer 1

Don't do this:

twitterq = $('#twitterq').attr('value');

Instead, use the .val() method:

twitterq = $('#twitterq').val();