Learn VBA & Macros in 1 Week!

JavaScript - Onchange Event Of Dropdown List

Full Excel VBA Course - Beginner to Expert

Onchange Event Of Dropdown List	View Content

Hi all,

I want to reload an html page onChange event of dropdown list and retain the old values filled in the page.

Plz help.....

Full Excel VBA Course - Beginner to Expert

Help With Onchange Event

Similar Tutorials

View Content

Hi,

I am trying to copy the value of one textbox to another using onchange event. For some reason, my code does not work, please let me know where I went wrong. here is my code:

Code:

<html>
<head>
<script type="text/javascript">
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>

Field1: <input type="text" id="field1"/><br />
Field2: <input type="text" id="field2" onchange="copyText()"/>

</body>
</html>

Thank you.

Onchange Event

Similar Tutorials

View Content

Hi
I'm a newbie. Please help me. I'm using Joomla. I've got a dropdown which reads the filename from the database. When the user selects it I want an onchange event to open the pdf. I've been at it for 2 days now.

Code:

<?php
$con = mysql_connect('localhost', 'root', '');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("metnet", $con);
$sql="SELECT * FROM newsletter";
$result = mysql_query($sql);
echo "<form method='post'>";
$dropdown = "<select name='sname' onChange='location(this.form.sname)' >";
while($row = mysql_fetch_assoc($result)) {
$dropdown .= "\r\n<option value='{$row['fpath']}'>{$row['fpath']}</option>";
}
$dropdown .= "\r\n</select>";
echo $dropdown;
?>

Help With Onchange Event

Similar Tutorials

View Content

HI, i know very little about javascript, just enough to get me into trouble actually lol.

Here is what im working with. I have a custom Instant messenger for members.

It uses embed object macromedia as well as javascript to diplay the window and send messages.

What i want to do is simply add an onchange that when one person is typing it shows they are typing (ie xxxxx is typing....)

My experience is in php and html and i looked thru the script and the javascript functions but im not sure what im looking for exactly. Do i need to have access to the swf or fla file and be able to edit them to do this? I dont see any form inputs or i would know exactly where to put the onchange lol. Im guessing the input is in the swf or fla file not sure how that works.

what im guessing is that in the embed or the object tags (ill play with it) i can put something like

Code:

document.write('test on change\n');

i think i need to wrap that in doc write script type=javascript in quotes so it parses.
If i can get that text to show up inside the IM where i want it then i can try to figure out how to set focus on box and recongize onchange and do some testing.
I think i might even be able to doc write the onchange command but not sure.

Thanks

How To Disable A Dropdown List Based On Selection In Another Dropdown List

Similar Tutorials

View Content

Hi,

I have two dropdown lists with the second one being dependent on the selection in the first.

Options in list 1:
1,3 or 4

List two should be enabled when 3 or 4 is selected in list 1.

So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form:

Code:

<select name="fw[$i]" id="fw[$i]">
<option value="1">FWH</option>
<option value="3">links</option>
<option value="4">rechts</option>
<option value="0" selected></option>
</select><br />
<select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);">
<option value="0" selected>---</option>
<option value="1">gut</option>
<option value="2">schlecht</option>
<option value="3">Strafschlag</option>
<option value="4">OB</option>
</select>

$i is my index generated by my PHP script and runs from 1 to 18.
Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field.

Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable.

Code:

