Hey so I am working on a calculator with a form and javascript. I want that when the user clicks in a field and the value is "0" the field gets cleared. When he clicks outside the field while the value is "" I want the field to be filled again with 0. I can easily do so for specific fields like that:
document.forms[0].elements[0].onfocus = function() {
if(this.value == "0") {
this.value = "";
}
};
document.forms[0].elements[0].onblur = function() {
if(this.value == "") {
this.value = "0";
}
};
But I want it to work with every field and I don't want to write this bunch of code for every field and I do not want to use inline references in my html. Which option do I have? Thanks in advance.
Try this.
You can also replace the 'document.forms[0].elements' by 'document.querySelectorAll("form input")', etc.
Array.prototype.slice.call(document.forms[0].elements).forEach(function(element){
element.onfocus = function() {
if(this.value == "0") {
this.value = "";
}
};
element.onblur = function() {
if(this.value == "") {
this.value = "0";
}
};
})
Related
I'd like to enable/disable buttons on key up change conditionally based on a custom data attribute that matches between an input and a button. I've solved it with just one input, but it seems that when I add another one in the mix, the buttons don't seem to enable.
Furthermore, I have a hunch that it's because of .each() but I can't put my finger on it.
Here's the CodePen I've tried and failed on
var validation = $('[data-validation]');
var validate;
validation.on("change keyup", function (e) {
let validated = true;
validation.each(function () {
let value = this.value;
validate = $(this).data('validation');
if (value && value.trim() != "") {
validated = false;
} else {
validated = true;
return false;
}
});
if (validated) {
$('[data-validator=' + validate + ']').prop("disabled", true);
} else {
$('[data-validator=' + validate + ']').prop("disabled", false);
}
});
The key here is to only run your validation code for the input that was changed. As opposed to what you have, which is to run for all inputs.
To get the input that actually changed, you can utilize the .target property of the event object passed to the event handler.
Alternatively, if you remove the validation.each() entirely, it also works. That is because jQuery sets the value of this to be the DOM element (not a jQuery-wrapped element) that actually triggered the event.
var validation = $("[data-validation]");
var validate;
validation.on("change keyup", function (e) {
let validated = true;
let value = this.value;
validate = $(this).data("validation");
if (value && value.trim() != "") {
validated = false;
} else {
validated = true;
return false;
}
if (validated) {
$("[data-validator=" + validate + "]").prop("disabled", true);
} else {
$("[data-validator=" + validate + "]").prop("disabled", false);
}
});
Am validating HTML 5 textbox. if value is not present while submitting the form, i just want to highlight that textbox borederColor to red. if value is present, i want to go with default behavior of the text box.
Please find my code below. Am able to show the borderColor as red if value is not present. But, am not able to reset the default behavior of textbox (like default bordercolor) when value is present in the textbox. Am not sure, what is going wrong here.
var check = document.getElementById('first_name').value;
if ( check == "") {
document.getElementById('first_name').style.borderColor = "red";
} else {
document.getElementById('first_name').style.borderColor = "#eee";
}
Try this :)
var check = document.getElementById('first_name').value;
if (check == "") {
document.getElementById('first_name').style.borderColor = "red";
} else {
document.getElementById('first_name').style.borderColor = "initial";
}
}
You don't even need JS for this
<style>/*only need one of these for all your inputs*/
input:invalid {
border: 2px solid red;
}
</style>
<input type="text" required/>
Further reading at https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation
You need to bind an event listener onchange
var el = document.getElementById('first_name');
el.addEventListener('onchange', function(){
var check = document.getElementById('first_name').value;
if ( check == "") {
document.getElementById('first_name').style.borderColor = "red";
} else {
document.getElementById('first_name').style.borderColor = "#eee";
}
})
Only following code is working for me.
var check = document.getElementById('first_name').value;
if (check == "") {
document.getElementById('first_name').style.borderColor = "red";
} else {
document.getElementById('first_name').style.borderColor = "";
}
}
I have this code that validates if ContentPlaceHolder1_locationTextBox has text in it before newIndex can become 3.
if ((newIndex === 3 && $("#ContentPlaceHolder1_locationTextBox").val() == "")) {
$('#ContentPlaceHolder1_locationLabelV').show();
return false;
}
else {
$('#ContentPlaceHolder1_locationLabelV').hide();
}
However I also have ContentPlaceHolder1_countryTextBox & ContentPlaceHolder1_seaTextBox on the page with thier respective labels, how can I modify the script so that it validates against all textboxes?
I tried adding a horrible or statement however this was causing the page to freeze. What s the best method to check against all three textboxes?
You can add class for all inputs, example: validate
After you can create JS function. You can fire this function as you wish.
function check(){
$('.validate').each(function(){
label = $("label[for='"+$(this).attr('id')+"']");
if ((newIndex === 3 && $(this).val() == "")) {
label.show();
return false;
}
else {
label.hide();
}
});
}
function validate(value) {
if ...
//show div
else ...
// hide div
}
$("input[type='text']").each(function(){
//value from input text field
var myval = $(this).val();
//call validation function
validate(myval);
});
I am trying to make a hidden text-box visible when a particular option value is selected, It works when there are multiple options available obviously because it responds to onChange. How can I get it to work if that is the only option present, the first select box in my Example.
Js Fiddle - http://jsfiddle.net/8bm9R/
This is my Js function
function showOther(fieldObj, otherFieldID) {
var fieldValue = fieldObj.options[fieldObj.selectedIndex].value;
var otherFieldObj = document.getElementById(otherFieldID);
otherFieldObj.style.visibility = (fieldValue == 'other') ? '' : 'hidden';
return;
}
I've updated the JsFiddle:
Basically JsFiddle is misused, the function should be set to be wrapped in the header instead of 'onLoad'.
jsfiddle.net/8bm9R/2/
function showOther(fieldObj, otherFieldID)
{
var fieldValue = fieldObj.options[fieldObj.selectedIndex].value;
var otherFieldObj = document.getElementById(otherFieldID);
otherFieldObj.style.visibility = (fieldValue=='other') ? '' : 'hidden';
return;
}
Cheers
$("select").change(function() {
if($(this).val() == "expected_value") {
otherFieldObj.style.visibility = "visible"
}
else {
otherFieldObj.style.visibility = "hidden"
}
});
How do I disable and make the input field text to hidden when certain value is selected from select list? In my code, I need to disable and make the input text to hidden when "United States" is selected from my drop down.
My HTML:
JSFiddle Link
My Javascript:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none"
} else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block"
}
}
The problem with your fiddle is you have two elements with the same ID. You can do exactly what is already there, just change the ID on either the state dropdown or the text input. Updated code might look like this, if you simply name the text input the same with a 2:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none";
document.getElementById("BillingStateProvince2").disabled = false;
document.getElementById("BillingStateProvince2").style.display="block";
}
else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block";
document.getElementById("BillingStateProvince2").disabled = true;
document.getElementById("BillingStateProvince2").style.display="none";
}
}
If i got the question , simply invert the if condition like this :
if(this.value === "840") { ... }
here is the working fiddle : http://jsfiddle.net/antwonlee/cf4Sz/7/