Enter key does not work in search box - javascript

Tried to search for this guys sorry. Input in the search box doesnt work (or search) when you hit enter only when the user clicks the search button. What am I doing wrong? Here is my code. Thanks.
<script type="text/javascript">
$(document).ready(function() {
$("#submit").click(function() {
var url = "http://asla.org/awardssearch.html";
url += "?s=" + $('#GoogleCSE').val();
window.location = url;
});
$('#GoogleCSE').keydown(function(event) {
if (event.keyCode == '13') {
$("#submit").click();
}
else {
//do nothing :)
}
});
});
</script>
<form class="navbar-form navbar-right" role="search">
<div class="search">
<input id="GoogleCSE" type="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search All Awards" name="Search All Awards" />
<input id="submit" type="button" value="Search" />
</div>
</form>

If you changed your #submit element's type to "submit", you wouldn't need to manually handle this yourself anyway as this is default browser behaviour:
<input id="submit" type="submit" value="Search" />
Now rather than handling the #submit button's click event, we can instead handle the form element's submit event:
$('form[role="search"]').submit(function() {
var url = "http://asla.org/awardssearch.html";
url += "?s=" + $('#GoogleCSE').val();
window.location = url;
});
JSFiddle demo.

Through $("#submit").click() you're just triggering the click handlers added by yourself, not the controls default behavior when you click on it.
Use yourForm.submit() instead and change the url in its callback:
$("#yourForm").submit(function() {
var url = "http://asla.org/awardssearch.html";
url += "?s=" + $('#GoogleCSE').val();
window.location = url;
});

Related

addEventListener redirects to the same page with a '?' at the end of the url

After I click the button or click the send button here's what happens:
HTML super simplified code:
<!DOCTYPE html>
<html>
<body>
<!-- Page Preloder -->
<!-- Header section -->
<header class="header-section">
<form class="header-search-form">
<input id= "searchBarP" type="text" placeholder="Search on divisima ....">
<button id= "searchIconP"><i class="flaticon-search"></i></button>
<script>
var searchBarP = document.getElementById("searchBarP");
searchBarP.addEventListener("searchP",function(){
alert("Trial");
});
</script>
</form>
</header>
<!-- Header section end -->
</body>
</html>
Here what happens before clicking the button:
After:
searchBarP.addEventListener("searchP",function(){
alert("Trial");
});
The first parameter of addEventListener should be an event. You have searchP which is the element. Try putting click instead.
Your button doesn't have a type and the default type, in this case, is "submit". Since you also didn't specify the form's method, it defaults to GET. This method appends all parameters to the URL after a question mark, that's why you see it after clicking the button.
Solution 1:
If you want both the button and the searchbar to perform the same action, listen for the submit event:
<form class="header-search-form" id="form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="submit" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const form = document.getElementById("form");
form.addEventListener("submit", function(e) {
e.preventDefault();
alert("Trial");
});
</script>
</form>
Solution 2:
Set the button's type to "button" in order to prevent it from submitting the form.
<form class="header-search-form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="button" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const searchBarP = document.getElementById("searchBarP");
searchBarP.addEventListener("searchP", function() {
alert("Trial");
});
</script>
</form>
Keep in mind, though, that your searchP listener won't work because there's no event called "searchP". If you want to separate the behaviour of clicking the button and hitting "enter" while typing in the search bar, you can do something like this:
<form class="header-search-form">
<input id="searchBarP" type="text" placeholder="Search on divisima ....">
<button type="submit" id="searchIconP"><i class="flaticon-search"></i></button>
<script>
const searchIconP = document.getElementById("searchIconP");
const searchBarP = document.getElementById("searchBarP");
searchIconP.addEventListener("click", function(e) {
e.preventDefault(); //Remove this if you want to submit the form when you click the button
alert("Button click");
});
searchBarP.addEventListener("keydown", function(e) {
if (e.keyCode === 13){
alert("Search bar enter hit");
e.preventDefault(); //Remove this if you want to submit the form when you hit enter while typing in the search bar
}
});
</script>
</form>

Enter key function sometimes works and sometimes doesn't

