I can't clear a form with .reset() - javascript

I'm trying to make a form where the user inputs items onto a text box and when they hit "enter" it puts the text into a list. However I also want to clear what they'd put into the form right after they hit enter (sorta like skype). here's my jquery code.
$('#inputpnote').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
var $pnote = document.getElementById("inputpnote").value;
if ($pnote.length > 0) {
$("#pnotes-list").append("<div class='pnote-list'><li>" + $pnote + "</li></div>");
$pnote.reset();
}
}
});
#inputpnote is the text form and #pnotes-list is where I'm putting the text they'd typed.
help would be appreciated thanks!

If #inputpnote isn't the form ID, but a field ID, maybe you'll need to use val:
$('#inputpnote').val('');

Related

Detect Tab Key event on textbox on focus

I have a autocomplete textbox in a form and I want to detect whether user has focussed on the textbox from navigating through tab key press.I mean tabindex has been set up on different form fields and user can navigate fields by pressing tabs.Now I want to perform some action when user directly mouse click/foxus on the textbox and some other action when user has focussed on the textbox through tab.
Below is the code I was trying.But no matter everytime code is 0.
$('#tbprofession').on('focus', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('Tabbed');
}
else
{
alert('Not tabbed');
}
});
This code does not work.
Note:Before marking duplicate it will be good if you understand the question correctly.Else I can make it more clear with more elaborated description.
Anyone can show me some light?
You can try something like that :
$(document).on("keyup", function(e) {
if ($('#tbprofession').is(":focus")) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
alert('I was tabbed!');
} else {
alert('not tabbed');
}
}
});
fiddle : https://jsfiddle.net/xc847mrp/
You can use keyup event instead:
$('#tbprofession').on('keyup', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 9) {
console.log('I was tabbed!', code);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input autofocus>
<input id='tbprofession'>
You could have an array of key events triggered anytime a user presses a key while on your page. Although this makes you think of a keylogger.
Or just keep the last key.
Or a boolean saying if the last key pressed was a TAB or not.
And on focus you can look at that variable.

Javascript TextBox input value is not updating

My requirement is on a keypress I need to get the value of the particular textbox. But the problem is when I press the first letter am getting a blank output. on second keypress am getting the first letter which I have entered in the textbox. Form here on Its getting a one step delay. Is am missing anything.
<script>
document.addEventListener('keypress',function(e){
var keycode = e.keyCode || e.which;
if(document.activeElement.id == 'k_id_234'){
console.log(document.getElementById('k_id_234').value);
}
});
</script>
<input type="text" id="k_id_234">
Text Box : h console : // empty
Text Box : he console : h //only first letter
....
......
Use keyup event instead
document.addEventListener('keyup', function (e) {
var keycode = e.keyCode || e.which;
if (document.activeElement.id == 'k_id_234') {
console.log(document.getElementById('k_id_234').value);
}
});
Demo: Fiddle
jQuery get input value after keypress
Another option is the input event

Disable submit a form in html when press Enter key

I have an HTML form with several text fields. So, I want to move cursor from a text field to next text field when I press the enter key, but the form should not be submitted. How can I do this? If there is a code example it may more helpful to me.
press the tab key on your keyboard instead of enter.
I'm using this function to do what you ask for:
$(document).on("keypress", ".TabOnEnter" , function(e)
{
if( e.keyCode == 13 )
{
var nextElement = $('[tabindex="' + (this.tabIndex+1) + '"]');
console.log( this , nextElement );
if(nextElement.length )
nextElement.focus()
else
$('[tabindex="1"]').focus();
}
});
Use the 'TabOnEnte' class on the fields you want this class to apply on.
Also to prevent user from submittin with enter key:
if (e.which == 13) {
e.preventDefault();
}
i got the answer. it should put in the input tag which we want.
onkeydown='if ((event.keyCode == 13 && document.getElementById("field_0").value!="") && event.which == 13){
document.getElementById("field_1").focus();
event.preventDefault();
}'

protect the text box to not take that blank value after clearing the previous value

I want to protect a text box to not accept any values except numbers. Which I achieved with the following code
function allowOnlyNumber(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
The issue is: when I am entering a number to the text box and saving by clicking UPDATE button linked to it its getting saved which the expected. but Second time when I select the number from that text box and clear it through Delete or Backspace keys from keyboard and clicking on UPDATE button linked to it, the blank value getting updated.
How can I protect the text box to not take that blank value? It should retain the previous valid value.
Use this code piece on OnLoad function
var preVal = $("#txt").val();
$("#txt").change(function()
{
if($(this).val().trim() == '')
{
$(this).val(preVal);
}
preVal = $("#txt").val();
}
);
The working fiddle is here
You can use $.trim() jQuery method to prevent the blank value to get submitted.
Try with this like:
var elem = $('yourelemId').val(); // get the specific value
if($.trim(elem) === ""){ // use trim to remove any whitespace
alert('Your alert msg here');
e.preventDefault();
}
Do this.. Short Code not accepting numbers at all.
$("#txt").keyup(function() {
this.value = this.value.replace(/[^a-zA-Z\.]/g,'');
});
working here http://jsfiddle.net/kz573/1/

Use Enter Key to move to inputs

Is it possible to use the enter key to move to the next input field in a form? I also want to use the tab, but the enter key would be nice too.
FYI - I do have several textareas and I need to use the enter key for returns when they type. Will this be a conflict?
Thank you.
Erik
If you were to add a class called 'TabOnEnter' to the fields where you want to cycle on enter.
$(document).on("keypress", ".TabOnEnter" , function(e)
{
//Only do something when the user presses enter
if( e.keyCode == 13 )
{
var nextElement = $('[tabindex="' + (this.tabIndex+1) + '"]');
console.log( this , nextElement );
if(nextElement.length )
nextElement.focus()
else
$('[tabindex="1"]').focus();
}
});
//Hidden inputs should get their tabindex fixed, not in scope ;)
//$(function(){ $('input[tabindex="4"]').fadeOut(); })
Not as cute as the previous answer, but it works now :
http://jsfiddle.net/konijn_gmail_com/WvHKA/
This way you use a standard HTML feature ( tabindex ) to determine the cycling order. Hidden elements should have their tabindex removed.
Shot in the dark (assuming your textareas are lined up):
$(".myTextareas").keypress(function(e) {
if(e.which == 13) {
$(this).next('.myTextareas').focus();
}
});

Categories