Javascript seems not working to load image when page loads - javascript

I'm using Javascript to make my checkboxes larger. Doing this I use image one for black checkbox and another one with the checked checkbox. It works like the real checkbox. However, when the page loads, the black checkboxes are not successfully loaded unless I click somewhere in the page to invoke them. Please check here to the page.
Belowing is my js code which I think it will impact this:
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
} else {
span[a].style.background = unchecked;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
}
Below is my image on form load:
And this is my page when clicking on anywhere:
Which other functions and variables are already defined. Thus could anyone help me to enable them to display whenever the form loads?

I don't known why you use that
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
} else {
span[a].style.background = unchecked;
}
}
But when I open your script in http://checkintonight.freeiz.com/js/custom-form-elements.js
Try to call function clear() in end of Custom.init(), it works
init: function() {
//
...
//
this.clear();
}
Sorry for my bad English

Eventually, I found a bug in my Javascript code. I add the else statement in the init() function to test if the checkbox is also not checked. So the code becomes like below:
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
}
} else {
span[a].style.background = unchecked;
}
Then it works! Thanks everyone that reviewed and answered to my question.

Related

How can I get 2 textboxes to change value based on dropdown menu selection?

I'm writing javascript if statements that change the value inside of textboxes based on dropdown selection. I have 2 textbox fields and 2 Dropdown menus.
DDB and DDA are my dropdown menu ids.
TextBox1 and TextBox2 are my textbox ids.
The code I currently have works, except the value in TextBox1 always stays on -90.4567 regardless of my selection. On the otherhand, TextBox2 changes based on my dropdown selection and works perfectly.
Anything wrong in my javascript code that's causing TextBox2 to stay constant on -90.4567?
<script>
function Blah(value) {
var test = document.getElementById("<%=TextBox1.ClientID %>");
var test2 = document.getElementById("<%=TextBox2.ClientID %>");
var ddlB = document.getElementById("<%=DDB.ClientID %>");
var ddlA = document.getElementById("<%=DDA.ClientID %>");
if (ddlB.value == "10.1" && ddlA.value == "Inside") { test2.value = '10.1234' } { test.value = '-90.1234' }
if (ddlB.value == "10.2" && ddlA.value == "Inside") { test2.value = '20.1234' } { test.value = '-90.2345' }
if (ddlB.value == "10.3") { test2.value = '30.1234' } { test.value = '-90.3456' }
if (ddlB.value == "10.4") { test2.value = '40.1234' } { test.value = '-90.4567' }
}
</script>
When you need an if to execute multiple lines of code, they all must be wrapped in a single block like so:
if (condition) {
//multiple lines of code
}
By doing it your way, the second block is always going to execute, regardless of the condition. Because test.value = '-90.4567' is last, that's what it will end up being set to.
Check out this example, and notice how the second block is always executed:
if (false) {console.log("true")} {console.log("false")}
Your conditions should probably look more like this, although admittedly they could afford to be cleaned up using some else ifs.
if (ddlB.value == "10.1" && ddlA.value == "Inside") {
test2.value = '10.1234';
test.value = '-90.1234';
}
if (ddlB.value == "10.2" && ddlA.value == "Inside") {
test2.value = '20.1234';
test.value = '-90.2345';
}
if (ddlB.value == "10.3") {
test2.value = '30.1234';
test.value = '-90.3456';
}
if (ddlB.value == "10.4") {
test2.value = '40.1234';
test.value = '-90.4567' }
}
You need the onchange event on the dropdown list with jQuery:
$(document).ready(function () {
$(':checkbox').change(function () {
if($(this).val() == $VALOR1){
// Código para valor 1
}else{
//Código para valor 2
}
});

DOM not being manipulated from inside a function that is being triggered properly

I have written this function to validate that all form fields and check boxes in a form are filled out. The script automatically disables the submit button and then watches for the moment at which it can be re-enabled. My debugger statements are landing me in all of the proper places, but for some reason, the DOM element is not being updated. I'm sure I am just making a stupid mistake, but can't seem to find a solution. Thank you in advance for any help!
Specifically looking at this section:
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
Here is the whole script below.
$(document).ready(function() {
validateInput();
$('.validate').keyup(function(event){
validateInput();
});
$('[type=checkbox]').click(function(event){
validateInput();
});
function validateInput() {
var valid = 0;
var checkBox = $('[type=checkbox]');
var inputFields = $('input.validate');
var inputLength = inputFields.length + checkBox.length;
inputFields.each(function() {
if($(this).val() !== '') {
valid++ ;
}
});
checkBox.each(function() {
if($(this).prop('checked')) {
valid++ ;
}
});
if(valid === inputLength) {
updateBtnStatus('enable')
} else {
updateBtnStatus('disable')
}
}
function updateBtnStatus(status) {
var btn = $('input[type="submit"]');
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
}
});

Trying to define function inside html of popModal jQuery library

I am trying to copy the functionality of JSFiddle#1 into my JSFiddle#2
Brief Description of above two fiddles:
1) JSfiddle #1 : When a user selects third option from the dropdown menu, it displays the alert popup.
2) JSFiddle #2: I have tried to plug in the JSFiddle #1 code into this fiddle inside the html: $('#name_status_popup_dialog').html(), as shown in the fiddle (commented lines of code) but it doesn't work. The reason I am putting it inside html: $('#name_status_popup_dialog').html(), is because it is responsible for displaying the HTML contents in the dialog. Here is the documentation of html parameter used in the popModal library. Am I defining the function for the popup dialog correctly inside html() for JsFiddle #2? Please advise. Thanks
It's as simple as putting the code outside of html callback. See this Fiddle.
jQuery(function($) {
var id_value;
$(document).on('change', '#change_name_statusName', function checkSelection() {
const change_name_statusNameVal = this.value
console.log("Am I in change listner?");
if (change_name_statusNameVal == "First") {
id_value = 1000;
} else if (change_name_statusNameVal == "Second") {
id_value = 2000;
} else if (change_name_statusNameVal == "Third") {
alert("Are you sure you want to select third option?");
id_value = 3000;
} else if (change_name_statusNameVal == "Fourth") {
id_value = 4000;
}
});
$("#change_name_status").click(function() {
$('#change_name_status').popModal({
html: $('#name_status_popup_dialog').html(),
onOkBut: function() {
var change_name_statusNameVal = $("#change_name_statusName").val();
if (change_name_statusNameVal == "First") {
id_value_ = 1000;
} else if (change_name_statusNameVal == "Second") {
id_value_ = 2000;
} else if (change_name_statusNameVal == "Third") {
alert("Are you sure you want to select Third option?");
id_value_ = 3000;
} else if (change_name_statusNameVal == "Fourth") {
id_value_ = 4000;
}
}
});
});
});
Also, notice that I attached the event listener on the document not the element itself since the element is dynamically generated.

