JavaScript - Get List Of Users From Mysql Using Javascript

I'm new to programming,
Here's my problem:

I'm using a for loop to generate a list of hyperlinks

for(i = 100; i < 200; i++)
{

var str = "link";
document.write(str.link('http://someWebsite.com/' + i +'.html'));
document.write("<br />");
}


so the list that is generated looks like...

link
link
link
---------and so on until the loop is finished.

My question: is it possible for each links text to be dependent on the pages title?

for example instead of the the text "link", the program would follow the URL and know in the pages header was the title "Bob's website" or whatever the pages title was and would generate the list.

Example:

bobs website
daves website
rons website
susies website
betsys website
______________________________
Any help to differentiate the links text based on following the URL would be helpful Thank you!

I just recently bought 2 books, AJAX and Javascript, to help me in writing a wep application. They have been great so far except for one thing. I am trying to populate a dropdown list with an XML file, but I want it to load into the dropdown list only AFTER a radio button has been clicked. Does anyone know how to do this or does anyone know where I could go to get some insight on this? Thanks.

I have a basic scroller list code, which works when I use it on a HTML page. However if I duplicate it and change the text, only one of the lists functions.

I even tried to use a script from a free website online and duplicate that on the page and it still does not work twice.

Could somebody help with this?

Hi, I have a php script that gets all images in my directory and outputs them as gallery[0]=firstimage.jpg, [1], [2], ... The php script is supposed to work with the javascript, so to cover all angles here is the php

Code:

<?
//PHP SCRIPT: getimages.php
Header("content-type: application/x-javascript");

//This function gets the file names of all images in the current directory
//and ouputs them as a JavaScript array
function returnimages($dirname=".") {
$pattern="(\.jpg$)|(\.jpeg$"); //valid image extensions
$files = array();
$curimage=0;
if($handle = opendir($dirname)) {
while(false !== ($file = readdir($handle))){
if(eregi($pattern, $file)){ //if this file is a valid image
//Output it as a JavaScript array element
echo 'gallery['.$curimage.']="'.$file .'";';
$curimage++;
}
}

closedir($handle);
}
return($files);
}

echo 'var gallery=new Array();'; //Define array in JavaScript
returnimages() //Output the array elements containing the image file names
?>

Then this javascript uses the array for a slideshow, only I want to list each image as a small thumbnail. This will allow me to view the images on my webserver much more eye friendly.

Code:

<script type="text/javascript">

var curimg=0
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+gallery[curimg])
curimg=(curimg<gallery.length-1)? curimg+1 : 0
}

window.onload=function(){
setInterval("rotateimages()", 2500)
}
</script>

<div style="width: 170px; height: 160px">
<img id="slideshow" src="images/bear.gif" />
</div>

I'm not sure how to go about listing all the images. I was thinking about using definition lists and only selecting the last 10 images. I can insert images into the definition description so I thought that was my best shot. I get stuck on choosing the images from the array, I attempt something like the following
Code:

<img src="gallery[gallery.length-11]" /> </dd>

But that looks for a file, not the array. I then modified the script to get me the most recent images (if I were to add/remove images). Does this look correct?

Code:

<script type="text/javascript">
var curimg=0
function newestimg(){
document.getElementById("largethumb").setAttribute("src", "images/"+gallery[curimg])
curimg=(curimg<gallery.length-1)? gallery.length-1 : curimg
} 

</script>

I have the following code. I am trying to add an item in the unorderedlist sing javascript when. the new list item is added when the checkbox is checked. And iam trying to remove the corresponding list item when the checkbox is unchecked. Is it possible? Any help from the web gurus will be greatly appretiated.

Code:

<html>
<head>
     
    <title>Insert title here</title>

    <script type="text/javascript" language="JavaScript">
        function Addlistitem(list_id) {

            var chname = document.getElementById(list_id).name;
            if (document.getElementById(list_id).checked == true) {


                var element = chname;
                var container = document.getElementById('myList');
                var new_element = document.createElement('li');
                new_element.innerHTML = element;
                container.insertBefore(new_element, container.firstChild);
                document.getElementById('newElement').value = "";
            }
            else {
                alert("its unchecked");
                //need help here to delete the added list item when its corresponding checkbox is unchecked.

            }



        }

    </script>

