I am editing todo list plugin in wp , and i don't know how to make sure that empty task cannot be added on Enter key.
I have tried , but it does not work .
if(e.which == 0) {
echo '<script>alert("Cannot be empty")</script>;
}
Full section
// check pressed keys and then do action accordingly.
function check_key(e , ele) {
//detect enter
if(e.which == 13) {
add_new_note();
}
//detect backspace
if(e.which == 8) {
if(jQuery.trim(jQuery(ele).val()) == '') {
if(jQuery('.sm_at_textarea_div').length > 1 ) {
jQuery(ele).closest('.sm_at_textarea_div').prev().find('input').length ) ;
This line here is looking for to check if the key is null.
if(e.which == 0) {
echo '<script>alert("Cannot be empty")</script>;
}
This is not what you're looking for. You need to validate if the input element's value is null or empty.
I can't see all your script but in your add_new_note() function, you should validate the value and then alert the error message if needed.
Something like this:
function add_new_note() {
//get the value
var value = $('#myInputfield').val();
if (value === '') {
alert("Cannot be empty")
}
else {
//... do whatever the function already does.
}
}
By the way, you seem to be mixing PHP and jQuery without any logic to it. In the line below, you're already in javascript and you're echoing a new <script> tag. This will give you errors.
if(e.which == 0) {
echo '<script>alert("Cannot be empty")</script>;
}
Related
I'm creating a way to type anywhere by intercepting the keydown event instead of using a text box for a project. I'm having trouble finding out how to implement the backspace. This is a shortened version of my code:
$(document).keydown(function(event){
typed = String.fromCharCode(event.keyCode);
display += typed;
document.getElementById("text").innerHTML = letterContainer;
});
I was trying to use the .replace function like this...
if (event.keyCode == 8) {
display.replace(typed,'');
}
...and put it at the beginning, but that doesn't work. Any ideas?
You're getting there. How are you emptying the text in the input tag?
if (event.keyCode == 8) {
display.replace(typed,'');
// ^ This does not change the value of the <input>
}
I'd suggest something like:
function isDeleteKeyCode(event) {
return event && event.keyCode === 8;
}
function resetValue(element) {
element.value = '';
}
$('#input-id').keydown(function(event) {
if (isDeleteKeyCode(event)) {
resetValue(event.target);
}
// ^ This can be simplified as: isDeleteKeyCode(event) && resetValue(event.target)
});
That would add a keydown listener to an input tag with id="input-id".
Demo: https://jsfiddle.net/pp16tru7/
var display = '';
$(document).keydown(function(event) {
var typed = String.fromCharCode(event.keyCode);
// if backspace, get text without the last character, else add character to display
if (event.keyCode === 8) {
display = display.substr(0, display.length - 1);
} else {
display += typed;
}
document.getElementById("text").innerHTML = display;
});
How can I ALERT and PREVENT users from clicking on any elements with the class .popup_element if any VISIBLE INPUTS with class .weight have NO value
Below code is what I tried myself but doesn't seem to work.
$(".popup_element").click(function() {
'' == $(".weight:visible").value &&
alert("Please Select Value First.")
event.preventDefault();
}),
You can do it like this:
$(".popup_element").click(function(event) {
var foundNoValue = false;
$(".weight:visible").each(function(){
if($.trim($(this).val()) == "")
{
foundNoValue = true;
}
});
if(foundNoValue){
alert("Please Select Value First.")
event.preventDefault();
}
})
You can use the .filter() method to test for any blank values:
$(".popup_element").click(function() {
if ($(".weight:visible").filter(function() { return this.value === ""; }).length > 0) {
alert("Please Select Value First.")
event.preventDefault();
}
})
(If you need to treat nothing-but-spaces inputs as blank just use this.value.trim() === "".)
I know I shouldn't really be encouraging your shortcut && instead of if code, but if you want to do that you can have it run multiple statements by using parentheses and the comma operator:
$(".popup_element").click(function() {
$("input").filter(function() { return this.value === ""; }).length && (
alert("Please Select Value First."),
event.preventDefault()
);
});
I'm trying to implement a form with multiple buttons on it. When I press enter I want to have my default button submitted. This code from http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/ generally works:
$(function() {
$("form input").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$('button[type=submit].default').click();
return false;
} else {
return true;
}
});
});
but...
when I type in input field I have an autocomplete popup so when I press enter in this popup I expect to put this value to input field, not submit all form. Can I check somehow if this enter comes from popup? Or I should try to do this different way?
EDIT:
I think I didn't say it clear. This popup is not any part of jquery. It's standard popup that shows previously typed data into input. So it hasn't got any class nor id. Stop propagation doesn't work either. None of solutions below resolve this problem
You could use :visible to see if the dropdown div for the autocomplete is open, and then prevent the enter key action of your code completing. Something like this:
$("form input").keypress(function(e) {
var key = e.which || e.keyCode;
if (key == 13 && !$(".autocomplete").is(":visible")) {
e.preventDefault();
$('form').submit();
}
});
You could also use event.stopPropagation() on the enter key press in the autocomplete function, however you'll probably have to amend the source manually which isn't ideal.
Before return false;
write
e.preventDefault();
or/and
e.stopPropagation();
$("form input").keypress(function (e) {
if (e.target.id !== "autoCompliteId" && ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13))) {
$('button[type=submit].default').click();
return false;
} else {
return true;
}
});
I modified my code and it works now.
I have an enum called Operation in my command and I set different value of the field before every submit button eg:
<input type="submit" value="do sth" onclick="setOperationAndSubmit('DO_STH')"/>
<input type="submit" value="next" onclick="setOperationAndSubmit('DEFAULT')"/>
function setOperationAndSubmit(operation) {
if (document.myForm.elements['operation'].value === '') {
document.myForm.elements['operation'].value = operation;
}
document.myForm.submit();
}
Then I have my action that listens to keypress and it set appropriate operation on every enter key:
$(function() {
$("form input").keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
document.myForm.elements['operation'].value = 'DEFAULT';
}
});
});
so default action is executed when I press enter
I doing a field validation using jquery to check if it is empty. If it is I want to display a message and then refocus on the field so the user can enter some data. Code:
$('#fieldId').blur(function() {
var fieldValue = $(this).val();
if(fieldValue == null || fieldValue.length == 0) {
$(this).addClass('error');
// show error message
$('#errorDivId')
.text('You must enter a value in this field')
.show();
$(this).focus();
}
else {
if ($(this).is('.error')) {
$(this.removeClass('error');
$('#errorDivId').hide()
}
}
});
It sort of works but it moves the cursor to the next field and not the one I refocused on.
You can try this:
$('#fieldId').blur(function(evt) {
var fieldValue = $(this).val();
if(fieldValue == null || fieldValue.length == 0) {
$(this).addClass('error');
// show error message
$('#errorDivId')
.text('You must enter a value in this field')
.show();
this.focus();
evt.preventDefault();
}
else {
if ($(this).is('.error')) {
$(this.removeClass('error');
$('#errorDivId').hide()
}
}
});
However that may not completely solve the problem, as some browsers might be confused. As an alternative, wrap your "focus" call up as a timeout and run it after the current event finishes:
var self = this;
setTimeout(function() { self.focus(); }, 1);
It's kind-of a hack but it should also work.
edit — #Gus is right about which "focus()" to call
The blur event is triggered during a focus change (as the control you are validating loses focus). This could cause weird behaviour if you try to alter the focus while it is already changing. Instead of blur, try attaching the validation to the change event.
Also, there's no need to call the jQuery version of focus: $(this).focus(), you can just call this.focus().
$('#fieldId').change(function() {
var fieldValue = $(this).val();
if(fieldValue == null || fieldValue.length == 0) {
$(this).addClass('error');
// show error message
$('#errorDivId').text('You must enter a value in this field').show();
this.focus();
} else {
if ($(this).is('.error')) {
$(this).removeClass('error');
$('#errorDivId').hide()
}
}
});
I have an if statement that needs to look like this:
UPDATE
$("input#textbox").keypress(function(e){
key==e.which;
if($("input#textbox").length <=7 && (key===13 || $("div#search-button").click())){
/////SOME FUNCTION////
};
});
I'm trying to execute the "SOME FUNCTION" area only if the input length is <=7 and either the enter button is pressed or the "search" button is clicked.
Furthermore, I want to combine these 2 different function initiators so that they execute the same function but don't know how to do it:
$("input#textbox").keypress(function(e){
FUNCTION A
};
AND
$("div#search-button").click(function(){
FUNCTION A
};
EDIT:
This is what you have to do:
I am assuming that you want the text length and not number of textboxes.
You want to execute FunctionA when enter is pressed on textbox or search button is clicked:
$("input#textbox").keypress(function(e){
key==e.which;
if (key === 13) // if enter is pressed
{
if ("#textbox").val().length >= 7) //if textbox has more than 7 characters
{
functionA();
}
}
});
$("div#search-button").click(function(){ functionA();});
HTH
This is how I would do it:
$("#search-button").click(function(){
$("#textbox").keypress(function(e,clicked){
(clicked || e.which===13) && $(this).val().length < 8 && functionA();
}).trigger("keypress",[true]);
});
function functionA(){
alert("hey!");
}