function showBox(field,val) {
		
if (val > 1) {		
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
	
}

Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem.
Thanks in advance!
Joe

Form Onchange Event!

Similar Tutorials

View Content

Hello ladies and gentlemen,

I would like to use some event handling on a form, not something I have done before and looking for some assistance. Here is my code:

Code:

<select name="LocO">
<option value=""></option>
<option value="O">Outside</option>
<option value="I">Inside</option>
</select>

<select name="LocA">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
</select>

<select name="Loc1">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

So what I need to happen, is based on the selection of the first selection box, some of the options of the other selection boxes should not be available.

If Outside is selected, everything in LocA should be available, but only up to 4 in Loc1... and if Inside is selected, only up to E should be available in LocA and everything should be available in Loc1.

Is this possible?

Trying To Add An Onchange Event To A Select Tag

Similar Tutorials

View Content

I am trying to add an onchange event to a select tag.

This is my code, but it does not appear to be working. Any advice is appreciated. Thanks...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <script type="text/javascript">
    function myLoad () {
      var mySelect = document.getElementsByName('test');
      mySelect.onchange = function(){alert('hi')};
    }
  </script>  
  </head>
  <body onLoad="myLoad()">
<select name="test" >
  <option value="1">1</option>
  <option value="2">2</option>
</select>
  </body>
</html>

Onchange Event Problem

Similar Tutorials

View Content

Hi All,

Need a bit of help here, need this SELECT to submit the page and end up at the below URL, correctly passing the GET values through the string.

<code>
<select name="dir-fact-misma" id="dir-fact-misma" class="text100" tabindex="" onChange="alta_nueva.action='alta.php?page=p2#alta'; return true;">
<option value="Si" <?php if(!isset($_POST['dir-fact-misma']) || $_POST['dir-fact-misma'] == 'Si') print "Selected='Selected '"; ?>>Si</option>
<option value="No" <?php if(isset($_POST['dir-fact-misma']) && $_POST['dir-fact-misma'] == 'No') print "Selected='Selected '"; ?>>No</option>

</select>
</code>

the form in which this SELECT is placed needs to be submitted so that other fields in the form are not lost, they are saved in Session Variables.

the same javascript but activated through an onclick event works perfect elsewhere in the same form with the following code, i think its the onChange that doesn't work for some reason.

<code>
<input name="p1" type='submit' id="p1" onclick="alta_nueva.action='alta.php?page=p1#alta'; return true;" value='1' />
</code>

the page is programmed in PHP.

Any help is appreciated.

Updating Onchange Event

Similar Tutorials

View Content

All, first post on the forum. I hope this is relatively simple. I've looked around for the answer, but I thin think the search terms (update onchange event) are a bit too common...

Code:

document.getElementById("tester").innerHTML= "hello";
document.getElementById("tester").onmouseover = "alert('hello')";

You see I'm trying to change an event like I'd change a property. The first will change the text to hello. I'd like the second to change the onmouseover event to display a hello world alert... but it doesn't seem to do anything.

How can I change events?

Jason

Show Div On Onchange Event

Similar Tutorials

View Content

Hi All,

I am really strugling with this and I hope somebody can help me on this. I would like to have a dropdown to only show when a certain value is chosen from another drop down.

So if in this dropdown the value ETS Rep Discount is chosen he should show the other dropdown

Code:

<div class="row">
							<div class="fieldName">Discount Type</div>
							<div class="fieldValue">
								<asp:DropDownList ID="discountTypeDropDownList"  runat="server" AutoPostBack="True"
									Width="295px" OnSelectedIndexChanged="DiscountTypeDropDownList_SelectedIndexChanged">
									<asp:ListItem Value="<%$ AppSettings:DiscountType.General %>">General Discount</asp:ListItem>
									<asp:ListItem Value="<%$ AppSettings:DiscountType.Golf %>">Golf Only Rep Discount</asp:ListItem>
									<asp:ListItem Value="<%$ AppSettings:DiscountType.ETS %>">ETS Rep Discount</asp:ListItem>									
									</asp:DropDownList>
							</div>
						</div>

Code:

<div class="row">
							<div class="fieldName">Category</div>
							<div class="fieldValue">
								<asp:UpdatePanel ID="UpdatePanelCategory" runat="server">
									<ContentTemplate>
										<asp:DropDownList ID="CategoryDropDown" runat="server" Width="295px">
										</asp:DropDownList>&nbsp;
										<asp:Label ID="CategoryRequiredLabel" runat="server" Font-Bold="True" ForeColor="Red"
											Visible="False">required!</asp:Label>
									</ContentTemplate>
									<Triggers>
										<asp:AsyncPostBackTrigger ControlID="discountTypeDropDownList" /> 
									</Triggers> 
								</asp:UpdatePanel>										
							</div>
						</div>

thanks in advance

Onchange Event Firing On Page Load

Similar Tutorials

View Content

Hi All,

I have a script that is called by the onchange event on my text field (it compares the date entered into the field and issues an alert if the date is earlier than the current date). This worked great on my data entry form but I also want to use the same script in my update form. In the update form the text field is already receiving a value via php:

Code:

<input name="DateNeeded" type="text" class="formField" id="DateNeeded" onchange="checkDate(this)" value="<?php echo $row_rstRequestDetails['DateNeeded']; ?>" />

and this is causing my onchange event to fire when the page is loaded. Is there a way to suppress the onchange event for the initial page load?

Thanks,

Ken

Javascript Select Boxes, Onchange Event Help

Similar Tutorials

View Content

Hello,

I am working on a CGI/Ajax application to interface with a database. I have the back-end Perl/CGI application working, so now it it is time to design the web interface and respective forms.

So here goes, I am attempting to create dynamic list boxes, but I am unable to pass a value to the 'onChange' event.

Here is my code (this is a proof of concept and highly stripped down):
Code:

<html>
<head>
</head>
<body>
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

    var array = [ 'name', 'age', 'year'];

    function init(sel_val){
        for (var i = 0; i < array.length; i++){
            document.write(i + " " + array[i] + "<br />");
        }

        for (var i = 0; i< array.length; i++){
            document.product.id_type.options[i] = new Option(i + array[i], i);
        }
    }


    function OnChange(sel_val) {
//         for(i = document.product.id_style.length - 1; i > 0; i--)
//                document.product.id_style.options[i]    = null;
//        document.product.id_style.options[0] = new Option("something else", 15);
          alert("pressed" + " " + sel_val + "<br />");
    }

    </script>


<form name="product">
<select name="id_type" size="5" style="width: 150px;" onChange="OnChange()"></select>

        <select name="id_style" size="5" style="width: 150px;" ></select>
    </form>
    <script>
            init();
    </script>



</body>
</html>

I'm well versed in Perl and Java but I am a JavaScript newbie, so go easy.

I understand that sel_val is not being set, but I'm not sure how it should (or could) be set.

I would like to use a hash instead of integer values for `i`

document.product.id_type.options[i] = new Option(i + array[i], i);

becomes

document.product.id_type.options[i] = new Option(hash[key], key);

Any thoughts, comments, criticisms, jokes are welcome. Thanks in advance for the assist.

Trigger An Onchange Event On Page Load?

Similar Tutorials

View Content

Hello,

I have this onchange event that occurs after user selection of a dropdown menu. When a user makes a selection it queries the database and delivers some data.

The value of the dropdown is stored in a database, but the problem is when the page is refreshed the delivered data disapears, only reappearing if you change the dropdown.

How can I make the onchange event run when the page loads so that if there is already a selection, the database data will always be there, only to change if the user changes the selection?

Here is the JS:
Code:

<script type="text/javascript">
function showCustomer(str)
{var xmlhttp;    
if (str=="")
{document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();}
</script>

And the onchange line:

Code:

<SELECT Name=""customers"" id=""customers"" onchange=""showCustomer(this.value)"">

Etc... Please ignore the double sets of quotes.

Onchange Event - Textbox To Enable Radio Buttons

Similar Tutorials

View Content

Hi,
I have a form consisting of nine text fields (labelled 1-9) and nine radio buttons for each of the text fields. I want to enable the radio buttons when text is entered into the field corresponding to that particular radio button. Is there a way of achieving this using a JavaScript onChange event?

Thank you in advance.

Onchange Event Not Firing When Input Is Populated From Child Window

Similar Tutorials

View Content

Hello,

I'm working on a quote generator and I'm running into an issue with onChange events not firing when a text field is dynamically populated via a child window.

Here's my setup:
I have 3 text boxes (quantity, price, markup) that are multiplied together in order to give the total of that product.
Each text box has an onChange event [called calculator()] that calls an external javascript file, which handles the multiplication and instantly updates the total of that product.

Up to this point, everything works fine - - when I manually edit any of the 3 inputs, the total updates correctly.

However, my problem is that I now have the "price" text box being dynamically populated, and when it updates it is not firing the onChange event attached to it.

The text box is being filled by way of launching a child window and running the following code within it:
Code:

function call_submit()
 {
    opener.document.quote_form.item_price_1.value=document.child.prods.options[document.child.prods.selectedIndex].id
    self.close();
 }

I've also tried to call the calculator function from within the child window, with no luck:
Code:

function call_submit()
 {
    opener.document.estimator_form.item_price_1.value=document.child.prods.options[document.child.prods.selectedIndex].id
      
calculator ()

self.close();
 }

So, as of right now, the following is happening - - I launch the child window, I select the product to add to the quote, the child window closes and the price is correctly populates within the "price" text box, BUT the total stays at zero. If I manually edit any of the fields, it then catches back up and properly updates the total.

Is their any way to fire the onChange event at the time when the text field is populated from the child window?

Any help would be appreciated.
Thanks in advance.

Onchange Function Dropdown To Link

Similar Tutorials

View Content

Hi there,

I have a drop down menu that runs a function when one of the options are chosen. Is there a way to have this run from individual links?

<select name="users" onChange="showUser(this.value)">
<option value="">Select a Deer:</option>
<option value="1">8002</option>
<option value="2">8009</option>
<option value="3">8011</option>

Thanks

Rich

Correct Syntax For Referencing A Hyphenated Form Input Radio Name In Onchange Event

Similar Tutorials

View Content

Hello,

On a simple form, there is a radio button group with two radio buttons, a text box, and a submit button.
The first radio button is checked(selected) by default.
The text box input has the onChange event handler so that if the text is changed, the second radio button will be checked(selected).
The problem is the input radio name contains a hyphen that breaks the JavaScript and the name can not be changed.
What is the correct syntax for referencing a hyphenated form input radio name in the onChange event?

Here is the form that works correctly with no hyphen in the input radio name:
Code:

<form name="myFormGood" action="" onsubmit="return false;">
Good Form with no hyphen in radio button name<br>
<input name="radio1" type="radio" value="4" checked> First Option<br>
<input name="radio1" type="radio" value="5"> Second Option<br><br>
Change the text to select the Second Option<br>
<input type="text" name="text1" onChange="document.myFormGood.radio1[1].checked = 'true';" size="10" value=" "><br><br>
<input type="button" name="submit" value="It Works!">
</form>

Here is the form that breaks the JavaScript because it has a hyphen in the input radio name:
Code:

<form name="myFormBad" action="" onsubmit="return false;">
Bad Form with hyphen in radio button name breaks JavaScript<br> 
<input name="radio-1" type="radio" value="4" checked> First Option<br>
<input name="radio-1" type="radio" value="5"> Second Option<br><br>
Change the text to select the Second Option. Nothing Happens.<br>
<input type="text" name="text1" onChange="document.myFormBad.radio-1[1].checked = 'true';" size="10" value=" "><br><br>
<input type="button" name="submit" value="It Doesn't Work!">
</form>

Dynamically Remove Options From Dropdown. How To Return To Original Dropdown List?

Similar Tutorials

View Content

Hi,

I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now.

The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again?

I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution:

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>

<title>HTML Template</title>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript">
//<![CDATA[

function store(element) {

// store values

	var cl = element;
	
	var text_list = new Array();
			
	var value_list = new Array();
	
	var length = cl.length;
	
	for (var foo=0; foo<length; foo++) {
	
		text_list[foo] = cl.options[foo].text;
		
		value_list[foo] = cl.options[foo].value;
		
		alert("text array " + foo + " " + text_list[foo]);
		
		alert("value array " + foo + " " + value_list[foo]);
		
	}
	
	populate(cl, text_list, value_list);

}

function populate(element, text, value) {

	// populate options with previously stored values
	
	var cl = element;
	
	var length = cl.length;

	cl.options.length=0;	
	
	for (var bar=0; bar<length; bar++) {
		
		cl.options[bar]= new Option(text[bar], value[bar], false, false);
		
	}
	
}

function crafty_set_country(code) {	

	var cl = document.getElementById('select');
	
	store(cl);
	
	for (var i=0; i<cl.length; i++) {

		if (cl.options[i].value == code) {

			alert(cl.options[i].value + " found");
			
			var value = cl.options[i].value;
			
			var text = cl.options[i].text;
			
			cl.options.length=0;
			
			cl.options[0]=new Option(text, value, true, true);
			
			/*
			for (var j=0; j<cl.length; j++) {
			
				alert("second loop " + cl.options[j].text);
				
				if (cl.options[i].value != code) {
				
					cl.options[j]
				
				}
			
			}
			*/
			
		} else {
		
		alert(cl.options[i].value);
		
		}
		
	}
	
}

//]]>
</script>

</head>
 
<body>

<form>

<select id="select">
  <option value="10">ten</option>
  <option value="20">twenty</option>
  <option value="30">thirty</option>
  <option value="40">fourty</option>
  <option value="50">fifty</option>
  <option value="60">sixty</option>
</select>

<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">

</form>

</body>
</html>

Many thanks!

Martin

Php Drop Down List Selection Populates Second Dropdown List Or Text Box - Help!!

Similar Tutorials

View Content

Hi all,

I have been struggling on a bit of code for a while now. I need to populate a second drop down list (Region) based upon the selection of the first (County).
I have found a piece of code that works on its own and have adapted to suit my needs - see below. However, when I drop it into my main page the javascript is not working. It's because of the formObject but I just don't know enough to resolve this! Furthermore, I need the textboxes the user has already completed in the form to retain their value once the javascript kicks in as the completed form will submit to a database.

This piece of code is working well . . . .
Code:

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['theForm'];
formObject.submit();
}

</script>

<form name="theForm" method="get">

<!-- County SELECTION BASED ON city VALUE -->

<?php

?>

<select name="County" onChange="autoSubmit();">
<option value=''</option>

<?php

//POPULATE DROP DOWN MENU WITH COUNTRIES FROM A GIVEN city

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

//POPULATE DROP DOWN MENU WITH RegionS FROM A GIVEN city, County

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>

What follows is my form where the javascript is not working - edited quite a bit to save on space!

Code:

<head>
 
<script language="JavaScript">

function autoSubmit()
{
var formObject = document.forms['subform'];
formObject.submit(); 
}

</script>

</head>

<form enctype="multipart/form-data" method="post" action="add_attraction01.php" FORM NAME="FormName">     
<input type="hidden" name="MAX_FILE_SIZE" value="32768" />    
<label for="Business_name">Business Name</label>    
<input type="text" size="60" STYLE="color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; background-color: #72A4D2;"     
<id="Business_name" name="Business_name" maxlength=60/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="StreetAddress">Address</label>    
<input type="text" size="60" rows="2" id="StreetAddress" name="StreetAddress" maxlength=120/><font size="1" face="arial" color="red">Required field</font><br />    
<label for="Town">Town</label>    <input type="text" size="25" id="Town" name="Town" maxlength=25/><font size="1" face="arial" color="red">Required field</font><br /> 

<?php

$link = mysql_connect('myhost', 'myusername', 'mypassword') or die('Could not connect: ' . mysql_error());
mysql_select_db('mydatabase') or die('Could not select database');

if(isset($_GET["County"]) && is_numeric($_GET["County"]))
{
$County = $_GET["County"];
}

if(isset($_GET["Region"]) && is_numeric($_GET["Region"]))
{
$Region = $_GET["Region"];
}

?>

<form name = "subform" method="get"> 

<select name="County" onChange="autoSubmit();"> 
<option value=''</option>

<?php

$sql = "SELECT * FROM county_regions";
$counties = mysql_query($sql,$link);

while($row = mysql_fetch_array($counties))
{
echo ("<option value=\"$row[CountyID]\" " . ($County == $row["CountyID"]? " selected" : "") . ">$row[County]</option>");
}

?>

</select>

<?php

?>

<br><br>

<?php

if($County!= null && is_numeric($County))
{

?>

<select name="Region" onChange="autoSubmit();">


<?php

$sql = "SELECT * FROM county_regions WHERE CountyID = $County ";
$Regions = mysql_query($sql,$link);

while($row = mysql_fetch_array($Regions))
{
echo ("<option value=\"$row[CountyID]\" " . ($Region == $row["CountyID"]? " selected" : "") . ">$row[Region]</option>");
}

?>

</select>

<?php

}

?>
<input type="text" size="20"id="Tel_No" name="Tel_No" maxlength=20 onkeypress="return isNumberKey(event)"/><font size="1" face="arial" color="red">Required field</font><br />    
<br/>    
<input type="submit" value="Submit your attraction" name="submit" onclick="return BothFieldsIdenticalCaseSensitive();"/>   
</form>
</body>
</html>

It's probably obvious to you guys!!

Thanks in advance for your help.

Jukebox - How To Replay List & How To Create Non Dropdown List

Similar Tutorials

View Content

09-01-10

Not sure exactly where to post this thread as it involves HTML, Javascript and embedded media players. It probably would be more appropriate here as there is much Javascript involved....

Hello,

I am trying to construct a Jukebox for my website. I have spent considerable time all over the WEB and at this forum which addressed the issue in a 50 page thread. Please see:

http://codingforums.com/showthread.php?t=50666

I got a lot of ideas from this thread but still cannot figure a way to do the following within the Jukebox. These are my main two questions for everything below:

1. How can I have the Jukebox cycle through all tunes and then start over from the beginning?

2. How can I allow the user to select a tune from a list but not a drop down list, have the Jukebox start from the user’s selection and then play all songs to the end. Then as in #1, start over from the beginning?

Per this thread I came away with basically two ways to assemble the jukebox. One uses links in a drop down list which the user can choose from. The other is to use an .m3u playlist. The user can only select a “playlist” from the drop down.

Below, I have included the code for each Jukebox. To see the Jukeboxes in action please go to my website where I have posted some test pages exhibiting the jukeboxes that I am referring to.

The following is the Jukebox which utilizes an .m3u playlist. If I end up using this idea I would like the tunes in the .m3u playlist to be displayed and allow the user to be able to choose a tune in the list. Then have the list play to the end of all tunes in the list. Then start over from the beginning of the list. After this code is the .m3u playlist.

Go to url removed and click on the link that says:
“Media Player Using an .M3U Playlist”

Jukebox utilizing an .m3u playlist:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
text-align:center;
}
</style>
<script type="text/javascript">
function PlayIt(what){
player.document.getElementById('music').innerHTML='<object width="300" height="300" '
      +'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
      +'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
      +'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
      +'<param name="url" value="'+what+'">'
      +'<param name="uiMode" value="full">'
      +'<param name="autoStart" value="true">'
      +'<param name="loop" value="true">'
      +'<embed type="application/x-mplayer2" '
      +'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
      +'showcontrols="true" uimode="full" width="300" height="45" '
      +'src="'+what+'" autostart="true" loop="true">'
+'</object>';
}
</script>
</head>

