Clever Geek Handbook

JQuery - Click the Submit button. Get in shape.

I have the following function and all I am trying to do is get the value from a form field.

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

The warning keeps telling me "Undefined". I have a thread closest, parent, parents, find, etc. I don't know what I am doing wrong. I click 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>
+3


source to share


3 answers


Try the following:

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

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



Alternatively, you should use

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

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

+6


source


Try the easiest way:



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


source


How easy it is to use a selector $('input[name="searchbox"]')

:

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


source






More articles:


All Articles