JavaScript - Modification Of Multiple Dynamic Combo Boxes

Hi all,
I'm trying to customize a script I found. It's about two select boxes, one for continent selection and one for country selection. When user selects a continent from the first select box, the second select box is filled with the list of the proper countries that belong to this continent.

You can see that code of the script he http://www.howtocreate.co.uk/jslibs/htmlhigh/countryselect.html

In my page, the continent select box is loaded with a continent-value already selected (the selection depends on a database value) and I want to have the second countries select box, also loaded with the proper countries.

I cannot make this happen, unless I change the continent's selection and trigger the onchange event. Can I someway keep the onchange event and also add the ability to have a continent and it's list of countries already loaded?

I have the below JS code to change up a select box based on what is selected in another select box. IE9 broke this somehow. It still works in other browsers as well as IE8 and IE7.

When you select something in select box A, it properly populates select box B. However when you go back and change select box A again the script stops working completely.

The error I'm getting from the IE9 developer tools debugger is:

SCRIPT65535: Invalid calling object
dynamicselect.js, line 31 character 18

I have bolded the relevant line below.

Code:

function dynamicSelect(id1, id2) {
	// Browser and feature tests to see if there is enough W3C DOM support
	var agt = navigator.userAgent.toLowerCase();
	var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
	var is_mac = (agt.indexOf("mac") != -1);
	if (!(is_ie && is_mac) && document.getElementById && document.getElementsByTagName) {
		// Obtain references to both select boxes
		var sel1 = document.getElementById(id1);
		var sel2 = document.getElementById(id2);
		// Clone the dynamic select box
		var clone = sel2.cloneNode(true);
		// Obtain references to all cloned options 
		var clonedOptions = clone.getElementsByTagName("option");
		// Onload init: call a generic function to display the related options in the dynamic select box
		refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		// Onchange of the main select box: call a generic function to display the related options in the dynamic select box
		sel1.onchange = function() {
			refreshDynamicSelectOptions(sel1, sel2, clonedOptions);
		};
	}
}
function refreshDynamicSelectOptions(sel1, sel2, clonedOptions) {
	// Delete all options of the dynamic select box
	while (sel2.options.length) {
		sel2.remove(0);
	}
	// Create regular expression objects for "select" and the value of the selected option of the main select box as class names
	var pattern1 = /( |^)(select)( |$)/;
	var pattern2 = new RegExp("( |^)(" + sel1.options[sel1.selectedIndex].value + ")( |$)");
	// Iterate through all cloned options
	for (var i = 0; i < clonedOptions.length; i++) {
		// If the classname of a cloned option either equals "select" or equals the value of the selected option of the main select box
		if (clonedOptions[i].className.match(pattern1) || clonedOptions[i].className.match(pattern2)) {
			// Clone the option from the hidden option pool and append it to the dynamic select box
			sel2.appendChild(clonedOptions[i].cloneNode(true));
		}
	}
}

Thank you in advance for any help provided.

Hi Everybody

This is probably a very commonly asked question, however after much searching online I can't seem to find a straightforward answer. If anyone knows the code or a link to a place with a simple example it would be great.

What I have got is a form that a user has to fill out and submit (when validated all variables are stored in a session and emailed after multiple forms are completed), currently I have radio buttons, text boxes and a combo box/ drop down list (for location). All parts are working fine and validating fine. My problem is to do with the combo box//ddl. I have successfully validated the ddl so the user must select a location onsubmit and it is added to session and passed fine.

At the moment the ddl only has cities or towns in it however as I would like to include different states and possibly different countries I need a code that validates the state first and then only gives the cities/towns that are in that state (otherwise my ddl would be to large). I can do this with links however I can't seem to do it in a form.

I am trying to do it this way

DDL has list of all states that on mouseover/ onclick the list is revealed. onclick of a specific state populates another ddl with only the cities cities/ towns that are in that state and onclick of specific city selects the location whereby onsubmit the location is stored in the the session for submission by email

