I build a regsiter form - and handler function for check the values of the inputs.
When someone focus on input or keyup something - a checking function is running.
Now I'm trying to make a handler for drop text into the input.
I want to run the validation when the user drop text into the input (ex. select some text in the page and drag and drop it into the input).
What I found out is when the user drop the text into the input - the value of the input isn't updating. only when the user exit the input (focusout?) the input value is updating.
What can I do for making the on drop event update the value in the time the text is dropped into the input, and not only after the user is exit the input???
Example of my code:
$("#register_form input").on("keyup focus change", function(){
index = $(this).parent().index();
// except submit input
if (index != 4) {
var input_name = $(this).attr("name");
if (input_name == "register_password") {
formInputHandler($(this), input_name, index);
formInputHandler($("input[name='register_repassword']"), "register_repassword", 3);
} else {
formInputHandler($(this), input_name, index);
}
// check submit change
formSubmitHandler();
}
});
$("#register_form input").on("drop", function(event){
???
});
Related
Okey, here goes my big problem:
I have this form, which has a submit button that only enables when you have checked and filled both inputs (there is no problem with that). If you follow these steps, you will realize where my problem is:
Load this jsfiddle https://jsfiddle.net/ozLmdx4o/ don't pay to much attention to the code now, just look at the form: there is a default profile image, an empty input text, an unchecked input radio, and a disabled submit button.
Test the form: fill the input text and check the input radio and observe how the default profile image changes to another image. Check and uncheck the input radio to observe how the image is linked to this input. This is the key of all this.
But, what if your input text was filled wrong? so delete whatever you entered in the input text and start over again... but...what? The image has returned to the default profile image! even if it was linked to the input radio! why???
Why this happens?
Now you can check the code, because there must be somewhere something I have missed. Can anybody help me to keep the image linked to the input radio button?
input radio button unchecked = default profile image.
input radio button checked = special image.
//INPUT RADIO ON & OFF CODE
var prv1;
var markIt1 = function(e) {
if (prv1 === this && this.checked) {
this.checked = false;
prv1 = null;
} else {
prv1 = this;
}
checkIfValid();
if (!e.target.checked) {
var img = document.getElementById('theimage');
img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
}
};
//TURN ON AND OFF FUNCTIONS
$(function() {
$('input.whatever_class').on('click', markIt1);
$('input[type=text]').on('keyup', markIt1);
});
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
//CHANGE IMAGES
function changeImage(imgName) {
image = document.getElementById('theimage');
image.src = imgName;
}
function checkIfValid() {
var current = $('input[type=radio]:checked');
if ((current.length >= 1) && ($('input[type=text]').val() != "")) {
sbmtBtn.disabled = false;
} else {
sbmtBtn.disabled = true;
}
};
I would like the image to not change anytime I modify the input text.
Can anyone fix my code just the necessary to solve that problem?
Thanks!
Add this check:
if (!e.target.checked && !document.getElementById('whatever_id').checked) {
var img = document.getElementById('theimage');
img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
}
It is running the check function on input text and not getting checked and hence the problem. Hope it helps.
PS: I have kept e.target.checked but if not required then you can remove it.
You're using markIt1() as an event handler for both the textbox and the radio button. The value of e.target.checked is misleading because e.target could be the textbox or the radio button. e.target.checked always returns false for the textbox. I would use a separate event handler for each.
I have a div which contains an input element to enter some values. These values are added just above the div as a list element upon pressing enter or onFocusOut event. To this point it is fine. But if user types some value and does not press enter and directly clicks on save button, the onFocusOut function for that div should not be called. Instead it should take that typed value and call some save function. Do you have any suggestion on how to detect it?
My code snippet is here
JS:
divInput.onkeypress = function (event){
return someTestFunc();
}
divInput.tabIndex="-1";
$(divInput).focusout(function (e) {
if ($(this).find(e.relatedTarget).length == 0) {
addToList();
}
});
It is not a very delicate solution, but you could use a setTimeout before adding the item to the list and clear the setTimeout on save.button click.
Try this:
var $saveButton = $('#exampleButton')[0],
$divInput = $('#exampleInput')[0],
timedEvent = -1;
$($saveButton).on('click', function(event){
if(timedEvent) {
clearTimeout(timedEvent)
}
alert('not add to list & save');
})
$divInput.tabIndex="-1";
$($divInput).on('focusout', function(e) {
timedEvent = window.setTimeout(function() {
if ($(this).find(e.relatedTarget).length == 0) {
alert('add to list');
}
}, 200);
});
Check this working fiddle
I am handling the content inside a textarea using binding a function to the event "input propertychange"
Like this:
$('#textarea').bind('input propertychange', function () {
var textarea = document.getElementById('textarea');
window.lastLineWriting = textarea.value.substr(0, textarea.value.length).split("\n").length;
var writingOnLine = textarea.value.substr(0, textarea.selectionStart).split("\n").length;
if (writingOnLine < window.lastLineWriting) {
//dont write on textarea
}
});
I don't know how to prevent the char typed by the user's keyboard to appear on the textarea... Inside that if I want to prevent the text to be inserted on textarea..
How can I do this?
you could easily stop the user from typing with this code, using jQuery:
$('textarea').bind('keypress', function (e) {
e.preventDefault();
return false;
});
NOTE:
this code will prevent the user from typing in all the textareas, to bind it specifically to one or some selected elements, you must change the selector to the desired elements.
var editable = false // Your Condition
if(editable != "true"){
$("#textarea" ).attr("disabled",true);
}
How do I get the index of the current input text field I'm currently in? I'm trying to jump to the next input field after pressing enter. This is what I've got:
var index = $('input:text').index(this);
$('input:text')[nextIndex].focus();
But it's not going to the next one..
The following code should work fine:
$("input").keypress(function(e) {
if (e.which == 13) {
var index = $("input[type='text']").index(this);
$("input[type='text']").eq(index + 1).focus();
e.preventDefault();
}
});
DEMO: http://jsfiddle.net/uJsMQ/
I have a bunch of controls:
When a user clicks the Generate button, a function uses all of the values from the other controls to generate a string which is then put in the Tag text box.
All of the other controls can have a value of null or empty string. The requirement is that if ANY of the controls have no user entered value then the Generate button is disabled. Once ALL the controls have a valid value, then the Generate button is enabled.
What is the best way to perform this using Javascript/jQuery?
This can be further optimized, but should get you started:
var pass = true;
$('select, input').each(function(){
if ( ! ( $(this).val() || $(this).find(':selected').val() ) ) {
$(this).focus();
pass = false;
return false;
}
});
if (pass) {
// run your generate function
}
http://jsfiddle.net/ZUg4Z/
Note: Don't use this: if ( ! ( $(this).val() || $(this).find(':selected').val() ) ).
It's just for illustration purposes.
This code assumes that all the form fields have a default value of the empty string.
$('selector_for_the_parent_form')
.bind('focus blur click change', function(e){
var
$generate = $('selector_for_the_generate_button');
$generate.removeAttr('disabled');
$(this)
.find('input[type=text], select')
.each(function(index, elem){
if (!$(elem).val()) {
$generate.attr('disabled', 'disabled');
}
});
});
Basically, whenever an event bubbles up to the form that might have affected whether the generate button ought to be displayed, test whether any inputs have empty values. If any do, then disable the button.
Disclaimer: I have not tested the code above, just wrote it in one pass.
If you want the Generate button to be enabled as soon as the user presses a key, then you probably want to capture the keypress event on each input and the change event on each select box. The handlers could all point to one method that enables/disables the Generate button.
function updateGenerateButton() {
if (isAnyInputEmpty()) {
$("#generateButton").attr("disabled", "disabled");
} else {
$("#generateButton").removeAttr("disabled");
}
}
function isAnyInputEmpty() {
var isEmpty = false;
$("#input1, #input2, #select1, #select2").each(function() {
if ($(this).val().length <= 0) {
isEmpty = true;
}
});
return isEmpty;
}
$("#input1, #input2").keypress(updateGenerateButton);
$("#select1, #select2").change(updateGenerateButton);
The above assumes that your input tags have "id" attributes like input1 and select2.