We Keep Coding

Detect keydown event (mobile)

I'm currently working on a mobile app using cordova. I've ran into this problem where I have coded a function to detect whenever an user has typed into a text input field and pressing the enter key.
Here's the JavaScript snippet;
<script type="text/javascript">
$(function () {
$("#searchForm").on("input", function (e) {
e.preventDefault();
});
$("input").on("keydown", function (e) {
if (e.keyCode === 13) {
var keyField = document.createElement('input');
keyField.setAttribute('type', 'text');
document.body.appendChild(keyField);
setTimeout(function () {
keyField.focus();
setTimeout(function () {
keyField.setAttribute('style', 'display:none;');
}, 50);
}, 50);
}
});
});
</script>
the HTML part;
<form onsubmit="return false" id="searchForm">
<input type="text" id="fieldOne">
<input type="text" id="fieldTwo">
<input type="button" value="Search" id="search" onclick="executeSearches()"/>
</form>
This code works to achieve hiding the mobile keyboard, but when the hiding function executes the view is being moved because of the keyField -variable.
Is there any other ways I could achieve this function without the view being moved or can I somehow determine where the view is being moved to?

you are missing "#", check jquery selectors
$("#searchForm").on("input", function (e) {
e.preventDefault();
});

How can we check which button is clicked in a jQuery UI dialog box?

I am trying to use jQuery UI to build a dialog box with Yes/No button for user confirmation. (This is because I want to make the UI uniform, as I have used jQuery UI to build the warning dialog boxes.) My intention is to ask for user confirmation if a large number (1000 or above) is submitted in the text box. So far my JavaScript code looks like this:
function checkclick(button1, button2, theForm) {
var val;
val = theForm.mybox.value;
v = parseInt(val) || 0;
var btns = {};
btns[button1] = function(){
$(this).dialog('close');
};
btns[button2] = function(){
$(this).dialog('close');
};
if (v >= 1000) {
$('#dialog').dialog({
autoOpen: true,
modal:true,
buttons:btns
});
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
});
return false;
}
return true;
}
And my HTML looks like this:
<div id='dialog' title='Note' style='display:none'>
<p id='dialog_link'>This is a very large number. Are you sure?</p>
</div>
<form name='myForm' action='result.php' method='post'
onsubmit="return checkclick('Yes', 'No', this)">
<input type='text' name='mybox'>
<input type='submit'>
</form>
The problem is, when the user clicks either of the Yes or No button, it will go back to the same page. However, if I change the 'return false' to 'return true' inside the 'if' part, once the Submit button is clicked, the page will go directly to result.php without waiting for the user to click the Yes or No buttons. Is there any way to check which button is being clicked by the user, so that the page will go to result.php after clicking Yes, but remaining at the current page after clicking No?

jQuery dialog has the option buttons which can be used to describe the required buttons and it's action.
function checkclick(button1, button2, theForm) {
var val;
val = theForm.mybox.value;
v = parseInt(val) || 0;
if (v >= 1000) {
$('#dialog').dialog({
autoOpen: true,
modal:true,
buttons:{
"Yes":function() {
alert('Yes has been clicked'); //Your coding here
},
"No": function() {
$( this ).dialog( "close" );
}
}
});
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
});
return false;
}
return true;
}

I don't have the "Reputation" to comment on your follow up so I had to post as an answer. Apologies for the breach in protocol.
If I understand your goal correctly, you just need to conditionally submit the form. I believe you can accomplish this by preventing the default behavior if the user decides the form submission is too long. Something like this:
<form id="target" action="destination.html">
<input type="text" value="string value">
<input type="submit" value="Submit">
</form>
$( "#target" ).submit(function( event ) {
if (//result of dialog is false) {
event.preventDefault();
} else {
return;
}
});

jQuery UI Dialog Changes URL on Enter KeyPress

I'm trying to submit a form with AJAX, the form being content of jQuery UI Dialog.
I use the same code as in jQuery's documentation
but I modified the form so there is only one text input, so the form looks like this:
<form>
<fieldset>
<label for="answer"><strong>Your Answer : </strong></label>
<input type="text" name="answer" id="answer" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
When I click the OK (or Create User) Button, it works, i.e. submits the answer with AJAX, but I also want it to work when pressed Enter key.
now, when I type asd in input#answer and press enter, it makes the URL like this:
mysite.com/?answer=asd
I tried adding the function:
$('#answer').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
alert("enter pressed on answer input");
}
});
this time it alerts "enter pressed on answer input" and then converts the URL. Whereas, I don't want it to modify the URL, how can I delete that function? Where is it defined?
In short, I want the enter key to do only what I want it to do.
Thanks for any help !
Edit:
The buttons -that work on mouse click- are added in jQuery.dialog(); like this:
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
Answer: function() {
var answer = $("#dialog-form #answer").val();
alert("your answer : "+answer);
submit_with_ajax(answer);
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
alert("asd");
}
});

You can prevent the default action of an event with event.preventDefault(). I am not 100% sure how the form looks like in jQuery-ui and if preventing the default of the keypress works. As an alternative you can prevent the default action of the submit event which, as you would probably expect, prevents the form from being submitted (as per Gokul's answer). See mdn for more information on event.preventDefault().
$('#answer').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
e.preventDefault();
}
});
-- or --
$('whatevertheuiformis').on( 'submit', function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
e.preventDefault();
}
});