Thanks in advance for your help

I still have the following two major issues. 1) Firstly I need to be able to send the selection from the second combo box by php. 2) secondly I need the combo box to appear within the table. (I thought this should be easy, but for the life of me cannot figure out how to get the dynamic combo into my table inside the form)

I have managed to send the selection from the first combo box with the form and also I can send a selection from the second combo, however onsubmit regardless of what is selected in the second combo box it simply sends the last option not the one selected. I have spent many hours trying to figure out why this is the case to no avail.

I have included my code for anyone who may be able to help. Lastly when I have figured out these 2 (with a little help) I should be able to sort out the validation by myself. Please ignore any code that is not relevant

<html>
<head>

<script type="text/javascript">

var this1;

window.onload = function() {
if (!document.all) document.captureEvents(Event.CHANGE);
document.getElementById('myddl').onchange = readDDL1; }

function readDDL1() {
var ddlobj = document.getElementById('myddl');
var currentSelection = ddlobj.options[ddlobj.options.selectedIndex].value;
if (currentSelection == '') currentSelection = ddlobj.options[ddlobj.options.selectedIndex].text;
doDDL2(currentSelection);
}

function doDDL2(ddl1Selection) {

var existingDDL2;
if ((existingDDL2 = document.getElementById('myddl2')) != null) existingDDL2.parentNode.removeChild(existingDDL2);

var ddl2Options;
switch (ddl1Selection) {
case "Western Australia":
ddl2Options = ["Please Select A Location", "Karratha", "Perth"]; break;
case "Queensland":
ddl2Options = ["Please Select A Location", "Brisbane", "Gold Coast"]; break;
}

if (typeof ddl2Options == "object") {
ddl2 = document.createElement('select');

ddl2.id = "myddl2";
var forVar;
for (forVar in ddl2Options) {
var newOption = document.createElement('option');
newOption.appendChild(document.createTextNode(ddl2Options[forVar]));
ddl2.appendChild(newOption);


}
document.body.appendChild(ddl2);

}

document.testform.this1.value = ((ddl2Options[forVar]));

}



function checkFrequency() {
return ShowResults();

}


function validate(){
var digits="0123456789"
var temp

if (document.testform.location.selectedIndex == 0) {
alert("Please Select a State");
return false
}

if (document.testform.location2.selectedIndex == 0) {
alert("Please Select a Location");
return false
}

return true
}




</script>

<style type="text/css">
.td_freq { background-color:yellow;
height:40px;
text-align:center;
}
.td_sev { background-colorink;
height:40px;
text-align:center;
}
.td_wi { background-color:lightgreen;
height:40px;
text-align:center;
}
</style>

</head>
<body>

<FORM name="testform" action='./emlapd.php' method='post' onsubmit="return checkFrequency()">

<input type='hidden' name='this1'>

<table align="center" border="1" width="40%">

<tr><td><b>Current Worksite State:</b><font color="red">*</font></td>
<td>
<select name="location" width='53' id="myddl">
<option value="0">--- Please Select Your State --- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbs p;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option value="Western Australia">Western Australia</option>
<option value="Queensland">Queensland</option>

</select>

</td></tr>
<tr><td><b>Location:</b><font color="red">*</font></td>
<td>

</td></tr>

</table>


<tr>
<th colspan="2">
<input type="submit" name='submit' value="Submit" onclick= "return validate()">
</th>
<td colspan="10">&nbsp;</td>
<th>
<input type='reset' name='reset' value='Clear Form'>
</th>
</tr>
</table>

</FORM>
</body>
</html>


Thankyou very much to everyone that may help


So I can place the DDL inside the form, however it places it at the end of the form. I want it somewhere in the middle (immediately following first combo box)

My other main issue is irregardless of the selection it simply posts the last option from the DDL not the one selected. Therefore I still want the second combo box to appear immediately below the first combo box and whatever option is selected from the second combo box I want to be posted with the rest of the form data.

