I have a little procedure to prevent server side action if all texboxes do not have values.
I want to assign a color to the texbox for in case a value was not added.
This is not working the way I expected.
var txtName = document.getElementById("MainContent_txtName").value;
var txtSurname = document.getElementById("MainContent_txtSurname").value;
var txtContact = document.getElementById("MainContent_txtContactNumber").value;
var txtEmail = document.getElementById("MainContent_txtEmail").value;
var txtMessage = document.getElementById("MainContent_txtMessage").value;
var fields = new Array(txtName, txtSurname, txtContact, txtEmail, txtMessage);
var tot = 0;
for (var i = 0; i < fields.length; i++) {
if (fields[i] == "") {
fields[i].style.backgroundcolor = '#FEF5CA';
tot++;
}
else {
fields[i].style.backgroundcolor = "white";
}
}
if (tot > 0) {
return false;
}
return true;
regards
The problem is you are creating an array of values, you need the elements themselves:
var txtName = document.getElementById("MainContent_txtName");
var txtSurname = document.getElementById("MainContent_txtSurname");
var txtContact = document.getElementById("MainContent_txtContactNumber");
var txtEmail = document.getElementById("MainContent_txtEmail");
var txtMessage = document.getElementById("MainContent_txtMessage");
var fields = [txtName, txtSurname, txtContact, txtEmail, txtMessage];
var tot = 0;
for (var i = 0; i < fields.length; i++) {
if (fields[i].value == "") {
fields[i].style.backgroundColor = '#FEF5CA';
tot++;
}
else {
fields[i].style.backgroundColor = "white";
}
}
if (tot > 0) {
return false;
}
return true;
You have to change backgroundcolor to backgroundColor and add .value to your if check.
try style.backgroundColor instead of style.backgroundcolor (note the capital "C") Javascript is case sensitive.
Related
I'm making this algorithm that should generate new ID for newly created comment. ID should be unique, so I made several loops, that iterate over existing comment's IDs and check if a number is already in use as a ID on other comment.
It's hard to explain and my brain melts as I'm trying to figure it out, so here is the code. It doesn't work right now. Any ideas?
comments is an array full of objects. Each object has ID property which value is a number.
var newId;
var possibleId = -1;
while (!newId) {
possibleId++
for (var i = 0; i < comments.length; i++){
if(state.comments[i]){
if (comments[i].id !== possibleId){
if (i === comments.length - 1){
newId = possibleId
break
}
} else {
break
}
}
}
}
solution using Array.prototype.reduce()
var nextId = comments.reduce(a,c){
return Math.max(a, c.id);
},0) +1;
just get highest current and add one
var possibleId = 0;
var loop = true;
var idExists = false;
while (loop) {
for (var i = 0; i < comments.length; i++){
if (possibleId === comments[i]) {
idExists = true;
}
}
if (!idExists) {
loop = false;
newId = possibleID;
}
else {
possibleId++;
idExists = false;
}
}
var possibleId;
var loop;
var idExists;
init();
function init () {
possibleId = 0;
loop = true;
idExists = false;
}
while (loop) {
for (var i = 0; i < comments.length; i++){
if (possibleId === comments[i]) {
idExists = true;
}
}
if (!idExists) {
loop = false;
newId = possibleID;
}
else {
possibleId++;
idExists = false;
}
}
I've been struggling to convert a JavaScript function...
Original code:
function calcTotal(){
//get value of select(tickets)
var ticketCost = 0;
if(document.moaflevent.moaflmember.value=="Yes") {
var ticketPrice = 35;
}else {
var ticketPrice = 40;
}
ticketCost = (document.moaflevent.tickets.options[document.moaflevent.tickets.selectedIndex].value)*ticketPrice;
document.moaflevent.displaytotal.value= formatCurrency(ticketCost);
document.moaflevent.total.value=ticketCost;
}
my jquery syntax:
function calcTotal() {
//get value of select(tickets)
//var ticketCost = 0;
var ticketCost = 0;
if ($('#moaflmember').val() == "Yes") {
var ticketPrice = 10;
} else {
$ticketPrice = 10;
}
$('#eachTicket').text($ticketPrice);
$ticketCost = $('#tickets').val() * $ticketPrice;
$('#displaytotal').val().toUSD($ticketCost);
$('#total').val().toUSD($ticketCost);
}
it's not working, the total is not updating when selecting membership or number of tickets...
jsfiddle says my js is good but I'm not sure what I'm doing wrong here...
http://jsfiddle.net/kv7L0c5d/5/
You are using an inconsistent mixture of $ticketPrice and ticketPrice. These are not the same thing.
You have not declared the $ticketCost variable.
toUSD is not a method on the string datatype, so you cannot call $('#displaytotal').val().toUSD($ticketCost);
The following works:
function calcTotal() {
var ticketPrice = 0,
ticketCost;
if ($('#moaflmember').val() == "Yes") {
ticketPrice = 10;
} else {
ticketPrice = 10;
}
$('#eachTicket').text(ticketPrice);
ticketCost = $('#tickets').val() * ticketPrice;
$('#displaytotal').val(toUSD(ticketCost));
$('#total').val(toUSD(ticketCost));
}
http://jsfiddle.net/kv7L0c5d/10/
<script type="text/javascript">
function ValidateAddOnModule(source, args) {
var gdv = document.getElementById('ContentPlaceHolder1_MainContent_grdAddonModules');
var j = 0;
var k = 0;
for (var i = 1; i <= gdv.rows.length - 1; i++) {
var img = document.getElementById('ContentPlaceHolder1_MainContent_grdAddonModules_ImgLanUserError_' + j);
var LANUser = document.getElementById('ContentPlaceHolder1_MainContent_grdAddonModules_txtAdditionalLANUser_' + j).value;
var MinLANUser = gdv.rows(i).cells(2).innerText;
// alert(MinLANUser);
// alert(LANUser);
if (MinLANUser != " ")
{
if (MinLANUser <= LANUser) {
alert("true");
img.style.visibility = "hidden";
}
else {
alert("false");
img.style.visibility = "visible";
k = 1;
}
j++;
}
}
if (k = 1) {
return false;
} else
{
return true;
}
}
</script>
frist try to change the numbers you grab from thext fields with parseInt() function
element.innerText will give you the output in string format. You have to first convert that value to integer using parseInt. Then only you can operate arithmetic operators on them.
var LANUser = document.getElementById('ContentPlaceHolder1_MainContent_grdAddonModules_txtAdditionalLANUser_' + j).value;
var MinLANUser = gdv.rows(i).cells(2).innerText;
convert these to integer type.
var LANUser = parseInt(document.getElementById('ContentPlaceHolder1_MainContent_grdAddonModules_txtAdditionalLANUser_' + j).value);
var MinLANUser = parseInt(gdv.rows(i).cells(2).innerText);
Not sure what the problem is, also not a javascript coder at all. Can someone shed some light on what I am missing.
The main problem I am having is trying to make this a bit more dynamic based on the selection of a select input. if I comment out the first two variable entries and set the stropt variable to something static that would identify one of my div's then it works fine.
aChecked = false;
function checkByParent() {
var sel = document.getElementByID("me");
var stropt = sel.options[sel.selectedIndex].value;
//var stropt = 'test2';
var collection = document.getElementById(stropt).getElementsByTagName('INPUT');
if (aChecked === false) {
aChecked = true;
} else {
aChecked = false;
}
for (var x = 0; x < collection.length; x++) {
if (collection[x].type.toUpperCase() === 'CHECKBOX')
collection[x].checked = aChecked;
}
}
Here is my fiddle
http://jsfiddle.net/sasatek/b654V/2/
The problem is getElementByID, which is a mistake it should be getElementById
Like this
aChecked = false;
function checkByParent() {
// var sel = document.getElementByID("me");
var sel = document.getElementById("me");
var stropt = sel.options[sel.selectedIndex].value;
//var stropt = 'test2';
var collection = document.getElementById(stropt).getElementsByTagName('INPUT');
if (aChecked === false) {
aChecked = true;
} else {
aChecked = false;
}
for (var x = 0; x < collection.length; x++) {
if (collection[x].type.toUpperCase() === 'CHECKBOX')
collection[x].checked = aChecked;
}
}
Javascript & DOM api is written in CamelCase
I have a function whose destination is to work onClick event.
So, we have for example 4 Span elements and 4 Div elements.
The Spans are Tabs-buttons which I would like to "open" those Divs.
The 1st Span onClick would (open) change the style.display of the 1st Div in "block", from "none", and so on for the next Spans.
This piece of code works very well, but it changes only the design of elements.
function activateSup(s) {
var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
var spans = workTable.getElementsByTagName("span");
var supDivs = workTable.getElementsByClassName("supDiv");
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "";
spans[i].style.border = "";
}
s.style.backgroundColor = "#5eac58";
s.style.border = "2px solid #336633";
}
I've tried to add the code below into my function to achieve what I want, but It does not work.
var getIndex = function(s) {
for (var index = 0; s != s.parentNode.childNodes[index]; index++);
return index;
}
for (var d = 0; d < supDivs.length; d++) {
if (getIndex == d) {
supDivs[d].style.display = "block";
}
else {
supDivs[d].style.display = "none";
}
}
I'm not exactly sure what you're trying to do, but one thing I noticed is this:
var getIndex = function(s) { /* .... */ }
for (var d = 0; d < supDivs.length; d++) {
if (getIndex == d) {
supDivs[d].style.display = "block";
}
else { /* ... */ }
}
This code is comparing getIndex to d, which means it's comparing an integer (d) to the function getIndex, instead of the result of the function call getIndex(spans[d]) (which is an integer, like d).
But what I think you're really trying to do, is getting the index of the clicked <span> so you can show the <div> with the matching index (and hide the rest). To achieve this, the code could be changed like so:
function activateSup(s) {
var workTable = s.parentNode.parentNode.parentNode.parentNode.parentNode;
var spans = workTable.getElementsByTagName("span");
var supDivs = workTable.getElementsByClassName("supDiv");
var index;
for (var i = 0; i < spans.length; i++) {
spans[i].style.backgroundColor = "";
spans[i].style.border = "";
if (s == spans[i])
index = i;
}
s.style.backgroundColor = "#5eac58";
s.style.border = "2px solid #336633";
for (var d = 0; d < supDivs.length; d++) {
if (index == d) {
supDivs[d].style.display = "block";
} else {
supDivs[d].style.display = "none";
}
}
}
Instead of the function getIndex, this just saves the correct index inside the first for loop.
There are many more improvements that could be made to this code, like rewriting it so you don't need that ugly s.parentNode.parentNode.parentNode.parentNode.parentNode and working with CSS classes instead of manually setting the style. But I'll leave that to the reader.