<body>
<div id="music">
<object width="300" height="300"
      classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
      codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
      standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
      <param name="url" value="">
      <param name="uiMode" value="full">
      <param name="autoStart" value="true">
      <param name="loop" value="true">
      <embed type="application/x-mplayer2"
      pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
      showcontrols="true" uimode="full" width="300" height="45"
      src="" autostart="true" loop="true">
</object>
</div>
<br>
<br>
<select name="player" onchange="PlayIt(this.value)">
<option value="none">::Choose a Song::</option>
<option value="JukeboxList.m3u">Jukebox List</option>
</select><br>
</html>

Here is the .m3u playlist for the above code:

Code:

#EXTM3U
#EXTINF:Bill Evans - G Waltz
media/G Waltz.mp3
#EXTINF:Dan Pincus - In Your Time
media/In Your Time.mp3

The following code is for the Jukebox that has a list of links in a dropdown list. If I go with this idea, I would like for the list not to be a dropdown list but just a list of tunes. The user should be able to click on any tune in the list and the player should start from that point, play all the remaining tunes in the list and then start from the beginning.

Go to url removed and click on the link that says:
“Media Player Using Links”

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
body {
text-align:center;
}
</style>
<script type="text/javascript">
function PlayIt(what){
player.document.getElementById('music').innerHTML='<object width="300" height="300" '
      +'classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" '
      +'codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" '
      +'standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">'
      +'<param name="url" value="'+what+'">'
      +'<param name="uiMode" value="full">'
      +'<param name="autoStart" value="true">'
      +'<param name="loop" value="true">'
      +'<embed type="application/x-mplayer2" '
      +'pluginspage="http://microsoft.com/windows/mediaplayer/en/download/" '
      +'showcontrols="true" uimode="full" width="300" height="45" '
      +'src="'+what+'" autostart="true" loop="true">'
+'</object>';
}
</script>
</head>