</head>
<body>
    <form name="form1"/>
    <input type="checkbox" name="ch1" id="c1" onclick="JavaScript:Addlistitem('c1');"
        value="10" />
    <input type="checkbox" name="ch2" id="c2" onclick="JavaScript:Addlistitem('c2');"
        value="11" />
    <input type="checkbox" name="ch3" id="c3" onclick="JavaScript:Addlistitem('c3');"
        value="12" />
    <input type="checkbox" name="ch4" id="c4" onclick="JavaScript:Addlistitem('c4');"
        value="13" />
    <input type="checkbox" name="ch5" id="c5" onclick="JavaScript:Addlistitem('c5');"
        value="14" />
    <input type="checkbox" name="ch6" id="c6" onclick="JavaScript:Addlistitem('c6');"
        value="15" />
    <input type="checkbox" name="ch7" id="c7" onclick="JavaScript:Addlistitem('c7');"
        value="16" />
    <ul id="myList">
    </ul>
    </form>
</body>
</html>

I have selectitem list which has name value pairs SelectItem(value, name), i need to iterate in JS and i need to populate in to option list, like below, but it dint work for me. Please any help


function loadme(listVle){
// listVle is the List<SelectItem>
var ele = document.getElementById('numadts');
for (var i=0;i<listVle.length;i++) {
var elOpt = document.createElement('option');
var fldName = listVle.item(i).getAttribute('name'); // This line the problem is
elOpt.text = fldName;
elOpt.value = fldName;
try {
ele.add(elOpt, null);
}
catch(ex) {
ele.add(elOpt);
}
}
}

and the HTML
<BODY>
<FORM>
<select name="numadts" id="numadts" onclick="loadme()"">
</select>
</FORM>
</BODY>

My code goes through the answer function (below) and it determines if you answered green. If you answered green a popup says correct other wise incorrect. How can I modify my code so that I can add multiple answers for different questions.Example
q1.html what color is the grass?
q2.htm what color is the sky?
.
.
q20.html what day of the week was the last baseball game?
_____________________________________________________
now in my javascript every question is going to go through the answer function and think the answer is green. that would be correct for q1.html but what if i am on q20.html and it goes through the answer function. It will think the answer is green. So how can i change the code so q1.html knows that the answer is green. q2.html knows the answer is blue?

here is my code

Code:

var n = 16; // modify this for number of seconds to answer
document.getElementById( 'time').value = "Answer in " + n + " seconds";
var i = setInterval('count()' , 1000);
var tooLate;
 
function count() {
tooLate = 0;
n--;
if(n >=0) {
document.getElementById( 'time').value = "Answer in " + n + " seconds";
}
else {
clearInterval(i);
 
alert("Too late!");
document.getElementById('answer').value = "";
tooLate = 1;
}
}
 
 
function answer() {
 
var correct = "green"; // This is the correct answer
if (tooLate == 0) {
if(document.getElementById( 'answer').value == correct) {
clearInterval(i);
alert("Right Answer with " + n + " seconds remaining");
}
else{
	clearInterval(i);
	alert("Incorrect! The answer was " + correct);
}
}

submitform();

//submit form
function submitform()
{
    document.forms["myform"].submit();
}
 
}

Thank you!

Hi Everyone

I'll explain the situation first:

I need to build a website that allows students to select from a drop down list and then hit an 'Add button'. From there, that value will go to another part of the screen and display as bullets. Once that list is built, they can hit a final submit button that sends an email to someone with everything they selected.

More Detail:

LEFT SIDE OF SCREEN:

[DROP DOWN LIST] <- this will have all the courses listed that we offer. Once once is selected.

[ADD] <- add button that puts the values from the dropdown list to an array.