As yours...
<form>
<!-- <form onsubmit="return false"> is an optional -->
<fieldset>
<label for="answer">
<strong>Your Answer : </strong>
</label>
<input type="text" name="answer" id="answer"
class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
//jQuery Version
$('form').submit(function(){
return false;
});
// javascript
document.getElementById('my-form').onsubmit = function() {
return false;
}
$('#answer').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
e.preventDefault();
//alert("enter pressed on answer input");
submit_with_ajax(answer);
}
});
So Here the Form will not submit at all.. so that you can perform your AJAX submission or REQUEST....
Hope it helps...

DEMO
Try this,
Enter the value in input answer and click enter
$(document).ready(function () {
$(document).on('keypress',function(e)
{
if(e.which==13 && $("#answer").val().length>0)
{
alert("hi"); // do your ajax call here
}
});
});
Hope this helps

How to clear the textbox value after 5 sec using JQuery?

I have tried this :
<script type="text/javascript">
$(function() {
$("#button").click( function()
{
alert('button clicked'); // this is calling
setTimeout(function(){
alert('setTimeout'); // this is not calling
document.getElementById('clearTxt').value = "";
}, 9000);
}
);
});
</script>
my HTML code:
<form>
<input type="text" id="clearTxt"/>
<input type="submit" value="Search" id="button" />
</form>
But this code is not working.Please help me to solve this issue.

When I pasted your code into a fiddle, the alert did fire. However the timeout function won't execute because due to the form tags surrounding the inputs, when you click the submit button you navigate away from the page and the timeout doesn't have time to execute. You should either change the submit to a button, or call preventDefault() in the function to stop the form from submitting.
This code works:
HTML:
<form>
<input type="text" id="clearTxt" />
<input type="button" value="Search" id="button" />​
</form>
Script:
$(function() {
$("#button").click( function () {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
document.getElementById('clearTxt').value = "";
}, 5000);
});
});
See http://jsfiddle.net/acfkU/1/

Your code is fine, but you are submitting the form, you can use preventDefault method of the event object and make sure jQuery is loaded in your page.
$("#button").click(function(event) {
event.preventDefault();
//alert('button clicked'); // this is calling
setTimeout(function() {
// alert('setTimeout'); // this is not calling
document.getElementById('clearTxt').value = "";
// $('form').submit();
}, 9000);
});

Instead of adding it to click event you can try adding it on form submit.
function onSubmit() {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
$('#clearTxt').attr('value',"hi");
}, 5000);
return false;
}
Since your are updating the value attribute directly it will take immediate effect in the UI.
If don't want to add to the onsubmit, better change the type of the button from submit.

override the default submit action (that has a preventDefault method) like below:
$("#yourform").submit(function(event) {
event.preventDefault();
});
Here it is:
HTML
<input type="text" cssClass="textField" id="clearTxt"/>
<input type="button" value="Search" id="button" />
JS
$(function(){
$("#button").click( function () {
alert('button clicked');
setTimeout(function(){
alert('setTimeout');
document.getElementById('clearTxt').value = "hi";
}, 5000);
});
});
Demo JSFiddle

jquery: event for simulating live typing

Part 1:
Is there any event I can use to get a callback when the user 'change' the input field. My definition of change is to simulate the following effect. say, I want to update a label while the user typing in the input box. I tried jquery "change" event. It works, but doesn't have the live effect. Once the input field is updated, I have to click on somewhere in the screen to update the label.
Part 2:
well, if this is not a good idea, I may prevent the form being submitted on enter key. Not sure about a good way to do it either. Quick search found this answer.
<form action="" method="post" onsubmit="return false;">
not tested yet, but hopefully the submit button may still works.
EDIT: tested, and onsubmit="return false;" prevents even the submit button.
thanks,
bsr.

This should do it:
input.bind('keydown keypress', function() {
setTimeout(function() {
label.text(input.val());
}, 0);
});
Live demo: http://jsfiddle.net/simevidas/qTBxv/

Part 1
You can just update it every keyUp, but I would suggest you at least wait 1 second after the user finishes typing.
var timer;
var changeTxt = function(){
// Change label text here.
};
$("#myInput").keyup(function(){
clearTimeout(timer);
timer = setTimeout(changeTxt, 1000);
});
Part 2
That example you posted stops a form from submitting. Is that your goal?
EDIT:
I think you are trying to control the form's submission?
$("#myForm").submit(function(){
if(/* Your condition here */){
return false;
//Only if your condition is true, stop form submission
}
});

Did you try out the keydown or keypress event?

I would prefer a combination of both, form and field validation:
Find working sample here: http://jsfiddle.net/ezmilhouse/9mNc4/1/
your html:
<form method="post" action="post.php">
<input type="text" name="" value="" />
<label>Name</label>
<div></div>
</form>
your js:
// prevent form from being posted empty
$('form').live('submit', function(evt){
if ( $('input', this).val() === "" ) {
evt.preventDefault();
alert('Field is required!');
}
});
// validate form field on the fly
var min = 3;
$('input').live('keyup change', function(){
if ($(this).val().length < min) {
$('div').html('<span class="invalid">min. 3 characters.</span>');
} else {
$('div').html('<span class="valid">ok!</span>');
}
});

there is something called oninput that you can use.
<form oninput="xx.value=aa.value">
<input type="text" name="aa" value="">
<output name="xx" for="aa"> </output>
</form>