<body>
<select name="player" onchange="PlayIt(this.value)">
<option value="none">::Choose a Song::</option>
<option value="media/GWaltz.mp3">G Waltz</option>
<option value="media/InYourTime.mp3">In Your Time</option>
<option value="http://urltosong3.mp3">Song 3</option>
<option value="http://urltosong4.mp3">Song 4</option>
<option value="http://urltosong5.mp3">Song 5</option>
</select><br>
<div id="music">
<object width="300" height="300"
      classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
      codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
      standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject">
      <param name="url" value="">
      <param name="uiMode" value="full">
      <param name="autoStart" value="true">
      <param name="loop" value="true">
      <embed type="application/x-mplayer2"
      pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
      showcontrols="true" uimode="full" width="300" height="45"
      src="" autostart="true" loop="true">
</object>
</div>
</html>

Another idea I found on the WEB also uses an .m3u playlist. The good thing about it is that it lists all the tunes in the playlist which the user can then select from. This jukebox calls up an entire Windows Media Player. If I was to use this idea I would like to be able to disable the left side of the player where the user has options such as burning to CD, Media Guide, Radio Tuner etc…

Go to url removed and click on the link that says:
“Media Player Within an IFrame Using .m3u Playlist””

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>JukeBox</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
</head>

<body>

