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>

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>

• javascript
• jquery
• forms
• dom

• var tc = $('#fsearch').val(); since you already have id, why plicate? – sinisake Commented Dec 30, 2014 at 11:49
• 1 Not sure if there is an id why are you not using $('#fsearch').val();? – Pratip Ghosh Commented Dec 30, 2014 at 11:49
• @PratipGhosh, lol, at the same time (almost). :) – sinisake Commented Dec 30, 2014 at 11:50

3 Answers 3

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/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/qa6z3n1b/1/

Try easiest way:

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

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

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