JavaScript - Displaying Content With A Select Box

I'm using the script below in a custom HTML to generate a random line of text (not with the text shown here). This works fine BUT; I want it to go randomly through the WHOLE list without repeating lines that already have been printed. As it is now, a line of text might be printed several times in a row, which is a little annoying. I'm using a refresh button for generating a new line of text.

Alternatively, How can I just make it display in the order shown and just re-arrange the content so it seems random to the user? Random would the best though...

Any ideas?? : )

Code:

 <script language="JavaScript">
<!--
var r_text = new Array ();
r_text[0] = "All the leaves are brown";
r_text[1] = "And the sky is grey";
r_text[2] = "I've been for a walk";
r_text[3] = "On a winter's day";
r_text[4] = "I'd be safe and warm";
r_text[5] = "If I was in L.A.";
r_text[6] = "California dreaming, On such a winter's day";
var i = Math.floor(7*Math.random())

document.write(r_text[i]);

//-->
</script>

Hi, I'm new to Javascript, so bear with me.

I'm trying to use a script that replaces the contents of a div, based on div id's. I've gotten it to work how I want he

http://www.sixnations.be/home1.html

But can't get it to work here, and I'm not sure why:
http://www.sixnations.be/menu.html

Relevent code, Javascript:

Code:

function changeMenu(obj) {

    if (obj == 'food') {
        //alert('food');
        var fd = document.getElementById('food');
        fd.style.display = 'inline';
        var fdi = document.getElementById('foodImages');
        fdi.style.display = 'inline';
        var dr = document.getElementById('drink');
        dr.style.display = 'none';
        var dri = document.getElementById('drinkImages');
        dri.style.display = 'none';
    }
    else if (obj == 'drink') {
        //alert('drink');
        var fd = document.getElementById('food');
        fd.style.display = 'none';
        var fdi = document.getElementById('foodImages');
        fdi.style.display = 'none';
        var dr = document.getElementById('drink');
        dr.style.display = 'inline';
        var dri = document.getElementById('drinkImages');
        dri.style.display = 'inline';
    }
}

HTML (the data's tabular, hence the tables):

CSS:

Code:

/*-- MAIN CONTENT --*/

.maincont {
	width: 930px;
	margin: auto;
	margin-top: 10px;
	overflow: auto;
}

.backcont {
	position: relative;
	width: 620px;
	margin-right: 296px;
}

.backrightcont {
	float: right;
	width: 296px;
}

.backtop,
#info_En,
#info_Fr,
#info_It,
#drink,
#food,
.backrighttop {		
	background-image: url(../sixnations_images/backtop.png);
	background-repeat: repeat-x;
	background-position: bottom;
	border-right: 1px solid #21201C;
	border-left: 1px solid #21201C;	
	width: 100%;
	height: 57px;
	text-align: center;
}

.backbottom {
	background-image: url(../sixnations_images/backbottom.png);
}


#info_En,
#info_Fr,
#info_It,
#food,
#drink {
	background-image: url(../sixnations_images/contentback4.png);
	background-repeat: repeat;
	padding-bottom: 30px;
	text-align: left;
	height: auto;	
}

.backright,
.backrighttop,
.backrightbottom {
	width: 100%;
}

.backright {
	background-image: url(../sixnations_images/backright.png);		
}

.backrighttop {
	background-image: url(../sixnations_images/backtop2.png);
	background-position: top;
	border: 0;	
}	

.backrightbottom {
	height: 50px;
	background-image: url(../sixnations_images/backrightbottom.png);
	border: 0;
}

.backrighttop h1,
.backright h1 {
	font-family: 'Cambria', Palatino, Georgia, serif;
	font-size: 1.6em;
	color: #eee;
	line-height: 70px;
	text-align: center;	
}

.backright h1 {
	width: 95%;
	line-height: normal;
	border-top:1px dashed #333;
	padding-top: 15px;
}