If you have any other ideas that would be great

Obviously the reason I am still getting the same incorrect post is because the variable posted is still this1 from my code which reads the last value from the DDL. I have tried with all other variables to send as well ie ddl2 however still can't seem to send the selection.

So in its current state how can I send the selection and place the second DDL within the form??


Thank you

hello,

I have a problem changing the value of multiple text boxes, My page contain one text box named "price" and i need to set the value of this box to all other text boxes in the page which they attribute is <input type="text" value="" name="product[xxxx]" id="product"/>
xxxx = random number

the page may contain only one text box id=product or more

i have tried the following code but it only works with multiple text boxes and doesn't work if the page have one text box


Code:

              var price = document.getElementById('price').value;
              var allElements = document.form1.product;
              var len=allElements.length;
              if(allElements.length){
              for (i = 0; i < len; i++){
              allElements[i].value = price;
               }

I'm not a javascript expert so i don't know if this code is the right way to accomplish this.

Thank you very much for your help

Hello,

I have some code to open 1 dialog box. Could someone please help me manipulate this code to open multiple boxes with different contents. I would like to do this with out duplicating the existing code, maybe setting a variable. The least amount of code the better.

Thanks in advance.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
</head><body>
<div id="dialog" title="Example dialog">
  <p>Some text that you want to display to the user.</p>
</div>
<script type="text/javascript">
  $(document).ready(function() {
   
    $("#dialog").dialog({
      bgiframe: true, autoOpen: false, height: 100, modal: true
    });
  });
</script>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Click here to see the popup</a>
</body>
</html>

I set up my javascript so that it shows a hidden div box from an array when i click on a link.

To show only one hidden box, the code is

<a href="javascript:showOnlyThis('divIDgoeshere')">

how do i show multiple hidden div boxes with one link?

Thanks!

I have a script which allows me to select random users from one select field to another and works like a charm, but...

I want to be able to get random users from one select field to multiple (lets say 2) other select fields...

So lets say that I have 5 users in the first field (select1):
James
Bill
Jennifer
Bob
Karen

Now when I press a button:
<input value="" type="button" onClick="randomusers();" />

2 users should be moved to select2 and other 2 users moved to select3.

My current script is as follows:
Code:

function randomusers(){
 
    var given = 2, used = {}, randnum, opts = $('#select1 option'), olen = opts.length, hiddiv = $('#hiddendiv');
    function ran() { // generate a unique random number
      randnum = Math.floor(Math.random() * olen);
      return used['u'+randnum] ? ran() : randnum;
    }
    for (var i = 0; i < given; i++) { // get the correct quantity of randoms
      used['u'+ran()] = true;
    }
    var players = opts.filter(function(index) { // remove all options that are not one of the randoms
      return !!used['u'+index];
    }).appendTo('#select2');
    
}

Hoping for help...

Thanks in advance :-)

Hi everybody. I'm new to both Javascript and this site, so apologies if this isn't the right way to be asking this question.

Here's what I'm trying to do.

I've got two dropdown boxes ('language' and 'word'). When the submit button is pressed, I want a div to show with the right word in it. I can do this fine with one dropdown box, but two has got me stumped. Any ideas would be much appreciated.

S

Hi,

I think the problem I am having is an event not a css issue, so I hope I posted in the right forum.

What I am trying to achieve is the capability to provide multiple instant chat messages. I have the php/ajax for the instant messages, what I am not sure is how to be able to view multiple chats.

What I have started to do is limit it to five possible instant chat messages and have five divs in place with visibility hidden. It works fine for one.

But if someone clicks on the name of a person they wish to chat with, the way I am currently doing it, I would need to find out:
1. which divs were free to start an instant chat in (I have no idea how to do this with divs)?
2. Having identified it I will need to change the visibility so it suddenly becomes visible

I guess firstly am I going about this the right way to be able to host/view multiple chats?

