Javascript using select value in function - javascript

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

Related

Generating IDs, based on what number is not in use as an ID of other comment

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;
}
}

JavaScript - Checkbox onchange function is not executing the whole way through

I have an input of type checkbox with an onchange event as shown below:
<input type="checkbox" runat="server" id="cbWarehouse" onchange="disableAllButtons()"/>
<script>
function disableAllButtons()
{
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (i = 0; i < gvDetailControls.length; i++)
{
gvDetailControls[i].disabled = true;
}
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (i = 0; i < gvSummaryControls.length; i++)
{
gvSummaryControls[i].disabled = true;
}
}
</script>
This function's purpose is to disable all buttons in two GridViews - gvSummary and gvDetail. However, it only disables the buttons in whichever GridView I mention first in the JS function. I.e. in the example above, the buttons in gvDetail will be disabled but not in gvSummary.
So it seems that the function stops halfway through..?
Anyone have any ideas where I am going wrong?
****EDIT (RESOLVED)****
Issue was resolved by checking that each GridView was defined and not null:
<script>
function disableAllButtons()
{
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
if (typeof (gvSummary) != 'undefined' && gvSummary != null)
{
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (var i = 0; i < gvSummaryControls.length; i++) {
gvSummaryControls[i].disabled = true;
gvSummaryControls[i].className = "btn-xs btn-secondary";
}
gvSummary.title = "You have unapplied filters. Pleae update table.";
}
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
if (typeof (gvDetail) != 'undefined' && gvDetail != null)
{
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (var i = 0; i < gvDetailControls.length; i++) {
gvDetailControls[i].disabled = true;
gvDetailControls[i].className = "btn-xs btn-secondary";
}
gvDetail.title = "You have unapplied filters. Pleae update table.";
}
}
</script>

iterating through texbox values using for loop in javascript

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.

Javascript in DotNetNuke 6.1.3

I am building a website in DNN, and I want to include Javascript in one of its HTML Modules.
I added the Javascript in footer/header (Settings > Advance Settings) but it didn't work. Then I tried adding the content by switching to basic editor and selecting RAW mode, but it's still not working.
Here is my Javascript. It is for tab browsing, to test whether Javascript is working or not I wrote a simple script in another HTML module, and it worked fine, but this script isn't running:
<script type="text/javascript">
var tabLinks = new Array();
var contentDivs = new Array();
function init() {
var tabListItems = document.getElementById('tabs').childNodes;
for (var i = 0; i < tabListItems.length; i++) {
if (tabListItems[i].nodeName == "LI") {
var tabLink = getFirstChildWithTagName(tabListItems[i], 'A');
var id = getHash(tabLink.getAttribute('href'));
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById(id);
}
}
var i = 0;
for (var id in tabLinks) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() {
this.blur()
};
if (i == 0) tabLinks[id].className = 'selected';
i++;
}
var i = 0;
for (var id in contentDivs) {
if (i != 0) contentDivs[id].className = 'tabContent hide';
i++;
}
}
function showTab() {
var selectedId = getHash(this.getAttribute('href'));
for (var id in contentDivs) {
if (id == selectedId) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
return false;
}
function getFirstChildWithTagName(element, tagName) {
for (var i = 0; i < element.childNodes.length; i++) {
if (element.childNodes[i].nodeName == tagName) return element.childNodes[i];
}
}
function getHash(url) {
var hashPos = url.lastIndexOf('#');
return url.substring(hashPos + 1);
}​
</script>
There shouldn't be any problem with adding JavaScript to the header/footer. When you say it didn't work, did you check the source of the page, or did the behavior just not work? Did you check for JavaScript errors in your browser's console?
So far as adding JavaScript via the Basic/Raw view of the rich text editor, DNN strips JavaScript from the text editor by default. You can turn that off via the HTML Editor Manager (under Host).

Checkboxes in Javascript

Here's the deal. The task is to write a function which should be able determine the number of checkboxes checked for each question and prompt a user if more than 3 answers were selected.
I have a total of 8 questions and each question has 4 to 8 answers, in the checkbox format.
This is what I came up with:
function countChecks(){
var m = 0;
var n = 0;
chk = document.getElementsByName("DSelectionID");
for(var i=0; i<myitems.length i=""></myitems.length>
var value = myItems[i];
for(n = 0; n < value.length; n++) {
if(value[n].checked) {
m++;
}
}
return m;
}
the above function works fine for one question and returns 'm' to the main function, which handles it this way:
var check = countchecks();
if (check > 3)
alert ("more than 3 checkboxes were selected");
else {
//do the thing
}
to traverse all the 8 questions this is what I came up with:
function countChecks(){
var m = 0;
var n = 0;
//this captures id's for the right questions
chk = document.getElementsByName("DSelectionID");
chk2 = document.getElementsByName("DSelectionID2");
chk3 = document.getElementsByName("DSelectionID3");
chk4 = document.getElementsByName("DSelectionID4");
chk5 = document.getElementsByName("DSelectionID5");
chk6 = document.getElementsByName("DSelectionID6");
chk8 = document.getElementsByName("DSelectionID8");
chk9 = document.getElementsByName("DSelectionID9");
var myItems = new Array();
myItems[0]= chk;
myItems[1]= chk2;
myItems[2]= chk3;
myItems[3]= chk4;
myItems[4]= chk5;
myItems[5]= chk6;
myItems[6]= chk8;
myItems[7]= chk9;
//loops through all the questions
for(var i=0; i
var value = myItems[i];
//loops through the checkboxes for each question
for(n = 0; n < value.length; n++)
{
if( value[n].checked)
{
m++;
if (m > 3) {
return false;
}
}
}
}
}
and the main body handles it like this:
var check = countChecks()
if (check == false)
alert ("more than 3 checkboxes were selected");
else {
//do the thing
}
It is something very simple I'm missing in the countChecks() function
Any ideas?
Using jquery would make this pretty trivial
if ($('#yourform input[type=checkbox]:checked').length() > 3) {
alert('More than 3 checked');
}
chk = document.getElementsByName("DSelectionID"); does not grab the ID, it grabs a reference to the element in the DOM.
To get the ID you need to use:
chk = document.getElementsByName("DSelectionID").getAttribute("id")

Categories