#noborder {
	border:0;
}

.twitter {
	margin-left: 15px;
}

#info_Fr,
#info_It,
#drink
{
    display: none;
}

.lang,
#info_En p,
#info_En h1,
#info_Fr p,
#info_Fr h1,
#info_It p,
#info_It h1,
#food h1,
#food p,
#drink h1,
#drink p {
	width: 71%;
	margin: auto;
}

#info_En h1,
#info_Fr h1,
#info_It h1,
#food h1,
#drink h1 {
	font-family: 'GothamBook','Cambria', Georgia, serif;
	font-size: 2.5em;
	color: #000;
	padding-bottom: 10px;
	padding-top: 20px;
	margin-bottom: 15px;
	font-variant: small-caps;
	letter-spacing:.1em;
	text-align: center;
	border-bottom: 1px dashed #777;
}

.lang {
    margin-top: 35px;   
    padding-top: 5px; 
	border-top: 1px dashed #777;
    font-size: 1em;
	font-variant: small-caps;
    text-align: right;
    color: #777;
}
 
.lang a:hover {
	background-color: #777;
	color: #eee;
} 

/*-- MAIN CONTENT -- SPORTS ON TV / FOOD & DRINK --*/

table.sports,
table.menu1 {
	width: 90%;
	margin: auto;
}

table.sports thead td,
table.menu1 thead td {
	font-size: 1.3em;
	font-variant: small-caps;
	color: #777;
	border-bottom: 1px dotted #999;
	width: 100%; 
	padding-top: 20px;
}

table.sports tr,
table.menu1 tr {
	border-bottom: 1px dotted #999;
}

table.menu1 tr {
	border: 0;
}

table.sports td {
	padding: 7px;
}

table.menu1 td {
	border:0;
	padding: 8px;
}

table.sports td.foot,
table.sports td.rugby  {
	background-image: url(../sixnations_images/ball1.png);
	background-repeat: no-repeat;
	background-position: bottom left;
	padding-left: 35px;
}

table.sports td.foot {
	background-image: url(../sixnations_images/ball2.png);
}

table.menu1 td.desc {
	color: #888;
	font-style: italic;
	padding-top: 0px;
	font-size: .9em;
}

Any ideas?

I have a text box with add button.

When the add button is clicked i want it to add the contents of the text box as a new line in the select field.

I also want a button that would allow me to remove the selected item in the select field.

is this possible?

Hi,

I'm using javascript in addition to a web service (BTBuckets) to display different content to visitors based on actions they take on my site. The javascript is working fine, but I noticed that if I simulate BTBuckets being disabled using Firefox Adblock none of the content shows up. So in the off chance of the service going offline it'll leave some pretty funky holes in the my content. I tried <noscript> tags which works with javascript off, but the content is still blank when I disable BTBuckets.

I'm wondering if there's a way to display the default content if the service is unavailable? Here's the code I'm using:

In the head:

Code:

<script type="text/javascript">
//<![CDATA[[
$BTB={s:XXXXX};
$BTB.jsh="http://static.btbuckets.com/bt.js";
//]]>
</script>
<script type="text/javascript">
document.write(unescape("%3Cscript src='" + $BTB.jsh.replace(/(https?:)/i,document.location.protocol) + "' type='text/javascript'%3E%3C/script%3E"));
</script>

The code in the body used to replace an image depending on visitor behavior:

Code:

<script type="text/javascript">
var _t = "";
if ($BTB.clusters["ppc_visitors"]) {
_t = "\"images/top-photo-tracking-number.jpg\" alt=\"Call Toll-Free: 1-800-XXX-XXXX\">";
} else {
_t = "\"images/top-photo.jpg\" alt=\"Call Toll-Free: 1-800-XXX-XXXX\">";
}
document.write('<img src= ' + _t );
</script>
<noscript><img src="images/top-photo.jpg" alt="Call
 Toll-Free: 1-800-XXX-XXXX"></noscript>

