I have a Controller,
that change some values in the "then" of a barcode scanner.
First thing it set the code, then set a "disabled" variable, and then focus an input.
.then(function (barcodeData) {
// Success! Barcode data is here
$scope.selectProdotto = barcodeData;
$scope.txtDisabled = false;
var pageElements = document.querySelectorAll('input[type=number], input[type=text], textarea');
var first_element = pageElements[1];
first_element.focus();
});
The input that i want to focus is ;
<input class='input' type='number' ng-disabled="txtDisabled" />
Now the problem is that the input is still disabled after i changed
$scope.txtDisabled = false;
so when i do .focus() it fail.
After my function finish my input is correctly enabled.
So im asking when are variables applied to DOM ?
How can i wait for the input to be ready and enabled to focus ?
did you try
.then(function (barcodeData) {
// Success! Barcode data is here
$scope.selectProdotto = barcodeData;
$scope.txtDisabled = false;
$scope.$apply();
var pageElements = document.querySelectorAll('input[type=number], input[type=text], textarea');
var first_element = pageElements[1];
first_element.focus();
});
Related
This code checks if the checkbox is enabled on site if it is disabled then it disable the textbox.
Function disableTextBox() is a onclick function and the $(function() is used to check the behavior of the checkbox after refreshing the page, I did not use the localstorage for that because sometimes different browsers are used.
How can I write this code better to do not duplicate it?
If the checkbox is checked then the textbox should be enabled, if the checkbox is not checked then the checkbox should be disabled for any input. It saves the checkbox after clicking save button (that is different functionality) not connected with this problem, and when the user back to the page it should check if the checkbox is checked or not and adjust the textfield.
Any ideas how to write it better or something?
$(function()
{
var checkboxField = document.querySelector('#checkbox');
var textBox = document.querySelector('#textBox');
if (checkboxField.checked == true)
{
textBox.disabled = false;
}
else if (checkboxField.checked == false)
{
textBox.disabled = true;
}
});
function disableTextBox()
{
var checkboxField = document.querySelector('#checkbox');
var textBox = document.querySelector('#textBox');
if (checkboxField.checked == false)
{
textBox.disabled = true;
}
else if (checkboxField.checked == true)
{
textBox.disabled = false;
}
}
Call your disableTextBox() function, and instead of the if/else you could use the evaluated boolean result of checkboxField.checked straight ahead:
function disableTextBox() {
var checkboxField = document.querySelector('#checkbox');
var textBox = document.querySelector('#textBox');
textBox.disabled = !checkboxField.checked;
}
jQuery(function( $ ) {
// Do it on DOM ready
disableTextBox();
// and on button click
$('#btnDisableTextBox').on('click', disableTextBox);
// Other DOM ready functions here
});
prefering this way ;)
in this story every thing is boolean
Don't do testing if a boolean is True to déclare a true value for a if...
const
checkboxField = document.querySelector('#checkbox'),
textBox = document.querySelector('#textBox');
checkboxField.onchange = function()
{
textBox.disabled = !checkboxField.checked;
}
<label> modify texy <input type="checkbox" id="checkbox" checked>
<textarea id="textBox"disable> blah blah bla</textarea>
On click placeholder disappears, on blur it reappears, but if double-click happens instead of 1 click placeholder just disappears forever, turning off double-click default doesn't help either. Is it somehow possible to treat double-click as normal click? Or is it supposed to destroy placehoder?
var input = document.getElementsByTagName("input")[0];
input.onclick = function() {
p_holder = this.placeholder;
this.placeholder = "";
}
input.onblur = function() {
this.placeholder = p_holder;
}
input.ondblclick = function(e) {
e.preventDefault();
}
<input type="text" placeholder="text goes here">
I think this might be what you are looking for.
Comments are in the source code.
var input = document.getElementsByTagName("input")[0];
// Store original placeholder
var p_holder = input.placeholder;
// Remove on focus
input.onfocus = function() {
this.placeholder = "";
}
// Restore on blur
input.onblur = function() {
this.placeholder = p_holder;
}
<input type="text" placeholder="text goes here" />
If you have any questions please leave a comment below and I well get back to you as soon as possible.
I hope this helps. Happy coding!
It is not double click, but two single clicks which are causing this issue, because on the second click, the value of p_holder will be set to ''.
To prevent that, you can check for the value first:
input.onclick = function (){
if (this.placeholder !== '') {
p_holder = this.placeholder;
this.placeholder = "";
}
}
By the way, if you just need to deal with placeholder, you actually don't need to manipulate it. The browser automatically removes it when some value is inserted into the input, and restores it when the value is removed.
Friends i am new to javascript, I am trying to write a script to validate the entire form whenever any input field value is changed of input fiels with the data attribute of required.
HTML
<form>
<input type="text" name="FirstName" class="inputField" data-required="true"></input>
<input type="text" name="MiddleName" class="inputField"></input>
<input type="text" name="LastName" class="inputField" data-required="true"></input>
</form>
SCRIPT
var field, required, isValid, fieldVal;
function validatedForm() {
field = document.querySelectorAll('.inputField');
document.getElementById("submitButton").disabled = true;
var isValid = true;
for(var i=0; i < field.length; i++){
required = field[i].dataset.required;
if(required){
field[i].addEventListener('blur', function(e){
fieldVal = this.value;
if(fieldVal == ''){
isValid = false;
}
checkSubmitBtn();
}, true);
}
}
function checkSubmitBtn() {
if(isValid = true) {
console.log(isValid);
document.getElementById("submitButton").disabled = false;
}
}
}
window.addEventListener("load", validatedForm);
PROBLEM 1:
The isValid is not updating hence even an empty blur on the input field makes the button disable to be false.
PROBLEM 2:
In case there are multiple forms on the page then how to validate only the desired forms .. just like in jQuery we add a script tag in the end to initialize the script according to it.
PROBLEM 3:
Is there a way to change the disable state of the button without the GetElementID ... I mean if that can be managed depending on the submit button of that particular form on the page where the script is suppose to work.
Any help will be highly appreciated. Thanks in advance.
I think you need something like the following form validation..
<script type="text/javascript">
var field, fieldVal, required = false;
function validatedForm() {
field = document.querySelectorAll('.inputField');
document.getElementById("submitButton").disabled = true;
field.forEach(function(elem) {
required = elem.dataset.required;
if(required){
elem.addEventListener('blur', function(e) {
checkSubmitBtn(field);
});
}
});
}
function checkSubmitBtn(field) {
var isDisabled = false;
field.forEach(function(elem) {
fieldVal = elem.value.trim();
if(fieldVal == ''){
isDisabled = true;
return false;
}
});
document.getElementById("submitButton").disabled = isDisabled;
}
window.addEventListener("load", validatedForm);
</script>
I hope it helps...
There are quite a few things going on here. First, your checkSubmitBtn function used a single = operator in the if statement. This won't actually check the variable, it instead will set the variable to that value. Here is the fixed function:
function checkSubmitBtn() {
if (isValid == true) {
document.getElementById("submitButton").disabled = false;
}
}
You mentioned not wanting to use getElementById. There are a few ways around this. One way would be to call the function once and store it in a variable to use later, like so:
var button = document.getElementById("submitButton");
...
function checkSubmitBtn() {
button.disabled = !isValid;
}
Another way would be to use jQuery. It still is technically calling getElementById in the backend, but the code is much simpler. If you wanted to avoid that, you also can still combine this with the technique I described above.
$("#submitButton").attr("disabled", !isValid);
I'd also like to point out that your code doesn't account for a situation where a form goes from invalid (starting point) to valid and back to invalid again. Say a user types in all of the fields but then backspaces everything. Your code will fall apart.
Lastly, your <input> HTML tags should not be closed. There are certain tags that are considered "self-closing", i.e. you don't have to write the closing tag, </input>.
I am filling up a login form using
document.getElementById('i0116').value = email;
document.getElementById('i0118').value = password;
document.getElementById('idSIButton9').click();
Now the problem starts when form is identifying that the value is not filled by any key event, I mean the placeholders remains there even if I fill the form and on submit it says fields are empty.
I was trying to fix it by firing a keypress event on input box before I fill the value. but I am not able to do it.
I tried :
var target = document.getElementById('email');
var evt = document.createEvent("Events");
evt.initEvent("keypress", true, true);
evt.view = window;
evt.altKey = false;
evt.ctrlKey = false;
evt.shiftKey = false;
evt.metaKey = false;
evt.keyCode = 0;
evt.charCode = 'a';
target.dispatchEvent(evt);
also instead of "Events" I tried "UIEVENTS" and "KEYEVENTS" none of them helped , I am using chrome browser.
Just got the hang of what you really are seeking to achieve. You can clear off the placeholder value onClick() and restore the placeholder value using onBlur(), something like the following
function clearPlaceholder(id){
document.getElementById(id).placeholder = "";
};
function restorePlaceHolder(id, placeHolderText){
document.getElementById(id).placeholder = placeHolderText;
};
<input id="10116" placeholder="email" onClick="clearPlaceholder('10116')" onBlur="restorePlaceHolder('10116','email')">
<input id="10118" placeholder="password" onClick="clearPlaceholder('10118')" onBlur="restorePlaceHolder('10118','password')">
Is that what you were looking for?
My Issue was resolved using:
var element = document.getElementById('idTxtBx_SAOTCC_OTC');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
element.dispatchEvent(evt);
It was knockout js, because of which just setting the value of element was not working.so I was trying to keypress.
chanage event triggers "textInput" for knockoutjs, Instead of just setting .value attribute.
I would like to get this function to check the email text box after the textbox has lost focus and not as soon as the user starts to type. So it only guides them after an error in the text box happens on .emailError textbox class.
I really don't want it to start showing error class till after the first try. Only to show green when the correct input has taken place.
var c = 0;
c = parseInt("c");
$('.emailError').on('focusout', function() {
c = 1;
});
if (c == 1) {
$('.emailError').on('keyup focusout', function() {
var regex = /^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
var containsNonEmail = this.value.match(regex);
console.log(containsNonEmail);
if (!containsNonEmail) {
$(".wirelessEmail").css("border", "2px solid #ffeef6");
$(".wirelessEmail").css("background-color", "#ffecf2");
} else {
$(".wirelessEmail").css("border", "2px solid green");
$(".wirelessEmail").css("background-color", "#f5fef2");
}
});
}
You need to have the if else check inside of the function and not on the outside. When it is outside, you will not bind the event.
Better way would be to do the checking so you do not rely on a global variable, this way you could use it more than once on the page. To do that use a data attribute.
$('.emailError').on('keyup focusout', function(evt) {
var tb = $(this);
var once = tb.data("once");
if(evt.type==="focusout" || once) {
if (!once) tb.data("once", "true");
var isError = tb.val().length<5;
tb.toggleClass("error", isError);
}
})
.error { background-color : red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="emailError" />
Use the Onblur function
The onblur event occurs when an object loses focus.
The onblur event is most often used with form validation code (e.g. when the user leaves a form field).