combine checkbox alert function with detect function

the goal here is to detect if a user is checking out on my site and then prompt them with a special alert if they uncheck a box.
how do i combine to two functions to do this?
the detect function so far is this
var pathArray = window.location.pathname.split('/');
if (pathArray.length >= 3) {
if (pathArray[1].toLowerCase() == "commerce") {
var page = pathArray[2].toLowerCase();
if (page.indexOf("show-cart") == 0) {
console.log("Detected the cart page."); // This works
} else if (page.indexOf("checkout") == 0) {
console.log("Detected the checkout page."); // Does not work (no injection)
} else if (page.indexOf("order-confirmed") == 0) {
console.log("Detected the order confirmation page."); // Does not work (no injection)
}
}
}
and the checkbox alert function is this:
function validate() {
var checkoutHistory = document.getElementById('shipToBilling');
if (checkoutHistory.checked) {
} else {
alert("You have elected to turn off checkout history.");
}
}
window.addEventListener("load", validate, false);
Your onclick function can call both your functions

problem in run some js codes after click

why after search and click on result search and click on plus(button add input) in the example on part Adding input, Date formating($('.find_input').delegate('input.date:text', 'keyup', ....) and normal number formatting($('.find_input').delegate('input.numeric:text','keyup',...) not work.
EXAMPLE: http://www.binboy.gigfa.com/admin/tour_foreign/insert_foreign
Js full code: http://jsfiddle.net/ZpDDR/
...
///// Date formating /////////////////////////////////////////////////////////////////////////////////////////
$dateSet = 0;
$monthSet = 0;
$yearSet = 0;
$('.find_input').delegate('input.date:text', 'keyup', function () {
$val = $(this).val().replace(/[^\d]+/g, "").match(/\d{1,12}$/);
if($val == null) {
return;
} else {
$val = $val.join("");
}
if($(this).val().match(/\d{4,}$/) && $val.length%2 == 0) {
$val = $val.match(/\d{2}/g);
if($yearSet < $monthSet) {
if($val.length == 4) {
$(this).val($val.join("").replace(/(\d{2})(\d{2})(\d{4})$/,'$3/$1/$2'));
$yearSet++;
} else if($val.length == 6){
$(this).val($val.join("").replace(/(\d{4})(\d{2})(\d{2})(\d{4})$/,'$4/$2/$3'));
$yearSet++;
}
} else {
if($monthSet < $dateSet) {
$(this).val($val.join("").replace(/(\d{4})(\d{2})(\d{2})(\d{2})$/,'$1/$4/$3'));
$monthSet++;
} else {
if($val.length == 2) {
$(this).val($val.reverse().join("/"));
$dateSet++;
$monthSet++;
} else {
$(this).val($val.join("").replace(/(\d{4})(\d{2})(\d{2})(\d{2})$/,'$1/$2/$4'));
$dateSet++;
}
}
}
}
});
///normal number formatting/////////////////////////////////////////////////////////////////////////////////////////
$('.find_input').delegate('input.numeric:text','keyup',function () {
$val = $(this).val().match(/[0-9]/g).reverse().join("").match(/[0-9]{1,3}/g).join(",").match(/./g).reverse().join("");
$(this).val($val)
});
The problem is that the element that you're delegating from,.find_input, doesn't exist yet when you're setting up the delegation function. delegate allows for defining event handlers for elements that aren't created yet, but only elements that match the second selector E.g., $('#must-exist-now').delegate('.can-be-created-later', ...);
I'm not sure if I described that well, but the solution is to change your statement to delegate from something that already exists on DOM load. For example: $(document).delegate('input.date:text', ...).

Categories