Ahoy,

Lemme try to explain this as best as I can. Bullet points might help:
When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images
http://gta.kwivia.co.uk/gta-iv/

I will appreciate all solutions to this problem. If you need to know anything, simply ask me.

I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost.

When I select the first option nothing appears in the second option.

here's the javascript code:

Code:

function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}

function valChange(){
    var firstList = document.getElementById("emailaddress");
    var secondList = document.getElementById("subject");
    while(secondList.hasChildNodes())
        secondList.removeChild(secondList.childNodes[0]);
    switch(firstList.value){
        case "1":{
             secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
             secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
             secondList.appendChild(createOption("Other", Other));
             break;
        }
        case "2":{
             secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
             secondList.appendChild(createOption("Report Spam", Report Spam));
             secondList.appendChild(createOption("Report Harassment", Report Harassment));
			 secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
			 secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
             break;
        }
// ....
        default:{
             secondList.appendChild(createOption("Please select from the first list", ""));
             break;
        }
    }
}
 
window.onload = valChange;

this is the form code

Code:

<div class="mailto_form">
<form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php">
<div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();">
	<option value=""></option>
	<option value="1">Webmaster</option>
		<option value="2">Admin</option>
		</select>
  </div>
	

<div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject">
  </div>
  
  	<div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value="">
	</div>
  
		<div style="padding-bottom: 1em;">Enter the text contained in the image into the text box:
					<br /><img src="../includes/captcha.php" />
					<br /><input type="text" name="userpass" value="">
	</div>
	<div style="padding-bottom: 1em;">Message:
					<br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?>				
	</div>
	
	<div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit">
	</div>
</form>


</div>

Link to the page http://www.netgamegurus.com/contact/

Hey chaps, hope someone can help with this:
I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables:
// tbl_main_colour:
Code:

ID, NAME
1, Red
2, Blue
3, Green

// tbl_shade_colour:
Code:

ID, NAME, FK_MAIN_COLOUR_ID
1, Light Red, 1
2, Dark Red, 1
3, Light Blue, 2
4, Dark Blue, 2
5, Light Green, 3
6, Dark Green, 3

What I'm after is something to filter the second select option, after the first select option has been chosen
// Select 1:
Code:

Red

// Select 2:
Code:

Light Red
Dark Red

I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated.

Hi JS Experts,

I am working on a class registration system that requires students to register for a main class (101, 102 or 103). The student is supposed to select one main course as well as provide a second choice in case the first is not available. I have two dropdown select fields to capture data

1) Choice -1: 101 / 102 / 103 ( Student needs to select one - Reading the classID from classes table)
2) Choice -2: 101 / 102 / 103 ( If student selects 101 in Choice-1 then the only classes available under Choice-2 should be 102 or 103).

How can I accomplish the above?

Further to this there are two fields on the form where I would like to auto populate based on what they have selected in Choice-1 and Choice-2.

For Example:
If a parent selects choice1: 101 the child Choice1 field should autopopulate with 100.
If a parent selects Choice2: 201 the child Choice2 field should autopopulate with 200

Any help would be really appreciated. Thanks

Vinny

Hello, I am trying to make a simple code that has a selection list (with the choice fruit or veggie). When the user chooses fruit, the second list displays the options apple, orange, banana. When the user changes their choice to veggie, the second select list then contains carrot, corn, potatoes (and the apple, orange, banana disappear).

I need some advice on how to do this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>
<body>
<form name = "form1">
 <fieldset>
  <legend>Fruit or Veggie</legend>
	<select name = "S1">
	  <option name = "fruit">Fruit </option>
		<option name = "veggie">Veggie</option>
	</select>
	<select name = "S2"
	</select>
 </fieldset>
</form>

<script language="JavaScript" type="text/javascript">

???

</script>
</body>
</html>

Hey Guys
When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this.