I have a search box which should work with pressing the button and also pressing the Enter key. They both have the same code.
The button works perfectly but when it comes to the Enter key, most of the time it doesn't work and sometimes it suddenly works.
Here's my code:
$(document).ready(function() {
function myFunction() {
$("#search-criteria").keydown(function(event) {
if (event.keyCode === 13) {
var txt = $('#search-criteria').val();
$('.items:contains("' + txt + '")').addClass('searched');
}
});
}
$('#search').click(function() {
var txt = $('#search-criteria').val();
$('.items:contains("' + txt + '")').addClass('searched');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="search-criteria" onkeydown="myFunction()" name="search" placeholder="Search..">
<input type="button" id="search" value="search" />
</form>
You are adding both an onKeyDown attribute to your HTML and attaching an event listener. So what's happening is that when your key down occurs, it's calling myFunction, which attaches a second event handler for keydown. The second time around the enter key behavior might kick in, but because each keydown attaches a new event listener, you might have the logic kick in multiple times.
Choose one approach or the other. Either use the HTML attribute or add the event listener programmatically, but not both.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="search-criteria" name="search" placeholder="Search..">
<input type="button" id="search" value="search" />
</form>
JS:
$(document).ready(function() {
$("#search-criteria").keydown(function(event) {
if (event.keyCode === 13) {
doSearch();
event.preventDefault();
}
});
$('#search').click(function() {
doSearch();
});
function doSearch() {
var txt = $('#search-criteria').val();
$('.items:contains("' + txt + '")').addClass('searched');
}
});
(note I also added a .preventDefault() to make sure that the default behavior of the enter key doesn't kick in, since it may submit your form)
Edit:
Moved duplicated code into its own function.
Remove the inline-event onkeydown you don't need it.
You need to use preventDefault inside your myFunction function.
Remove the classes inside your functions to see clearly the new search result.
$(document).ready(function() {
$("#search-criteria").keypress(function(event) {
if (event.which === 13) {
myFunction();
}
});
//code for the button
$('#search').click(myFunction);
});
var myFunction = function() {
event.preventDefault();
var txt = $('#search-criteria').val();
$('.items').removeClass('searched');
$('.items:contains("' + txt + '")').addClass('searched');
}
.searched {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="search-criteria" name="search" placeholder="Search..">
<input type="button" id="search" value="search" />
</form>
<ul>
<li class="items">Coffee</li>
<li class="items">Tea</li>
<li class="items">Milk</li>
<li class="items">Coffee</li>
<li class="items">Tea</li>
<li class="items">Milk</li>
<li class="items">Coffee</li>
<li class="items">Tea</li>
<li class="items">Milk</li>
</ul>
I made a couple of small changes to the code you posted and it is working well for me as a snippet.
I documented the changes in the code itself.
$(document).ready(function() {
//code for Enter key
function myFunction() {
console.log("myFunction called");
var txt = $('#search-criteria').val();
$('.items:contains("' + txt + '")').addClass('searched');
}
$("#search-criteria").keydown(function(event) {
if (event.keyCode === 13) {
// Keep the ENTER key from submitting the form.
event.preventDefault();
myFunction();
}
});
//code for the button
$('#search').click(function() {
var txt = $('#search-criteria').val();
$('.items:contains("' + txt + '")').addClass('searched');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form>
<!--
the `onkeydown` on this can't work, since 'myfunction' isn't in the global space
so I removed it.
-->
<input type="text" id="search-criteria" name="search" placeholder="Search..">
<input type="button" id="search" value="search" />
</form>

Unable to get a javascript/html searchbar to work

I am unable to get my searchbar to return results, I am trying to get the search bar to take in keywords, upon submit it should search for the keywords in all the <div> in my site rather than a single page and display the matches in my searchresults.html page.
<script type="text/javascript">
document.getElementById('button-submit').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:webflicks.co ' + document.getElementById('button-submit').value;
return false;
}
</script>
<div class="parent">
<div class = "search">
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=""/>
</form>
</div>
</div>
</div>
You need to bind your submit event handler to the form, it won't fire on the button.
You'll also want to grab the value of the textbox and not the button.
Replace:
<script type="text/javascript">
document.getElementById('button-submit').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:webflicks.co ' + document.getElementById('button-submit').value;
return false;
}
</script>
with:
<script type="text/javascript">
document.getElementById('button-submit').onsubmit = function() {
window.location = "https://www.google.co.in/search?as_q="+ document.getElementById('button-submit').value +"&as_sitesearch=webflicks.co"; return false;
}
</script>
Hope this will help you..!!

my jquery form validation is not working as i hope it should

I have some javascipt code here that validates a user form. When the user inputs the correct answer it tells them and gives them the link to the next question. At least, that's what it is supposed to do. When i click the form it reloads the page but it should not because i added return false.
the div tra holds 35
and the div usermsg is the user inputted value.
<script>
$("#submit").click(function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6<>rightanswer)
{
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else
{
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
</script>
Any ideas why this is not working?
It should be
if (clientmsg6 != rightanswer)
not
if (clientmsg6<>rightanswer)
To prevent a form submission, you need to return false on the form itself instead of on the submit button. Your code should become:
HTML
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="submit" value="Submit" />
</form>
JS (please note the line where you have clientmsg6, you have a syntax error)
$("#myform").on('submit', function(){
var clientmsg6 = $("#usermsg").val();
var rightanswer = $("#tra").val();
if (clientmsg6 != rightanswer) { //This line was also wrong, should be != instead of <>
$("#confirm").html("<h2>Sorry, wrong answer.</h2>");
}
else {
$("#confirm").html("<a href='#' onclick='play();' style='font-size:20px;' id='new1'>Click here for Question 2</a>");
}
return false;
});
Alternatively, you can keep your existing code by changing your submit button to be just a plain old button, but you will lose the extra functionality of the user being able to hit the enter key and performing the same action.
<form action="page.php" method="post">
<input id="usermsg" type="text" name="answer" />
<input id="submit" type="button" value="Submit" />
</form>
Instead of using .html(), try using .text()
if #submit is a link tag otherwise use the form ID and the submit event
$("#submit").click(function(e){
e.preventDefault()
...
...
...
});
You need to attach handlers once the document has finished loading.
Wrap your script in the following
<script>
$(function() {
// script
});
</script>

Javascript Logic Problem

I know only what I need but I do not know how to get that done.
This is the logic of the code, I really hope some of you has the solution.
How can I create in javascript or jQuery a function that will do the following?
If that checkbox is selected, when the button is clicked redirect the user to another page by passing the value of the textarea in the URL.
So that is the logic.
We have three elements.
1)The checkbox
2)The input type button
3) The textarea.
The checkbox is selected, the user clicks on the button and the user goes to another page , and the URL will include the value found in the textarea.
i.e.
http://mydomainname/page.php?ValueThatWasinTextArea=Hello World
Can you help me.
I think it is something simple for a javascript coder.
Thank you so much
$(function(){
$(':button').click(function(){
if($('input[type="checkbox"]').is(":checked")){
window.location.href = "http://mydomainname/page.php?ValueThatWasinTextArea="+ $('textarea').val();
}
});
});
**Of course if there's more than these three elements on the page, you're going to want some more specific selectors
You could subscribe to the submit event of the form and inside test if the checkbox was checked and if yes use window.location.href to redirect to the desired url:
$('#id_of_the_form').submit(function() {
var value = encodeURIComponent($('#id_of_textarea').val());
if ($('#id_of_checkbox').is(':checked')) {
window.location.href = '/page.php?ValueThatWasinTextArea=' + value;
return false;
}
});
If the button is not a submit button you can subscribe for the click event of this button and perform the same logic.
Might be some syntax problem because I code this on top of my head
<input id="myCheckbox" type="checkbox" />
<button id="myButton" onClick="buttonClick" />
<input id="myTextArea" type="textarea" />
<script>
function buttonClick()
{
var checkBox = document.getElementById('myCheckbox');
var textArea = document.getElementById('myTextArea');
if(checkBox.checked)
{
window.location = 'http://mydomainname/page.php?ValueThatWasinTextArea=' + textArea.value;
}
}
</script>
$(document).ready(function() {
$('#btnSubmit').click(function() {
if($('#chkBox').is(':checked')) {
window.location = '/page.php?passedValue=' + $('#txtField').val();
}
});
};
...
<form>
<p>
<input type="checkbox" id="chkBox"> Checkbox</input>
</p>
<p>
<input type="text" id="txtField" value="" />
</p>
<p>
<input type="submit" id="btnSubmit" value="Submit" />
</p>
</form>

Categories

Resources