handling submit event - jquery

Question

I have some javascript that I'm trying to retool using jQuery to learn the library better and I am running into what seems to be a very elementary problem.

html:

<form id="theForm">
What would you like to do?<br /><br />
<input type="text" id="doThis" /><br /><br />
</form>

js:

$(document).ready(function() {
$("#theForm").submit(function(){
 var doThis = $("#doThis").value.toLowerCase();  
 alert(doThis);
});
});

Can anybody offer some advice as to why this very simple interaction does not seem to work as it should?

Thanks in advance.

Answer 1

$("#theForm").submit(function(){
        var doThis = $("#doThis").value.toLowerCase();          
        alert(doThis);
return false
});

?

Answer 2

You need to use val() to get the value in jQuery

$("#doThis").val().toLowerCase();

The DOM object is not readily accessible off of $(), it is stored in [0] by jQuery, so if you wanted to access the value the traditional way, you would do:

$("#doThis")[0].value.toLowerCase();

Additionally, I don't think the form would submit right away in your case because of the alert(), but you should return false; to stop the submit if you don't intend on it submitting.