<select size='1' onchange="updatecodes()" name='reason_code_master'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>

<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>
<select size='1' name='reason_codes' id='reason_codes'>
<option value='' > - SET REASON - </option>
<option value='BROKEN' >BROKEN</option>
<option value='ENTERED' >ENTERED</option>
<option value='SHORT' >SHORT</option>
</select>

I've got some directory list boxes on the site I'm working on. I made them big and fixed rather than drop-down so they're easier to use in this context. But I had to enable the "multiple" attribute to make that work. The site has no provision for multiple selections so it's a tad annoying when the search function selects more than one name in the list.

It doesn't really affect the site's operation but it could be confusing to some people. Is there a way to make the listbox show multiple selections without allowing multiple selections? Thanks for any help.

<select onchange="display.apply(this, this.value.split(','))" multiple="multiple" id="People" name="People" style="border-style: none; height:244px; width:220px; margin-bottom: 15px;">
<option>Loading</option>
</select>

I have a select box that has ~7000 options, that based on a different dropdown select & input field, gets filtered to 0 - 300 entries.

I have another select dropdown that has 13000+ options in total for all the ~7000 entries, but each entry may have 1 to 5 options of these 13000.

Is there a way to change the options of the last select dropdown based on what the user chooses in the filtered select box? Currently the idea I'm having is to have the browser load all 13000+ items and filter out the ones that don't apply to the currently selected item, but I'm not sure what kind of lag the user would experience while the browser loads & filters through all these items.

Any help would be appreciated. Thanks.

Ok so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one?

Here is part of the javascript I have in my page head:

Code:

function getMgmtHours(str)
{
if (str=="")
  {
  document.getElementById("mgmthours").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {
   // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("mgmthours").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getmgmthours.php?dist="+str,true);
xmlhttp.send();
}

function getDays(str)
{
if (str=="")
  {
  document.getElementById("mgmtdate").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {
   // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("mgmtdate").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getdates.php?sunday="+str,true);
xmlhttp.send();
}

Here is the HTML/PHP portion being used:
PHP Code:
echo "<p>";
echo "Submit hours:";
echo "<form>";
echo "<select name='district' onchange='getMgmtHours(this.value)'>";
echo "<option value=''>Select a district:</option>
<option value='1'>1</option>
<option value='3'>3</option>
<option value='4'>4</option>";
echo "</select>";
echo "</form>";
echo "</p>"

echo "<p>";
echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>";
echo "Weekending Day: ";
echo "<select name='weekending' onchange='getDays(this.value)'>";
echo "<option value=''>Choose a Date:</option>";

while ($week < 32) {
    $nextsunday = strtotime("next Sunday");
    
    if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;}
    
    $weekending = date('M. d, Y', $timestamp);
    echo "<option value='" . $weekending . "'>" . $weekending . "</option>";
    $week = $week + 1;
}

echo "</select>";

echo "<div id='mgmtdate' />";
echo "<div id='mgmthours' />";
echo "</p>"; 


Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page.

Hi all,

I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div.
This php content is again using the same method to get php content from a further page.
The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section.
Does anyone know why this is? Is there a workaround or solution to this problem?

It might be easier to understand looking at the code, so Background info:

Javascript file: scripts.js
client.php ----> loads data from: display_client.php
display_client.php ----> loads data from: display_brand.php

Code:
client.php http://pastebin.com/4EFn9YRf
display_client.php http://pastebin.com/BGZAKre2
display_brand.php http://pastebin.com/0a4Pg3gg
scripts.js http://pastebin.com/er4dkmPc

Thanks!

Ok, I would post my entire data here but then yall would be reading insane amounts of script. I've got a div content jquery slider on my site I am making and it works beautifully in all browsers(took me a while). Then, I decided why not have it where when people click on a "read more" link that it pops up a box, instead of directing to the new page, and displays the contents of a div. It would not work at all. My question is there a possible way to do this?