<IFRAME name="frame" src="JukeboxList.m3u"
width="100%"
height="347"
scrolling="no"
frameborder="0">
[Your user agent does not support frames or is currently configured not to display frames.]
</IFRAME>

</body>
</html>

Thanks!
Dan

Dropdown List

Similar Tutorials

View Content

I need help with this js...
this is dropdown list...if user choose okc in first list(vrsta) in second (celik) user can choose C0270 and C0370...if chosen pc in first list in second user can choose C1330 and C1530 etc...
There are two boxes...ans15 and ans14...and button which user clicks
The idea is that user choose one option(okc,pc or cc) and choose option (C0270 or something else) onclick some values should be written in boxes
example:
chosen okc and C0270 in ans15 "hello" and in ans14 "goodbye" should be writen
if chosen okc and C0370 in ans15 "hi" and in ans14 "bye" should be writen

Code:

<script type="text/javascript">
function setOptions(chosen) {
var izbor = document.form3.celik;
izbor.options.length = 0;
if (chosen == " ") {
  izbor.options[izbor.options.length] = new Option('choose',' ');
 
}
if (chosen == "okc") {
  izbor.options[izbor.options.length] = new Option('C0270','C0270');
  izbor.options[izbor.options.length] = new Option('C0370','C0370');
}
if (chosen == "pc") {
  izbor.options[izbor.options.length] = new Option('C1330','C1330');
  izbor.options[izbor.options.length] = new Option('C1530','C1530');

}
if (chosen == "cc") {
  izbor.options[izbor.options.length] = new Option('C1120','C1120');
  izbor.options[izbor.options.length] = new Option('C1220','C1220');

 }


}
</script>
</head>