RIGHT SIDE OF SCREEN:

My Courses:
* TEST1001
* TEST1002

This is being updated dynamically so that whenever the add button is hit, this lists grows.

[SEND] <- Send button

Thank you,

I have some code to pick a wire size and conduit size from 2 separate drop down list. Then inside the js it is evaluated to decide how many wires. My problem is I can't figure out how to make the drop down options go into the JS. I just put in an error alert to test if they were for now.

Here is my code:

Code:

function fillcap(){
		var wire = document.getElementById("wireSize");
		var conduit = document.getElementById("conduitSize");
		if (wire.option.length >= 10 && conduit.option.length == .5) {
			windows.alert("Wire Size exceeds conduit max fill!")
		}

And the html

Code:

		<h2>Fill Capacity</h2><br>
        <b>Wire Size</b><br>
		<select id ="wireSize">
		<option value="1">#14</option> 
		<option value="2">#12</option> 
		<option value="3">#10</option>
		<option value="4">#8</option> 
		<option value="5">#6</option> 
		<option value="6">#4</option>
		<option value="7">#3</option> 
		<option value="8">#2</option> 
		<option value="9">#1</option>
		<option value="10">1/0</option> 
		<option value="20">2/0</option> 
		<option value="30">3/0</option>
		<option value="40">4/0</option>
		<option value="250">250</option>
		<option value="300">300</option> 
		<option value="350">350</option> 
		<option value="400">400</option>
		<option value="500">500</option> 
		<option value="600">600</option> 
		<option value="700">700</option>
		<option value="750">750</option> 
		</select>  <br>
		<b>Conduit Size</b><br>
		<select id="conduitSize">
		<option value=".5">1/2</option> 
		<option value=".75">3/4</option> 
		<option value="1">1</option>
		<option value="1.25">1-1/4</option> 
		<option value="1.5">1-1/2</option> 
		<option value="2">2</option>
		<option value="2.5">2-1/2</option> 
		<option value="3">3</option> 
		<option value="3.5">3-1/2</option>
		<option value="4">4</option> 
		<option value="5">5</option> 
		<option value="6">6</option>
		</select><br>
		<input value="Wires allowed" onclick="fillcap()" type="button"> 
		<input type="text" name="myresultbox" id="resultbox10"> Wires<br>

Thank you for any advice.

Hello Folks,

Here is my dropdown menu:
Code:

  
<select name="peeps">

<option value="Frank Tompson">Frank Tompson</option>
<option value="Henry Wilson">Henry Wilson</option>
<option value="Bill Kent">Bill Kent</option>
<option value="Jessi McDonald"> Jessi McDonald</option>
<option value="John Hays">John Hays</option>

How can i make it so if i click on John Hays a JavaScript pop up will say Hello John Hays, and if i click on Bill Kent a popup will say hello Bill Kent and if i click on any other name nothing happens?

I am asking a pretty simple question, but you got to start learning somewhere, you know! Anyway, I have implemented a script that resizes images into small thumbs on the left side of a page and shows the full size image on the right when the user click on a thumb. It works well. However, I have a possible 10 thumbs on theleft and my database that feeds this does not always have 10 images. Since I re-use the page for mutiple listings, I need to find a way to disable the broken image link for listings that don't have 10 thumbs. I have attached a picture of what it looks like.

Here is the script:

Code:

#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float:left; display: block; height:60px; width:60px; overflow:hidden; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { height:60px; width:auto; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
 
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
 
    </style> 
    <!--[if lt IE 8]>
    <style media="screen,projection" type="text/css">
        #jgal li { filter: alpha(opacity=50); }
        #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
    </style>
	<![endif]--> 
    <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> 
    <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> 
    <script type="text/javascript"> 
var gal = {
    init : function() {
        if (!document.getElementById || !document.createElement || !document.appendChild) return false;
        if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
        var li = document.getElementById('jgal').getElementsByTagName('li');
		enlargedImg = document.createElement('img');
		document.getElementById('jgal').parentNode.insertBefore(enlargedImg,document.getElementById('jgal').nextSibling);
		enlargedImg.src = li[0].getElementsByTagName('img')[0].src;
        li[0].className = 'active';
        for (i=0; i<li.length; i++) {
			li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
            li[i].style.backgroundRepeat = 'no-repeat';
            li[i].title = li[i].getElementsByTagName('img')[0].alt;
            gal.addEvent(li[i],'click',function() {
                var im = document.getElementById('jgal').getElementsByTagName('li');
                for (j=0; j<im.length; j++) {
                    im[j].className = '';
                }
                this.className = 'active';
				enlargedImg.src = this.getElementsByTagName('img')[0].src;
            });
        }
    },
    addEvent : function(obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        }
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
            obj.attachEvent("on"+type, obj[type+fn]);
        }
    }
}
 
