JQuery - Click Submit Button Get Form Value

Question

I have the following function and all i am trying to do is get the value out of the form field.

$( ".searchbutton" ).click(function() {
    var tc = $(this).closest("form input[name='searchbox']").val();
    alert(tc);      
    return false;
}); 

The alert keeps telling me "Undefined". I have treid closest, parent, parents, find, etc. I don't know what im doing wrong. Im clicking the submit button and all i want in return is the value in the search box. Please help.

html

<form action="/index.php" method="get" class="qsearch" >
<input type="text" id="fsearch" name="searchbox" >
<input class="searchbutton" type="submit" value="Submit">
</form>

Answer 1

Try this:

$( ".searchbutton" ).click(function() {
    var tc = $(this).closest("form").find("input[name='searchbox']").val();
    alert(tc);      
    return false;
}); 

Update Yep, it work with your HTML - see here http://jsfiddle.net/qa6z3n1b/

As alternative - you must use

$( ".searchbutton" ).click(function() {
    var tc = $(this).siblings("input[name='searchbox']").val();
    alert(tc);      
    return false;
}); 

in your case. http://jsfiddle.net/qa6z3n1b/1/

Answer 2

Try easiest way:

<script>
$( ".searchbutton" ).click(function() {
var tc = $('#fsearch').val();
alert(tc);      
return false;
}); 
</script>

Answer 3

How about just using $('input[name="searchbox"]') selector:

$( ".searchbutton" ).click(function() {
    var tc = $('input[name="searchbox"]').val();
    alert(tc);      
    return false;
});