<body>


<FORM name="form3">
  <table width="439" height="139" border="1">
  <tr>
    <td width="200" height="33">
      <div align="center">
        <select name="vrsta" size="1"
onchange="setOptions(document.form3.vrsta.options
[document.form3.vrsta.selectedIndex].value);">
          <option value=" " selected="selected"> </option>
          <option value="okc">Opsti konstrukcijski celici</option>
          <option value="pc">Poboljsani celici</option>
          <option value="cc">Cementirani celici</option>
          <option value="cl">Celicni liv</option>
          <option value="sl">Sivi liv</option>
        </select>
        <br> 
        <br>
      </div></td>
    <td width="108" rowspan="3">&nbsp;</td>
    <td width="109" rowspan="3">&nbsp;</td>
    </tr>
  <tr>
    <td height="33"><div align="center">
      <select name="celik" size="1">
        <option value=" " selected="selected">Izabrati prvo vrstu</option>
        </select>
    </div></td>
    </tr>
  <tr>
    <td height="23" rowspan="2"><div align="center">
      <input type="button" value=" ok " onclick="beta(this.form)" />
      </div>
      </div>
      <div align="center"></div>      </td>
    </tr>
  <tr>
    <td><input type="type" "number" value="" name="ans15" size="9" /></td>
    <td><input type="type" "number" value="" name="ans14" size="9" /></td>
    </tr>
  </table>
</FORM>
</body>
</html>