gal.addEvent(window,'load', function() {
    gal.init();
});

And then my list basically looks like this:

Code:

            <ul id="gallery">
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb5']; ?>" alt="<?php echo $row_WADAitems['ItemDesc5']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb6']; ?>" alt="<?php echo $row_WADAitems['ItemDesc6']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb7']; ?>" alt="<?php echo $row_WADAitems['ItemDesc7']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb8']; ?>" alt="<?php echo $row_WADAitems['ItemDesc8']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb9']; ?>" alt="<?php echo $row_WADAitems['ItemDesc9']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb10']; ?>" alt="<?php echo $row_WADAitems['ItemDesc10']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb11']; ?>" alt="<?php echo $row_WADAitems['ItemDesc11']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb12']; ?>" alt="<?php echo $row_WADAitems['ItemDesc12']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb13']; ?>" alt="<?php echo $row_WADAitems['ItemDesc13']; ?>"></li> 
              <li><img src="images/details/<?php echo $row_WADAitems['ItemThumb14']; ?>" alt="<?php echo $row_WADAitems['ItemDesc14']; ?>"></li> 
  </ul>

So as you can see, if I don't have an image in the database that it pulls from, I get that icon for a broken image link. How can I remove that icon so it doesn't show the no image icon? Many thanks!

I am hoping you guys can help me with this issue. What I am trying to do is fairly simple, depending on what option you select in the menu I want the picture to change to different picture. The code that I posted below works perfectly except for one problem. I need the option value to display the color name, and not have the image code in it. I have researched ways to do this without having to use "value" but I just can't find one that works. Can someone please help me?

Thanks in advance for any help given!


Code:

function changeimg(){
document.getElementById('colors').src=document.getElementById('color_dropdown_options').value
}

Code:

 <label>
<select name="color" class="dropdown_options" id="color_dropdown_options" onchange="changeimg()">
<option value="/images/thumbnails/image1.jpg">White</option>
<option value="/images/thumbnails/image2.jpg">Blue</option>
<option value="/images/thumbnails/image3.jpg">Green</option>
</select>
</label>

Code:

<div id="display"><img src="/images/thumbnails/image1.jpg" width="270" height="382" alt="" id="colors" />

I have a form that has a pretty complicated combo box - a user starts typing text, it queries a database for matches, and displays the results to the user.

The user can then select the match they desire and it has a value id, which I am currently sending to a hidden field in the form.

So, for example: user starts typing in a movie name, Seven - it returns Seven and user selects it. The form submits the id of the movie seven (say 12) to a hidden field.

Where I am stumped: Once a user selects a movie title, I have another drop down select box that is to display the available formats of the movie by querying my database based on the product id (12) and returning the available formats in the list:

DVD
BLUERAY
VHS

I am pretty good at programming, but I cannot figure this out - how to make the select box fire and return results once the value for the textbox has been captured.

Can anyone help me?

Hi all,

I use a javascript to generate a checkbox list.
It works well but all the <input type="checkbox"> generated have the same id.

I would like to find a way to auto-implement the id (with a unique id). So if my javascript generates 10 checkboxes, I will get id from 1 to 10 or something similar.

