jQuery(document).ready(function() {
jQuery(".search-form").submit(function(e) {
// if submitted value = "easter egg"
// e.preventDefault();
// show easter egg
// else do nothing (let the form be submitted as usual)
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://galina.xyz/" method="get" id="adminbarsearch">
<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />
<label for="adminbar-search" class="screen-reader-text">Search</label>
<input type="submit" class="adminbar-button" value="Search" />
</form>Could you help me organize this? I failed to find out the submitted value in 'e'.
Can't find it because your class selector is looking for search-form, but it is not set, so add it
e.g. <form class="search-form"..
Then use Event.preventDefault() in the listener to prevent the submission
e.g. e.preventDefault();
jQuery(document).ready(function() {
jQuery(".search-form").submit(function(e) {
const searchVal = $(this).find('input[type=text]').val();
if (searchVal == 'easter egg') {
e.preventDefault();
console.log('surprise');
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="search-form" action="https://galina.xyz/" method="get" id="adminbarsearch">
<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />
<label for="adminbar-search" class="screen-reader-text">Search</label>
<input type="submit" class="adminbar-button" value="Search" />
</form>In jQuery you're creating a submit function for .search-form, but in your HTML, there is no element with that class. You should create submit function for your form which has id="adminbarsearch":
jQuery(document).ready(function() {
jQuery("#adminbarsearch").submit(function(e) {
if ($("#adminbar-search").val() === "easter egg")
{
// show easter egg
console.log("Easter Egg");
e.preventDefault();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="https://galina.xyz/" method="get" id="adminbarsearch">
<label for="adminbar-search" class="screen-reader-text">Search</label>
<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />
<input type="submit" class="adminbar-button" value="Search" />
</form>