I need to add class to the input element in Opencart search(in header.tpl)
HTML CODE:
<input type="text" name="search" id="input-search" class=""/>
JQUERY CODE:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
if (e.keyCode == 13) {
$("#input-search").addClass("button-search");
}
});
});
</script>
I am using Opencart and to redirect to the search page you have to have the class .button-search. I don't want to have a submit button.
When I add some text to the input and then when I press Enter the script should add class to the input and redirect to the Opencart search page.
Here is what you want buddy.
code: http://jsfiddle.net/webcarvers/xdt7g/1/
preview: http://jsfiddle.net/webcarvers/xdt7g/1/embedded/result/
HTML
JS
$("#inputSearch").on('keypress',function (e) {
if (e.keyCode == 13) {
$("#inputSearch").addClass("buttonSearch");
$("p").text("Class added = " + $("#inputSearch").attr("class"));
window.location.replace("http://www.yahoo.com/")
}
});
When the button is inside a form you can submit it:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
if (e.keyCode == 13) {
$("#input-search").addClass("button-search");
$(this).closest('form').submit();
}
});
});
</script>
You need to use event delegation method like below:
$('body').on('keyup','#input-search', function (e) {
if (e.keyCode == 13) {
$(this).addClass("button-search");
}
});
If all you want to do is redirect to a page with the value from the input you can do the following window.location.href = "?search=" + this.value;
Your code will be like:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
var kc = e.keyCode || e.which;
if (kc == 13) {
$("#input-search").addClass("button-search");
window.location.href = "?search=" + this.value;
}
});
});
</script>
you can change to this:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
var kc = e.keyCode || e.which;
if (kc == 13) {
$(this).addClass("button-search");// get the current context with 'this'
window.location.href = "../yoursearchpageurl?" + $(this).serialize();
}
});
});
</script>
As you mentioned that you don't have a form in your page so when you add the class to your button then just after that you can change your page url as suggested with $(this).serialize()
Related
UPDATE: I am constructing the form via Javascript, so the form is not there on page load.
I have an input field with id="input", whenever the enter key is pressed, the form gets submitted. So I tried handling it like this.
$("#input").keydown(function (e) {
if (e.keyCode == 13) {
alert("enter pressed");
return false;
}
});
However this does not work, there is no alert and the form still gets sent. How do I solve this?
Use preventDefault() to prevent the form from submitting.
$("#input").keydown(function (e) {
if (e.keyCode == 13) {
alert("enter pressed");
e.preventDefault();
}
});
Example with a form:
$('form').submit(function(e){
e.preventDefault();
});
https://jsfiddle.net/aya6ockv/
Use onkeypress attribute in your input as follows:
<input type="text" onkeypress="myFunction(event)">
<script>
function myFunction(event) {
var x = event.which || event.keyCode;
if(x == 13) {
alert("enter pressed");
return false;
}
}
</script>
I would do it like this and change 'form' to #input. Unless you want to stop this enter submission site wide, then this as is should work well.
$("form").bind("keypress", function(e) {
if (e.keyCode == 13) {
return false;
}
});
Just created a JSFiddle that shows that it works. Check it out
$('#input').keydown(function (e) {
if (e.keyCode == 13) {
alert('alert pressed');
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form">
<input text="name" id="input">
<button type="submit">Submit</button>
</form>
return false is more efficient than e.preventdefault(). Please look at event.preventDefault() vs. return false
$("#input").keydown(function (e) {
if (e.which == 13) {
alert("enter pressed");
return false;
}
});
I'm having a problem binding this script to a submit button...
$('input').on('keydown', function(event) {
var x = event.which;
if (x === 13) {
event.preventDefault();
}
});
I've done it before but it's been a long time and the examples on the web are not doing it for me. Thanks :)
jQuery(function($) { // DOM is now ready
// your code here
});
should do the trick.
https://learn.jquery.com/using-jquery-core/document-ready/
$(document).ready(function(){
$('input').on('keydown', function(e) {
if (e.keyCode == 13 || e.which == 13) {
e.preventDefault();
}
});
})
Please try this
or you can try this code by using IIFE
(function($) {
$('input').on('keydown', function(e) {
if (e.keyCode == 13 || e.which == 13) {
e.preventDefault();
}
});
})(jQuery);
I've got a working inline edit script which lets the user edit his or her name.
But it currently does not "save" when the user hits the enter key
The script:
<span class="pageTitle" id="username">Visitor 123123981203980912 <span class="iconb" data-icon=""></span></span>
// Inline edit
$.fn.inlineEdit = function(replaceWith, connectWith) {
$(this).hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$(this).click(function() {
var elem = $(this);
elem.hide();
elem.after(replaceWith);
replaceWith.focus();
replaceWith.blur(function() {
if ($(this).val() != "") {
connectWith.val($(this).val()).change();
elem.html($(this).val() + ' <span class="iconb" data-icon=""></span>');
}
$(this).remove();
elem.show();
});
});
};
var replaceWith = $('<input name="temp" type="text" class="inlineEdit" />'),
connectWith = $('input[name="hiddenField"]');
$('#username').inlineEdit(replaceWith, connectWith);
How can i make the above also react when the enter key is hit?
You need to detect the enter press and do the same thing in blur function. Add the following to your js. Demo
replaceWith.keypress(function(e) {
if(e.which == 13) {
if ($(this).val() != "") {
connectWith.val($(this).val()).change();
elem.html($(this).val() + ' <span class="iconb" data-icon=""></span>');
}
$(this).remove();
elem.show();
}
});
This should fire when the enter key is pressed inside the input:
$('#username').live("keypress", function(e) {
if (e.keyCode == 13) {
// action here
}
});
You can call the same function on keydown and check for e.keyCode for enter key which is 13..a fiddle would be helpful..
Also check this link
Thanks,
Hardik
<script type="text/javascript">
function onDataBound(e) {
$("#batchgrid").on("click", "td", function (e) {
$("input").on("keydown", function (event) {
if (event.keyCode == 13) {
event.keycode=9;
return event.keycode;
}
});
});
}
</script>
here i'm using above script to fire tab key press event when i press the enter key.but it doesn't behave as tab key pressed when i press the enter key.
please help me here..
return event.keycode is effectively return 9, and even return event will not help, as returning the event does not mean that will be handled properly, what you probably want to do instead is to take the enter event and then manually change focus to the next required field:
function onDataBound(e) {
$("#batchgrid").on("click", "td", function (e) {
$("input").on("keydown", function (event) {
event.preventDefault();
if (event.keyCode == 13) {
$(this).next("input, textarea").focus()
}
});
});
}
It will not simulate until you prevent the default enter key event.
event.preventDefault(); should be the first command of your function.Then implement the tab key event.Your code should be something like this :
<script type="text/javascript">
function onDataBound(e) {
$("#batchgrid").on("click", "td", function (e) {
$("input").on("keydown", function (event) {
event.preventDefault();
if (event.keyCode == 13) {
event.keycode=9;
return event.keycode;
}
});
});
}
</script>
Hope it will work.
Any idea why this doesn't work whatsoever on any browser?
If i try it in jsfiddle it works.
$('#input_area').keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
HTML
<script type="text/javascript" src="counts.js"></script>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<input type="text" id="input_area"/>
</body>
JS
$(document).ready(function() {
$('#input_area').keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
});
I am ready to bet 5 bucks that you didn't wrap it in a document.ready handler in your actual application which jsfiddle does by default:
$(function() {
$('#input_area').keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
});
Another possibility is you forgot to reference jQuery or you referenced it from a wrong url.
Depending on the browser, the which property might not be implemented. You should also check for keyCode:
$(document).ready(function() {
$("#input_area").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
alert('You pressed enter!');
}
});
});
If it works when running in jsfiddle, then it works. I suspect you're trying to register the keypress listener when the dom is not loaded yet, and input_area is not available yet. Wrap it inside $(document).ready :
$(document).ready(function() {
$('#input_area').keypress(function(e) {
if (e.which == 13) {
alert('You pressed enter!');
}
});
});
Try to use binding,
$('#input_area').bind('keypress', function(e){
alert(e.which);
});