Code:

// here I build the filter checkboxes based on all the class names
$.each(arrayUniqueClasses, function() {
$('<li><input class="styled" type="checkbox" checked="checked" name="1" value="'+this+'" id="1" />
<label class="check" for="1"></label>
<label class="info" for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters');
});

so I tried something but it doesn't work at all (I'm a beginner as you can guess) :

Code:

var getUniqueId =
(function ()
{
var id=0;
return function()
{
if (arguments[0]==0) id=0;
return id++;
}
}
)();

Thanks for helping


here the full script if needed :
Code:

function unique(a) {
	tmp = new Array(0);
	for(i=0;i<a.length;i++){
		if(!contains(tmp, a[i])){
			tmp.length+=1;
			tmp[tmp.length-1]=a[i];
		}
	}
	return tmp;
}


function contains(a, e) {
	for(j=0;j<a.length;j++)if(a[j]==e)return true;
	return false;
}

function removeItems(array, item) {
	var i = 0;
	while (i < array.length) {
		if (array[i] == item) {
			array.splice(i, 1);
		} else {
			i++;
		}
	}
	return array;
}


$(document).ready(function () {
	
	
	if ($('.filterThis > li').length < 2) { return; }
	
	var stringOfClassNames = '';
	
	$('.filterThis > li').each( function (i) {
		var thisClassString = $(this).attr('class');
		stringOfClassNames = stringOfClassNames +' '+ thisClassString
	});

	stringOfClassNames = jQuery.trim(stringOfClassNames);

	var arrayClasses = stringOfClassNames.split(' ');
	
	var arrayClasses = arrayClasses.sort();
	totalNumberOfItemsToFilter = $('.filterThis > li').length;

	var result = new Object();
	for (var filterClass in arrayClasses) {
		if (result[arrayClasses[filterClass]] === undefined) {
			result[arrayClasses[filterClass]] = 1;
		} else {
			result[arrayClasses[filterClass]]++;
		}
	}
	var resultsToRemoveFromFilters = new Array();
	for (var item in result) {
		if (result[item] == totalNumberOfItemsToFilter) {
			resultsToRemoveFromFilters.push(item);
		}
	}

	arrayUniqueClasses = (unique(arrayClasses));

	if (arrayUniqueClasses.length > 1) {


		$('<ul class="filters"><\/ul>').insertAfter('h3');

		$.each(arrayUniqueClasses, function() {
			$('<li><input class="styled" type="checkbox" checked="checked" name="1" value="'+this+'" id="0" /><label class="check" for="0"></label><label class="info" for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters');
		});

		var classesStringOfSin = new Array();
		classesStringOfSalvation = arrayUniqueClasses;

		$('.filterThis > li').addClass('filterTriggerShown');

		$('.filters input').click( function() {
			var value= $(this).val();
			stringValue = '.filterThis > li.'+value;

			if ($(this).is(':checked')) {

				classesStringOfSalvation.push(value);

				classesStringOfSin = removeItems(classesStringOfSin, value);

				$(stringValue).removeClass('filterTriggerHidden').addClass('filterTriggerShown').slideDown();

			} else {

				classesStringOfSin.push(value);
				classesStringOfSalvation = removeItems(classesStringOfSalvation, value);

				$(stringValue).removeClass('filterTriggerShown').addClass('filterTriggerHidden');
				$.each(classesStringOfSalvation, function() {
					var newStringValue = stringValue+'.'+this;
					$(newStringValue).removeClass('filterTriggerHidden').addClass('filterTriggerShown');
				});
				$('.filterTriggerHidden').slideUp();
			}

		});
	}
});

what can be the reasons for the same code which works perfectly in notepad to not show its result in a jsp application done using eclipse??anything to do with settings?
I am not able to display the current date as default in dd/mm/yyyy format in drop down boxes..only dd and yyyy apears but month isnt apearing as default..
can u suggest alternative logic and its code to implement the same??