After extensive research on the internet I can't find a way to get my DNN module to virtually click the "Search" button and stay there, because after doing what I want somehow DNN hijacks my keypress and redirects to the Home page of the portal.
Even in the production environment it redirects to the local development environment. I don't have full knowledge of how the portal is configured because I "inherited" it, but I neither know where to search...
Any tips on this?
BTW, my code is the following and works correctly before DNN redirects :
$("input").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$("#<%=lbtnBuscar.ClientID%>").click();
}
});
I managed to find the answer by myself. To protect the application to redirect it's necessary to use this line of code:
//13 is the ASCII code of Enter key
ClientAPI.RegisterKeyCapture(pnContainer, btnSearch, 13);
The javascript I used is no longer necessary.
using javscript button click
$("input").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
document.getElementById("<%=lbtnBuscar.ClientID%>").click(); // Click on the Button
}
});
if you wany use exsisting code
$("input").keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
$('#'+'<%=lbtnBuscar.ClientID%>').click();
}
});
You are missing single quot, try this it will work. And if click on lbtnBuscar it does postback call, stop that using usersubmit=false; on button.
Related
Is there any way to add an eventlistener that will run whenever any of the forms in the webpage gets submitted? This need to run on all the websites, for example, on www.google.com, whenever the user searches something, the eventlistener should run.
I am not using any html file. So it is not possible to use the form id.
I am a Swift developer but need to use JavaScript in this scenario. So really need some help here.
Note: There is a similar question on StackOverflow, but that is for Ajax. I am looking to use only JavaScript.
UPDATE: I need an eventlistener that will get executed whenever a user searches something on any search engine website, like google, bing, etc. The eventlistener should run when the users 1. hits enter on the search box. 2. clicks on the search button. 3. clicks on or hits enter on the autocomplete search predictions.
as of now I am able to achieve 1 and 2 using the following code:
document.body.addEventListener('keypress', function(e) {
// check if the element is an `input` element and the key is `enter`
if((e.target.nodeName === "INPUT") && e.key === 'Enter') {
console.log('Enter pressed Input');
}
});
document.body.addEventListener('click', function(e) {
if(e.target.nodeName === "INPUT") {
console.log('Clicked Input');
}
});
document.body.addEventListener('keypress', function(e) {
if(e.target.nodeName === "DIV" && e.key === 'Enter') {
console.log('Enter pressed in Autocomplete');
}
});
document.body.addEventListener('click', function(e) {
if(e.target.nodeName === "LI") {
console.log('Clicked Autocomplete');
}
});
However, I am not able to achieve target 3 yet.
I thought maybe if I was able to implement an eventlistener that would run whenever the form gets submitted, all the three targets will be achieved. I am not sure as I am new to JavaScript.
I also need to do it without using any form id as the same code needs to be compatible with multiple forms.
I hope this makes it clearer now.
Well then you don't need to listen for the key press, instead listen for the submit event, using event delegation, here is a solution, note that we're getting the value of the input with the name "q" cause most of the search engines use it as a name for the search input:
document.body.addEventListener("submit", function(e) {
// prevent the form submitting
e.preventDefault();
// clear the console from old messages
console.clear();
// output the serached text
console.log(e.target.querySelector("[name='q']").value);
// after 3 seconds submit the form (just for demonstration)
setTimeout(function() {
e.target.submit();
}, 3000);
});
<form action="https://duckduckgo.com/">
<input type="text" name="q">
<input type="submit">
</form>
i'm looking for a JQUERY or JS script to catch onkeydown Primefaces InputText property with ---> event.keyCode == 13 and convert it into a event.keyCode = 9.
I tried to script a solution like this in the example below.
But it doesn't works for me.
I tried different way to catch the event, cancel it and re-launch another event, but the problem persist.
So, can I convert it or launch another event to prevent the ENTER event? I don't wanna delete the possibility to press Enter to the user, I just wanna convert it.
temp0.onkeydown = function(e) {
if (e.which == 13) {
e.preventDefault();
var event = new Event('keydown', {bubbles: true, cancelable: true});
event.which = 9;
this.dispatchEvent(event);
}
}
Right now i'm using Primefaces 6.0 and a TreeTable for my InputText. I test the problem with TAB and it works perfectly, but with the Enter key the problem seems to block the entire table.
I read everything about this argument, but i was not able to find anything useful. I hope that somebody will able to help me. Thanks in advance.
Have been searching for a solution to this problem for 2 days now and none of the suggested solutions have worked so far.
My form html is defined with
<form id="quote_form" action="" method="get" class="ui large form">
and input text fields in the form
<input v-model="city" type="text" name="quote[city]" id="city">
I have been trying to isolate the cause of the issue but have not been able to do so. I tried turning off the keyboard shortcuts settings for semantic ui forms:
$('.ui.form').form({
keyboardShortcuts: false
});
I have also tried to override the enter key and prevent it from triggering the submit function in these ways:
$('#quote_form').on('keyup keypress', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.stopPropagation();
e.preventDefault();
return false;
}
});
$(document).on("keypress", "form", function(event) {
return event.keyCode != 13;
});
$('#quote_form').bind('keypress keydown keyup', function(e){
if(e.keyCode == 13) { e.preventDefault(); }
});
The form has multiple steps in filling it in. Each step uses a button to permit the advance to the next step. When enter is pressed then it causes the form to redirect to the first step/tab of the form. The only case where it doesn't redirect is when the rules of the current step are not satisfied. The form submission is handled by a submit button where the button itself calls methods to validate and submit the form. I can't find any connection between enter submit behaviour and the button for submitting.
If I am missing any useful information to help isolate the cause then please let me know. I'm new to asking questions here and want to prevent my question from being considered bad as much as possible :)
Here is solution for you:
#submit.prevent
https://jsfiddle.net/4qpffycs/2/
Just use #keyup.enter.prevent at the end of the input markup. See VueJS Doc
By the way, you should try to use native VueJS Events instead of all redoing it with JQuery
The solution I found regards only Semantic UI without VueJS, but should be applicable here and gives a bit of an insight into the issue.
The problem arises from the fact that $("#formId").form({ ... }) registers an event handler for a button press and submitting the form on Enter press if one of the input boxes are selected. This can be seen in Chrome DevTools when selecting the element and choosing Event Listeners category:
The simplest way I found to remove this behavior is to call
$("#formId").unbind('keydown')
to remove the keydown bind completely from the element.
For some reason, this script isn't working in Safari (tested on Windows, think it happens on Mac, too, though):
$("#searchTerms").focus(function() {
$(document).keypress(function(e) {
if(e.which == 13) {
$("#searchBtn img").click();
}
});
});
jsFiddle: http://jsfiddle.net/ux86V/
The script is supposed to click an image when a user presses enter while focused on a search box (it has to be set up this way, it's tied in to some weird third party service).
EDIT: It doesn't appear to work at all in the jsFiddle, but it does, so don't just assume the entire script is bad. I think jSFiddle just prevents redirects, and I have it set up to redirect to google.com for the example.
EDIT 2: It appears to be an issue with .click(). Is there an alternative to this that I could use, or is .click() the only way to register a click on an element?
EDIT 3: After more testing, it seems like the jQuery click event is somehow not working properly. It may have something to do with the way the form is submitted, I'm not sure. Link to live demo: http://www.weblinxinc.com/beta/blue-sky-marketing/demo/
13 is the code of enter key which is a special key , you can catch it on keyup only
try to use trigger();
$("#searchTerms").focus(function() {
$(document).keyup(function(e) {
if(e.which == 13) {
$("#searchBtn img").trigger("click");
}
});
});
I had a jQuery / HTML code similar to this:
<form action="/SomeAction" method="post">
<input id="my-textbox" type="text" placeholder="Write something and press enter to continue..." />
</form>
<script type="text/javascript">
$(function() {
$('#my-textbox').keyup(function(e) {
var $textbox = $(this);
if ($textbox.val().length > 0 && e.keyCode == 13) {
$textbox.parent('form').submit();
}
});
});
</script>
The purpose was to automatically submit the form when the user pressed the Enter key. I regularly use Firefox so everything was OK for me until I tested in Google Chrome and Internet Explorer.
When I pressed the Enter key in the later browsers, sometimes I would get the form submitted twice. This was easy to notice because I would get duplicate entries in my DB and I'd see two POSTs using Fiddler.
After some testing, I found out that my problem was the jQuery code, since the textbox would submit automatically on enter without it, and using this code would produce a second POST in some browsers.
My questions are:
Why don't browsers smartly prevent the second form post (like Firefox did in my testing)?
Should I expect this behavior in all major browsers in all platforms?
Is there a way to improve this code so I perform the submit using JavaScript, but don't get the form submitted twice?
Why don't browsers smartly prevent the second form post (like Firefox did in my testing)?
That is the default behavior. What if you didn't have your script and the default behavior was such that the form wouldn't POST on enter.
Should I expect this behavior in all major browsers in all platforms?
Yes
Is there a way to improve this code so I perform the submit using JavaScript, but don't get the form submitted twice?
Use a global mutex variable and set it once the form POSTs - checking it on subsequent POSTs to validate. Or, return false from the keyup handler and stop the event propagation.
Some browsers will interpret an input button as a submit if there is only one button in the form. Just return false in your function to prevent the default behavior from submitting the form.
if ($textbox.val().length > 0 && e.keyCode == 13) {
$textbox.parent('form').submit();
return false;
}
Your form is being submitted right after the enter has been pressed (on keydown and before keyup fires) so you can do
$(function() {
$('#my-textbox').keydown(function(e){
if(e.keyCode==13) e.preventDefault();
});
$('#my-textbox').keyup(function(e) {
e.preventDefault();
var $textbox = $(this);
if($textbox.val().length > 0 && e.keyCode == 13) {
$textbox.parent('form').submit();
}
});
});
A simple test.
Add boolean variable that would be set to true after first submit and use that variable in your if condition. This would prevent accidental double click.
You should also prevent double submit in the application backend (many web frameworks have built-in mechanism for doing this, it easy to come up with custom solution as well).