My code is below.
Main Page
PHP Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('#submitchat').live('click',function(){
    var data = $('#chatmessage').serialize();
    $.post ('insertChat.php',data, function(){
            $('#chatmessage').each (function(){
                this.reset();
            });    
                return false;
        });
    });
});
</script>


<script type="text/javascript">
function loadChat(File,ID,Msg,TID,Cile){
loadXMLDoc1(File,ID,Msg);
delay = setTimeout(function(){loadChatRefresh(Cile,TID,Msg)},5000);
}
</script>

<script type="text/javascript">
function loadChatRefresh(File,ID,Msg){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
    try{
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }    
}

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
     timer = setInterval(function(){loadChatRefresh(File,ID,Msg)},3000);
    }
  }

var params=Msg;
xmlhttp.open("POST",File,true);

xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>

<script type="text/javascript">
function loadXMLDoc1(File,ID,Msg){
if (window.XMLHttpRequest)  {
  xmlhttp=new XMLHttpRequest();
  }
else {
    try{
  xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }    
}

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById(ID).innerHTML=xmlhttp.responseText;
    }
  }

var params=Msg;
xmlhttp.open("POST",File,true);

xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
</head>

<body>
    
            <h1>Test</h1>

<?php 
include("dbconnect.php");

            $result = mysql_query("SELECT *, signedin.PId as SIPId FROM signedin INNER JOIN friends
            ON signedin.PId=friends.invited OR signedin.PId=friends.invitee
            WHERE ((friends.invitee={$_SESSION['MyPId']} AND friends.statae='accepted') OR (friends.invited={$_SESSION['MyPId']} AND friends.statae='accepted')) 
            AND signedin.LogOff IS NULL AND signedin.PId !={$_SESSION['MyPId']}");

            while($row = mysql_fetch_array($result)){
                $mugwort= $row['SIPId'] . ';';
                }

$motherwort=explode(';',$mugwort);
foreach ($motherwort as $mulberry){


            $result = mysql_query("SELECT * FROM allusers
            WHERE PId='{$mulberry}'");

            while($row = mysql_fetch_array($result)){
                $nosegay=rand(). rand(). rand(). rand(). rand();
                $nightshade="{$_SESSION['MyPId']};{$mulberry};{$nosegay}";
                echo '<div class="img"><img src="thumbs/' . $row['pphoto'] . '" height="80px" width="80px" onclick="loadChat(\'chat.php\',\'chat1\',\'olivier=' . urlencode($nightshade) . '\',\'chatdisplay\',\'getDisplayChat.php\')";><div class="desc">' . $row['fullname'] . '</div></div><br />';
                }


}


            echo '<br /><div class="clear"></div><br /><br />';


?>
<div class="chat1" id="chat1"></div>
<div class="chat2" id="chat2"></div>
<div class="chat3" id="chat3"></div>
<div class="chat4" id="chat4"></div>
<div class="chat5" id="chat5"></div>
<br />
<br />

Chat Page
PHP Code:

<?php
include("dbconnect.php");
    
    $blossom=explode(';',$_POST['olivier']);
    $periwinkle=$blossom[0];
    $peppermint=$blossom[1];
    $pine=$blossom[2];


    global $periwinkle;
    global $peppermint;
    global $pine;

    echo '<div class="chatbanner" width="100%">
    <table width="100%">
    <tr>
    <td width="90%">';
        echo '<center><b>This Name</b></center>';
    echo '</td>
    <td width="5%">';
        echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="&#8722">';
    echo '</td>
    <td width="5%">';
        echo '<input type="button" class="buttonchat" name="minimize" id="minimize" value="X">';
    echo '</td>
    </tr>
    </table></div>';
    echo '<div class="chattext" id="chatdisplay" overflow="scroll">';


            $result = mysql_query("SELECT * FROM chat INNER JOIN allusers
            ON chat.chatter=allusers.PId 
             WHERE (chat.chatter={$periwinkle} AND chat.chattee={$peppermint}) OR (chat.chatter={$peppermint} AND chat.chattee={$periwinkle})
            AND ref={$pine} ORDER BY chat.date DESC");

            while($row = mysql_fetch_array($result)){
                echo '<table width="100%"><tr><td width="20%"><img src="thumbs/' . $row['pphoto'] . '" width="40px" height="40px"></td>';
                echo '<td width="80%" valign="top">' . nl2br($row['message']) . '</td></tr></table><hr />';
                }

    echo '</div><br /><br />';
    echo '<form action="insertChat.php" method="post" name="chatmessage" id="chatmessage">
        <input type="text" class="hidden" name="from" id="from" value="' . $_SESSION['MyPId'] . '">
        <input type="text" class="hidden" name="to" id="to" value="';
        echo ($_SESSION['MyPId']==$peppermint) ? $periwinkle : $peppermint . '">
        <input type="text" class="hidden" name="ref" id="ref" value="' . $pine . '">';

    echo '<div class="textchat">';     
    echo '<textarea cols="21" row="5" name="message" id="message"></textarea>';
    echo '<input type="button" name="submitchat" id="submitchat" value="&nbsp;"></div></form>';
    
?>

Style Sheet:
Code:

div.chat1 {
	position:fixed;
	bottom:1px;
	right:50px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}
	
div.chat2 {
	position:fixed;
	bottom:1px;
	right:260px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

div.chat3 {
	position:fixed;
	bottom:1px;
	right:470px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

div.chat4 {
	position:fixed;
	bottom:1px;
	right:680px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

div.chat5 {
	position:fixed;
	bottom:1px;
	right:890px;
	width:200px;
	height:250px;
	float:right;
	border:2px solid black;
	background-color:#fdf5e6;
	scrolling:auto;
	}

.chatbanner {
	background-color:#4b0082;
	text-decoration:none; 
	color:white;
	}

.textchat {
	position:fixed;
	bottom:0.5px;
	}

.chatbutton {
	position:fixed;
	bottom:0.5px;
	right:0.5px;
	border:none;
	}

If I have left anything out which might be helpful please let me know. I just got stuck on the logistics side of figuring out how was the best way to make this happen, any pointers would be great.

hi ! i would like to write the code for multiple text box select as shown in the link below:


http://www.downloadplex.com/Mobile/I...ne_284120.html


please see the screen shot 3

Hi

I am trying to create a page that has a couple of pop-up overlay boxes from a couple of links, Everything is working ok I think except for a problem on a browser resize.

The original code I found : ( http://kalyanchakravarthy.net/?p=208 ) was created or only one window so the resize code controls both windows, when I think need each one controlled separately. The resize code will make a closed overlay box appear.

Any suggestions or help will be greatly appreciated. THANK YOU



Code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="javascript" src="jquery-1.2.6.min.js"></script>
<!--script language="javascript" src="jquery-schedule-overlay.js"></script-->
<style type="text/css">

.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }


.overlayBox {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}

.overlayBoxb {
border:1px solid #09F;
position:absolute;
display:none;
width:730px;
height:600px;
background:#fff;
}

.overlayContent {
padding:0px;
}

.overlayContentb {
padding:0px;
}

.closeLink {
float:right;
color:red;
text-decoration:none;
}
a:hover { text-decoration:none; }

</style></head>

<body>

<div class="bgCover">&nbsp;</div>

<a href="#" class="launchLink">Launch Window</a>

<div class="overlayBox">
<div class="overlayContent">
<a href="#" class="closeLink">Close</a>

<img src="Session-A-mock-up.jpg" alt="Session A Schedule " />
</div></div>

<br /><br />

<a href="#" class="launchLinkb">Launch Window 2</a>

<div class="overlayBoxb">
<div class="overlayContentb">
<a href="#" class="closeLink">Close</a>

<img src="Session-B-mock-up.jpg" alt="Session B Schedule "/>
</div></div>

<script language="javascript">

function showOverlayBox() {

//if box is not set to open then don't do anything 
if( window.isOpen == false ) return;

// set the properties of the overlay box, the left and top positions
$('.overlayBox').css({
display:'block',
left:( $(window).width() - $('.overlayBox').width() )/2,
top:( $(window).height() - $('.overlayBox').height() )/2 -20,
position:'absolute'
});


// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});



function showOverlayBoxb() {

windowb=window.open;
//if box is not set to open then don't do anything
if( windowb.isOpen == false ) return;

// set the properties of the overlay box, the left and top positions
$('.overlayBoxb').css({
display:'block',
left:( $(window).width() - $('.overlayBoxb').width() )/2,
top:( $(window).height() - $('.overlayBoxb').height() )/2 -20,
position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height(),
});
}

function doOverlayOpen() {
//set status to open
isOpen = true;
showOverlayBox();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}

function doOverlayOpenb() {
//set status to open
isOpen = true;
showOverlayBoxb();
$('.bgCover').css({opacity:0}).animate( {opacity:0.5, backgroundColor:'#000'} );
// dont follow the link : so return false.
return false;
}

function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox,.overlayBoxb').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate( {opacity:0}, null, null, function() { $(this).hide(); } );
}

// if window is resized then reposition the overlay box

$(window).bind('resize',showOverlayBox) ;
$(window).bind('resize',showOverlayBoxb) ;

// activate when the link with class launchLink is clicked
$('a.launchLink').click( doOverlayOpen );
// activate when the link with class launchLink2 is clicked
$('a.launchLinkb').click( doOverlayOpenb );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );

</script>

</body>
</html>

I've been trying to create a page with two forms that have drop downs in them. These drop downs are set to store information from the previous drop down and I can get one to work easliy but having two forms has got me stopped in my tracks. I'm new to this and new to the forums so any help is apeciated. Just go easy on me. heh!

Under the function where it says

function setOptions(chosen,theform) {
var selbox = document.theform.opttwo;

I tried changing 'theform' to 'myform1' and so forth but neither worked.


Thanks again for your time and effort in helping me! Here's my code:

Code:

<html>
<head>
<SCRIPT TYPE="text/javascript">
<!--
function setOptions(chosen,theform) {
var selbox = document.theform.opttwo;
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
  selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
  selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
  selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
}
}
//-->
</SCRIPT>
</head>
<body link="#000066" vlink="#999999" alink="#FFFF00">
<table width="40%" height="447" border="0">
  <tr> 
    <td><div align="left"><img src="images/topbar.jpg" width="740" height="29" border="0" usemap="#Map"></div></td>
  </tr>
  <tr> 
    <td height="332"> <p align="left">&nbsp;</p>
      <div align="left"> 
        <table width="740" height="187" border="0" align="left">
          <tr> 
            <td height="97" colspan="2"> <div align="center"></td>
          </tr>
          <tr> 
            <td width="49%" height="21"> <div align="center"><strong>Form One</strong></div></td>
            <td width="51%"> <div align="center"><strong>Form Two</strong></div></td>
          </tr>
          <tr> 
            <td height="47"><form name="myform1">
                <div align="center"> 
                  <p> 
                    <select name="optone" size="1"
onchange="setOptions(document.myform1.optone.options[document.myform1.optone.selectedIndex].value,"myform1");">
                      <option value=" " selected="selected"> </option>
                      <option value="1">First Choice</option>
                      <option value="2">Second Choice</option>
                      <option value="3">Third Choice</option>
                    </select>
                    <br>
                    <br />
                    <select name="opttwo" size="1">
                      <option value=" " selected="selected">Please select one 
                      of the options above first</option>
                    </select>
                    <br>
                    <br />
                    <input type="submit" name="go" value="Submit"
onclick="alert(document.myform1.opttwo.options[document.myform1.opttwo.selectedIndex].value);">
                  </p>
                </div>
              </form></td>
            <td><form name="myform2">
                <div align="center"> 
                  <p> 
                    <select name="optone" size="1"
onchange="setOptions(document.myform2.optone.options[document.myform2.optone.selectedIndex].value,"myform2");">
                      <option value=" " selected="selected"> </option>
                      <option value="1">First Choice</option>
                      <option value="2">Second Choice</option>
                      <option value="3">Third Choice</option>
                    </select>
                    <br>
                    <br />
                    <select name="opttwo" size="1">
                      <option value=" " selected="selected">Please select one 
                      of the options above first</option>
                    </select>
                    <br>
                    <br />
                    <input type="submit" name="go" value="Submit"
onclick="alert(document.myform2.opttwo.options[document.myform2.opttwo.selectedIndex].value);">
                  </p>
                </div>
              </form></td>
          </tr>
        </table>
      </div>
      <p align="left">&nbsp;</p>
      <p align="left">&nbsp;</p></td>
  </tr>
  <tr> 
    <td bgcolor="#FFFFFF"><div align="left"><img src="images/bottombar.jpg" width="740" height="16"></div></td>
  </tr>
  <tr> 
    <td height="56"> <div align="center"></td>
  </tr>
</table>
</body>
</html>

Hi i just switched over from 1.5 to 2.2 swfobject.

in my admin area only the first video is showing on the page, but on the user side they all show up just fine, same code.. strange.

but anyway i was reading this..

http://groups.google.com/group/swfob...1e29c96933dfa0

and it confused me alittle because i have no idea how many vids are going to be display, i have them displaying from a loop.

i guess what the article is saying is that you have to call javascript for every one your going to display and use a dif label name for it.

but as i said i have no clue, am i suppose to list that 100 times on the page in case i have 100 videos...

javascript is really not my cup of tea lol...


here is my code..

in the head i have this ...

Code:

     <!-- added for swfobject 2.2 -->
         <script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.registerObject("player", "9.0.0");
		</script

and then in the body i have this.. and like i said there might be 100 vids but it only shows the first one.


Code:

begin the loop then do this 

<div style="float:left;">

<table border="0" align="left"><tr>

 <td align="center"><td align="center"><?=$sql_array->vid_name?><br />


                           
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="175" height="175" id="player" name="player" align="middle">
		<param name="movie" value="player.swf" />
                          <param name="play" value="false" />
		<param name="quality" value="high" />
		<param name="allowfullscreen" value="true" />
		<param name="allowscriptaccess" value="always" />
		<param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
		<!--[if !IE]>-->
		<object type="application/x-shockwave-flash" data="player.swf" width="175" height="175" align="middle">
                           <param name="play" value="false" />
		 <param name="quality" value="high" />
		 <param name="allowfullscreen" value="true" />
		 <param name="allowscriptaccess" value="always" />
		 <param name="flashvars" value="file=<?=$CONST_LINK_ROOT?>/movies/<?=$sql_array->vid_id?>.flv" />
		<!--<![endif]-->
		<a href="http://www.adobe.com/go/getflashplayer">
	             <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />	</a>
			<!--[if !IE]>-->
		</object>
	<!--<![endif]-->
		</object>
             					
</td></tr></table>
   </div>


loop again till done...

so what do i do to show multiples on a page.

Hope some one can assist me

Below is my code which works fine.

I need to be able to select more than one of the options at the same time. The code at the moment will only select one option rather than all my options.

Any advice would be great.

<HTML>
<HEAD>
<title>MDT Role and Application Selection Application - Gen-i</title>


<!-- Example of the multiple selections

Sub RunScript
For i = 0 to (Dropdown1.Options.Length - 1)
If (Dropdown1.Options(i).Selected) Then
strComputer = strComputer & Dropdown1.Options(i).Value & vbcrlf
End If
Next
Msgbox strComputer
End Sub
-->



<script>
function setOptions(chosen) {
var selbox = document.myform.opttwo;

selbox.options.length = 0;
if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
}



if (chosen == "1") {
selbox.options[selbox.options.length] = new
Option('Microsoft Project','Microsoft Project selected');
selbox.options[selbox.options.length] = new
Option('Microsoft Visio','Microsoft Visio selected');
selbox.options[selbox.options.length] = new
Option('Cognos Application','Cognos Application selected');
}




if (chosen == "2") {
selbox.options[selbox.options.length] = new
Option('Microsoft Project','Microsoft Project selected');
selbox.options[selbox.options.length] = new
Option('Microsoft Visio','Microsoft Visio selected');
selbox.options[selbox.options.length] = new
Option('Cognos Application','Cognos Application selected');
selbox.options[selbox.options.length] = new
Option('Oracle Discoverer','Oracle Discoverer selected');
selbox.options[selbox.options.length] = new
Option('At Risk 5.55','At Risk 5.55 selected');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new
Option('Microsoft Project','Microsoft Project selected');
selbox.options[selbox.options.length] = new
Option('Microsoft Visio','Microsoft Visio selected');
selbox.options[selbox.options.length] = new
Option('Vulcan 8','Vulcan 8 selected');
selbox.options[selbox.options.length] = new
Option('Autocad Lite 2010 Lite','Autocad Lite 2010 Lite selected');
selbox.options[selbox.options.length] = new
Option('Autocad Lite 2010 Full','Autocad Lite 2010 Full selected');
selbox.options[selbox.options.length] = new
Option('Aquire','Aquire selected');
selbox.options[selbox.options.length] = new
Option('WellCad','WellCad selected');
selbox.options[selbox.options.length] = new
Option('ArcGis','ArcGis selected');
selbox.options[selbox.options.length] = new
Option('QuickMap','QuickMap selected');
}
}
</script>

<HTA:APPLICATION
border="thin"
borderStyle="normal"
caption="yes"
maximizeButton="yes"
minimizeButton="yes"
showInTaskbar="no"
innerBorder="yes"
navigable="yes"
scroll="auto"
scrollFlat="yes" />

<script LANGUAGE="VBScript">
Sub Window_onLoad
window.resizeTo 600,720
End Sub
</script>

</head>

<body style="{background-image:url('bg2.jpg'); background-repeat:no-repeat;}">
<CENTER>
<img src="logo.gif" />
<h2 style="font-size: 12pt; font-family: Arial; color: #000">Please select the required role - Gen-i</h2>
<div style="font-size: 10pt; font-family: Arial; color: #298FFF">
<form name="myform"><div align="center">
<b>Select a Role:</b> <br /> <select name="optone" size="1"
onchange="setOptions(document.myform.optone.options
[document.myform.optone.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="1">General</option>
<option value="2">Technical</option>
<option value="3">Finance</option>
</select>
<br /><br /><b>Select Applications:</b> <br />
<select name="opttwo" size="10" multiple>
<option value=" " selected="selected">Please select one of the options above first</option>
</select>
<p></p>
<input type="button" name="go" value="Value Selected"
onclick="alert(document.myform.opttwo.options
[document.myform.opttwo.selectedIndex].value);">
</div></form>
</body>
</html>

I am developing a messaging service between members of my site. I am developing this with asp.net mvc. When a user goes to the SendMessage view to send a message to another member, there is a dropdown list which presents the sender with all the members of the site, which he or she will pick as the recipient. However, i don't want it to be a dropdown, i want it to be a text box, where a user types in the first couple of letters of a name, and the dropdown appears then with only the members which have the same couple of letters. This is basically like every email system out there (facebook and gmail have it just like that). And after they chose one, they can select another one in the same textbox, just separated by a comma or something like that.

Basically, how do i achieve that in javascript? I'm not even sure what that functionality is called, that's why i had to explain it properly.

Any help is greatly appreciated. thank you