I assign the desired tags with class='ShowSave', make sure the SaveButton container is not displayed at start up, then display the SaveButton container when a keyup event occurs (data entry).
Everything works fine except the tab key also triggers a keyup event causing the SaveButton container to show when no data has changed. I tried just using $(".ShowSave").change(), but the SaveButton container only displayed after I left the field. That's not desirable.
jQuery:
$(".SaveButton").css({'display':'none'});
$("input.ShowSave").keyup*( function(){ $(".SaveButton").css({'display':'block'}); } );
HTML:
<form>
<td><input class='ShowSave' name="foo" type="text" value='foo' tabindex='1'></td><
<td class='SaveButton' ><img class='SaveImage' onClick='jsPostMe()' /></td>
</form>
Thanks ahead of time for any advice. I'm using straight jQuery with no plug-ins.
You want to test for the keycode if your keyup event. Something like this:
$("input.ShowSave").keyup(function(e){
var code = e.which;
//keycode 9 = tab
if(code == 9) {
return;
}
//do something
});
Here is a working example
This of course will mean that other keys may also be pressed that are not valid. You could also include a check for those key codes (here is a list), but it would be better if you instead tracking the original value of the textbox and then checked for a change on keyup.
Something like this (note: it makes use of data attributes):
<input data-original="old" value="old" class="ShowSave" />
$("input.ShowSave").keyup(function(e){
var original = $(this).data("original");
var newValue = $(this).val();
//check if value has changed
if(original == newValue){
$(".SaveButton").hide();
}
else{
$(".SaveButton").show();
}
});
Here is an example for this
something like this
$("input.ShowSave").keyup(function(e){
if(e.which != 9){
$(".SaveButton").css({'display':'block'});
}
});
Related
Okay, I have been messing around with this for a few hours now and decided to ask. I have searched StackOverflow and Google, with no resolution. I am trying to change the text of a button, like below.
<input id="btnRegUpdate" type="submit" onclick="updatePrice(1)" value="Correct">
The updatePrice() function is called and checks a few things and at the end I have an if statement that checks the value to see if it is Correct, if it is, it will change the text, or suppose to.
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct'){
logMessage("Button was correct");
btnRegUpdate.text("Update");
}
At this point I have tried everything in this solution jQuery change button text with nothing working. I get the logMessage, but the button still doesn't change.
UPDATE: Nothing seems to be working. I tried everything again in a new function, just in case the other logic was messing with something. After doing a quick test to see if the text was change
function updatePrice2(val, e) {
e.preventDefault();
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct') {
logMessage("Button was correct");
btnRegUpdate.val("Update");
}else if(btnRegUpdate.attr('value') == 'Update'){
logMessage('Button was update');
btnRegUpdate.val("Correct");
}
}
and the console shows that it changed but doesn't on screen.
Change the innerHTML not the text. Like so:
btnRegUpdate.html("Update");
EDIT:
Just noticed you're using a <input> not a <button>, change the value property:
btnRegUpdate.attr('value', 'Update');
You need
btnRegUpdate.attr("value", "Update")
instead of
btnRegUpdate.text("Update");
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.val() == 'Correct'){
btnRegUpdate.attr('Value',"Update");
}
Try using btnRegUpdate.attr('Value',"Update");
Demo
Try this:
Prevent default action of submit button
Change the value of button using val()
function updatePrice(val, e) {
e.preventDefault();
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct') {
console.log("Button was correct");
btnRegUpdate.val("Update");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="btnRegUpdate" type="submit" onclick="updatePrice(1,event)" value="Correct">
The input element's text is defined by its value attribute, not content. To change the text, update the value attribute:
btnRegUpdate.attr('value', "Update");
instead of
btnRegUpdate.text("Update");
With jQuery you can use .html() to change the contents. It works the same as javascript's .innerHtml
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct'){
logMessage("Button was correct");
btnRegUpdate.html('Update')
}
Add return false to the click handler.
<input id="btnRegUpdate" type="submit" onclick="updatePrice(1); return false;" value="Correct">
Otherwise the page will attempt to submit and reload.
Your function look good and i don't know it's not working.
function updatePrice2(val, e) {
e.preventDefault();
var btnRegUpdate = $('#btnRegUpdate');
if (btnRegUpdate.attr('value') == 'Correct') {
logMessage("Button was correct");
btnRegUpdate.val("Update");
}else if(btnRegUpdate.attr('value') == 'Update'){
logMessage('Button was update');
btnRegUpdate.val("Correct");
}
}
I suggest you check in your page and find id "btnRegUpdate", maybe it appear more than one.
I currently have some js for phone number validation that is using inline event listeners in the input field. I need to change this example so that instead of attaching the event listeners inline, I would be targeting the DOM element in jQuery and adding the event listeners. Here's a working example of what I have so far: http://jsfiddle.net/yVdgL/21/
window.mask = function (e,f){
var len = f.value.length;
var key = whichKey(e);
if((key>=47 && key<=58) || (key>=96 && key<=105))
{
if( len==1 )f.value='('+f.value
else if(len==4 )f.value=f.value+')'
else if(len==8 )f.value=f.value+'-'
else f.value=f.value;
}
}
function whichKey(e) {
var code;
if (!e) var e = window.event;
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
return code
}
and
<input type="text" name="phone" id="phone" onkeydown="mask(event,this)" onkeyup="mask(event,this)" maxlength="13" />
I tried this but was unable to achieve the functionality that I need.
i have update you jsfiddle example:-
jQuery(document).ready(function(){
jQuery('#edit-phone1').keyup(function(event){
mask(event,this);
});
jQuery('#edit-phone1').keydown(function(event){
mask(event,this);
});
});
click here to see working example:-
http://jsfiddle.net/yVdgL/38/
or you can try :-
$(document).ready(function() {
$('#edit-phone1').on("keyup keydown", function(e) {
mask(e, this);
});
});
link for this is:-http://jsfiddle.net/yVdgL/56/
In older, pre-HTML5 browsers, $("#phone").keyup( function ) or keydown is definitely what you're looking for.
In HTML5 there is a new event, "input", which behaves exactly like you seem to think "change" should have behaved - in that it fires as soon as a key is pressed to enter information into a form. $("#phone").bind('input',function);
You never defined event.
jQuery('#edit-phone1').keyup(function(){
jQuery('#edit-phone1').mask(event,this); //<-- what is event?
});
just add it
Second issue is you are treating window.mask like a jQuery plugin and it is not a plugin.
jQuery('#edit-phone1').keyup(function(event){ //<-- add event here
mask(event,this);
});
I want to be able to press tab once the .editbox is clicked and it take the focus to the next .editbox. I have been messing with the code for an hour now and cannot "find" the next element.
Here is my code to do it. For help you will likely need more context. I made a jsfiddle to elaborate on what I am dealing with.
//on tab
$(".edit_tr").on('keydown', '.editbox', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var focus = $(document.activeElement);
//console.log(focus);
focus.closest('td').siblings('.editbox').focus();
console.log(focus.parent().next('.editbox'));
}
});
On line #41 you have to go with:
focus.closest('td').next().find(".editbox").show().focus();
This will go back to the current td, look for the following td tag, search for .editbox and before you can focus() on it you have to show() it (make it visible) first.
This solution will only work for 1 line. If you want to move between different lines with the tab key you'll have to do the following:
var nextEditbox = focus.closest('td').next().find(".editbox");
//check if there are still .editboxes on the same line
if(nextEditbox.length){
//go for it and focus the next edit box on the same line
nextEditbox.show().focus();
}
else {
//move to the next line and search for the next editbox
nextEditbox = focus.closest('tr').next().find(".edit_td:first").find(".editbox");
//show and focus
nextEditbox.show().focus();
}
//this will end the focusing and the .change() (which is defined above) will fire and do the ajax
focus.blur();
You'll have to do the hiding of the .text elements yourself.
Edit: Here's the Savebutton-Solution. I didn't test it, but I think it should work.
var changes = [];
$(".editbox").change(function(){
changes.push({ id : $(this).attr("id"), changed : $(this).attr("name"), data : $(this).val() });
});
$(".savebutton").click(function(){
//AJAX SENDING THE changes VAR TO THE PHP FILE
});
It seems that
$(".edit_tr").on('keydown', '.editbox', function(e) {
Should be
$(".edit_td").on('keydown', '.editbox', function(e) {
Besides, JQuery editTable may meets your requirements.
Right now the value of an input text field changes upon the successful match in my code. It looks like this:
if(jsonResponse.id != null) {
document.getElementById('product_id').value = jsonResponse.id;
}
The problem is that if, i.e., I have a product with id=200 and a product with id=2003, then when a user wants to search for 2003, the moment the typed value is 200 - the input field text will change with the corresponding answer for 200, instead of 2003. This is not convenient.
So my goal is to add some additional check (or something like that), that will allow document.getElementById('product_id').value = jsonResponse.id; only after the cursor is not anymore in the input text field (when the field is not selected anymore).
To run a function when a text field loses focus, you can use jQuery's blur event handler:
$('.mytextfield').blur(function(){
var value = $(this).val();
// use value
});
jsbin example
You wait for user to press enter, as soon as user press the enter then process the text.
document.onkeypress = function(e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (charCode==13) { //ENTER PRESSED
/* your code */
}
};
You can do also like this:
<input type="text" name="name" value="" onblur="yourFunction();"/>
Or by Jquery.
Is there a way to stop a webpage from refreshing completely when the enter button is pressed in a input text element?
I'm looking to create a search field that I can get the text from when enter is pressed to filter objects and only display the ones that contain text from the search field.
I've tried the following to try and catch the enter button but it does not work.
function setupSearchField() {
document.getElementById("searchField").onKeyDown = function(event) {
var holder;
if (window.event) {
holder = window.event.keyCode;
} else {
holder = event.which;
}
keyPressed(holder);
}
}
function keyPressed(key) {
if (key == 13) {
event.cancelBubble = true;
return false;
}
}
If the input element is inside a form, and that form is not actually being submitted to the server, remove the form.
The reason your code doesn't work is becaue the onkeydown event should be in lowercase, and you aren't actually returning something in it (try return keyPressed(holder); - or just move the keyPressed function's code into setupSearchField, since it seems kind of pointless to me to have it as a separate function).
This happens when there is only one text input, regardless of whether your button (if any) has type="submit" or not. It's documented here.
http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2
So, as suggested by other people earlier, you then have to simply stop this default behavior.
Is your search field inside a element ? Then hitting 'enter' fires a submit event to the form element.
In this case you could process your filtering by defining onsubmit on the form element.
<form id="searchForm">
<input type="text" name="search" />
</form>
<script>
document.getElementById('searchForm').onsubmit = function() {
var searchValue = this.search.value;
// process
return false;
}
</script>
Something like this maybe.
Just add the following javascript code to your Visualforce page:
<script type='text/javascript'>
function stopRKey(evt)
{
var evt=(evt) ? evt : ((event) ? event : null);
var node=(evt.target)?evt.target:((evt.srcElement)?evt.srcElement:null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>