JavaScript - Trying To Add An Onchange Event To A Select Tag

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

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

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.

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.....

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.

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

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.

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.

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>

All,
If I have the following code:
Code:

<form name="datatoshow" id="datatoshow">
Want to learn more about the sie? Use the drop down menu:<br />
<select name="thingtoshow" onchange="javascript:showvalues(this.datatoshow);">
<option value="home">Home</option>
<option value="help">Help!</option>
<option value="refer">Refer a Friend</option>
</select>		
</form>

This doesn't do anything on the onchange. The code it's supposed to send to is:
Code:

function showvalues(selObj){
alert("it gets here");
var valuetoshow;
valuetoshow = "valuetoshow="+selObj.options[selObj.selectedIndex].value;
alert(valuetoshow);
makePOSTRequest('showhome.php', valuetoshow);
}

This is in external js file. For some reason it doesn't send it and the alert never gets triggered.

Thanks.

Hi,


Can anyone help with my Error.

Just to give an idea on my objective.

I have an user level that a user can choose between "User","Support" and "Admin" Level. If the user choose "Admin" my <div id='userlevel'> will become hidden and vise versa of the level.

I have tested it on Html and js code it work just fine, but my error begun upon inserting it on php.
My error on my page said " 'selectmenu' is null or not an object".


Can anyone help me with this i'm really desperate on this.

Thanks.

This is my html and js code
Code:

<html>
<head>
<form >
<select id="mymenu" size="1" >
<option value="nothing">Select a site</option>
<option value="User">User</option>
<option value="Support">Support</option>
<option value="Admin">Admin</option>
</select>
<div id="level">
<table border=1>
<tr>
<td>Sample</td>
</tr>
</table>
</div>
</form>

<script type="text/javascript">

var selectmenu=document.getElementById("mymenu")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
 var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
 if (chosenoption.value=="Admin"){
 //alert('Did I mention I had a guestbook? Well SIGN IT!');  //open target site (based on option's value attr) in new window
 document.getElementById('level').style.visibility = 'hidden'; 
 }else if(chosenoption.value=="Support"){
  document.getElementById('level').style.visibility = 'visible'; 
 }else if(chosenoption.value=="User"){
  document.getElementById('level').style.visibility = 'visible'; 
 }
}

</script>

</html>

My viewsource

Code:

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Edit User</title>
	<link href="css/mystyle.css" rel="stylesheet" type="text/css"/>
	<script src="jquery\jquery.min.js"></script>
<script type="text/javascript" src="jquery\jquery.validate.js"></script> 

 <script>
  $(document).ready(function(){
  
	$.validator.addMethod("noSpecialChars", function(value, element) {
		  return this.optional(element) || /^[a-z0-9\_]+$/i.test(value);
	  }, "<font size='3' color='#FF0000'>Username must contain only letters, numbers, or underscore.</font>");
	 
    $("#edit").validate({
	  rules: {
		pass: "required",
		rpass: {
		  equalTo: "#pass"
		},
	
		fname:"required",
		lname:"required",
		email:"required email",
		dept:"required",
		userlvl:"required"
	  }
	  
	});
  });
  </script>
<script type="text/javascript">

var selectmenu=document.getElementById("ulvl")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
 var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
 if (chosenoption.value=="Admin"){
  document.getElementById('userlevel').style.visibility = 'hidden'; 
 }else if(chosenoption.value=="Support"){
  document.getElementById('userlevel').style.visibility = 'visible'; 
 }else if(chosenoption.value=="User"){
  document.getElementById('userlevel').style.visibility = 'visible'; 
 }
}

</script>
 <style type="text/css">
body {

font-family: arial; /* you need some backups here */
font-size: 17px;

}
</style> 
</head>
<body>
<br/>
<br/>
<p>		
<table BORDERCOLOR="#0B0B0B" border='1' bgcolor="#F5F5FA" width="70%" align='center'  >
<tr>
	<td width="100%" align="left" valign="middle">
		<img src='img/editprofile.png'>
	</td>
</tr>
<tr>
<td width="100%" align='center' >

	<table>
	<form method='post' id='edit' name='edit' action='edituser.php?UserName=Alphee' onSubmit="javascript: var x=window.confirm('Do you wan\'t to save this User?');if (!x) return(false);">
	<tr>
		<input type='hidden' value=Alphee name='uname'>
		<td align='right'><b>User Name:</b></td>	
		<td align='left'>Alphee</td>
	</tr>
	<tr>
		<td align='right'><b>First Name:</b></td>
		<td align='left'><input type='text' id='fname' value='Alphee' name='fname'></td>
	</tr>
	<tr>
		<td align='right'><b>Last Name:</b></td>
		<td align='left'><input type='text' id='lname'  value='Saspa' name='lname'></td>
	</tr>	
	<tr>
		<td align='right'><b>Email Address:</b></td>
		<td align='left'><input type='text' size='35' id='email' value='myemail.com' name='email'></td>
	</tr>
	<tr>
		<td align='right'><b>Department:</b></td>
		<td align='left'>
		<select name='dept' tabindex='8'><option >MIS</option><option >Acct</option><option >HR</option></select>		</td>
	</tr>
	<tr>
		<td  align='right'><b>User Level:</b></td>
		<td align='left'>
		<select class='ulvl' id='ulvl' name='ulvl' tabindex='9' ><option Selected=Selected>User</option><option value='User'>User</option><option value='Support'>Support</option><option value='Admin'>Admin</option></select></td></tr></table><div class='userlevel' id='userlevel'><tr><td align='center'><b>User Access</b></td></tr><tr><td><input type='checkbox' name='CreateTicket'>Create Ticket<br><input type='checkbox' name='AddUser' >Add User<br><input type='checkbox' name='EditProfile' >Edit/Delete User<br><input type='checkbox' name='ResetPass'>Reset Password<br><input type='checkbox' name='Department'>Add Department<br><input type='checkbox' name='Category'>Add Category<br><input type='checkbox' name='SubCategory'unchecked>Add Sub-Category</td></tr></div>	<tr>
		<td align='center' >
		<input type='submit' value='Save' name='save' title='Save User'>
		</td>
	</tr>
	</form>
</td>	


</tr>	
</table>

	</body>
	</html>

My actual code with js and php
PHP Code:
<?php
session_start();
if(isset( $_SESSION['username'])){
include_once("conn.php");    
?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Edit User</title>
    <link href="css/mystyle.css" rel="stylesheet" type="text/css"/>
    <script src="jquery\jquery.min.js"></script>
<script type="text/javascript" src="jquery\jquery.validate.js"></script> 

 <script>
  $(document).ready(function(){
  
    $.validator.addMethod("noSpecialChars", function(value, element) {
          return this.optional(element) || /^[a-z0-9\_]+$/i.test(value);
      }, "<font size='3' color='#FF0000'>Username must contain only letters, numbers, or underscore.</font>");
     
    $("#edit").validate({
      rules: {
        pass: "required",
        rpass: {
          equalTo: "#pass"
        },
    
        fname:"required",
        lname:"required",
        email:"required email",
        dept:"required",
        userlvl:"required"
      }
      
    });
  });
  </script>
<script type="text/javascript">

var selectmenu=document.getElementById("ulvl")
selectmenu.onchange=function(){ //run some code when "onchange" event fires
 var chosenoption=this.options[this.selectedIndex] //this refers to "selectmenu"
 if (chosenoption.value=="Admin"){
  document.getElementById('userlevel').style.visibility = 'hidden'; 
 }else if(chosenoption.value=="Support"){
  document.getElementById('userlevel').style.visibility = 'visible'; 
 }else if(chosenoption.value=="User"){
  document.getElementById('userlevel').style.visibility = 'visible'; 
 }
}

</script>
 <style type="text/css">
body {

font-family: arial; /* you need some backups here */
font-size: 17px;

}
</style> 
</head>
<body>
<br/>
<br/>
<p>        
<table BORDERCOLOR="#0B0B0B" border='1' bgcolor="#F5F5FA" width="70%" align='center'  >
<tr>
    <td width="100%" align="left" valign="middle">
        <img src='img/editprofile.png'>
    </td>
</tr>
<tr>
<td width="100%" align='center' >
<?php
if(isset($_POST['save'])){
        //User Access
        if(isset($_POST['CreateTicket'])){
        $CreateTicket='1';
        }else{
        $CreateTicket='0';
        }
        if(isset($_POST['AddUser'])){
        $AddUser='1';
        }else{
        $AddUser='0';
        }
        if(isset($_POST['Department'])){
        $Department='1';
        }else{
        $Department='0';
        }
        if(isset($_POST['Category'])){
        $Category='1';
        }else{
        $Category='0';
        }
        if(isset($_POST['SubCategory'])){
        $SubCategory='1';
        }else{
        $SubCategory='0';
        }
        if(isset($_POST['EditProfile'])){
        $UserEdit='1';
        }else{
        $UserEdit='0';
        }
        if(isset($_POST['ResetPass'])){
        $PassReset='1';
        }else{
        $PassReset='0';
        }
mssql_query("sp_edituser @lname='$_POST[lname]',@fname='$_POST[fname]',@upby='$_SESSION[username]',@uname='$_POST[uname]',@userlevel='$_POST[ulvl]',@email='$_POST[email]',@department='$_POST[dept]',@Cticket='$CreateTicket',@AddUser='$AddUser',@adept='$Department',@acat='$Category',@asubcat='$SubCategory',@edituser='$UserEdit',@pass='$PassReset'");
    mssql_close($con);
        echo "<b><p align='center'><font color='#F0000' size='3'>User has been edit.</font></p></b>";
    }
    
    $d=mssql_query("Select * from vw_dept");
    
    $lvl=mssql_query("spvw_userlevel @username='$_GET[UserName]' ");
    //$lvl=mssql_query("Select UserLevel from tblUser where UserName='$_GET[UserName]'");
    $row=mssql_fetch_array(mssql_query("spview_edituser @username='$_GET[UserName]'"));
//print "<meta http-equiv='refresh' content='=2;Viewuser.php'/>";    

?>

    <table>
    <form method='post' id='edit' name='edit' action='edituser.php?UserName=<?php echo $row['UserName'];?>' onSubmit="javascript: var x=window.confirm('Do you wan\'t to save this User?');if (!x) return(false);">
    <tr>
        <input type='hidden' value=<?php echo $row['UserName'];?> name='uname'>
        <td align='right'><b>User Name:</b></td>    
        <td align='left'><?php echo $row['UserName'];?></td>
    </tr>
    <tr>
        <td align='right'><b>First Name:</b></td>
        <td align='left'><input type='text' id='fname' value='<?php  echo $row['Firstname'];?>' name='fname'></td>
    </tr>
    <tr>
        <td align='right'><b>Last Name:</b></td>
        <td align='left'><input type='text' id='lname'  value='<?php  echo $row['Lastname'];?>' name='lname'></td>
    </tr>    
    <tr>
        <td align='right'><b>Email Address:</b></td>
        <td align='left'><input type='text' size='35' id='email' value='<?php echo $row['Email'];?>' name='email'></td>
    </tr>
    <tr>
        <td align='right'><b>Department:</b></td>
        <td align='left'>
        <?php
                
            echo "<select name='dept' tabindex='8'>";
            while($dept=mssql_fetch_array($d)){
                echo "<option ";
                if ($row['dept']==$dept['DeptName']) echo "Selected=Selected";
                echo ">".$dept['DeptName']."</option>";
            }
                echo '</select>';
        ?>
        </td>
    </tr>
    <tr>
        <td  align='right'><b>User Level:</b></td>
        <td align='left'>
        <?php echo "<select class='ulvl' id='ulvl' name='ulvl' tabindex='9' >";
            while($level=mssql_fetch_array($lvl)){
                echo "<option ";
                if ($row['UserLevel']==$level['UserLevel']) echo "Selected=Selected";
                echo ">".$level['UserLevel']."</option>";
                
            }
            echo "<option value='User'>User</option>";
                echo "<option value='Support'>Support</option>";
                echo "<option value='Admin'>Admin</option>";
                echo '</select>';
    
        echo "</td>";
    echo "</tr>";
    
    echo "</table>";
        if($UserAccess=mssql_fetch_array(mssql_query("sp_useraccess @username='$_GET[UserName]',@userlevel='Admin'"))){
    echo "<div class='userlevel' id='userlevel'>";
    echo "<tr>";
    echo "<td align='center'>";
    echo "<b>User Access</b>";
    echo "</td>";
    echo "</tr>";
    echo "<tr>";
        echo "<td>";
            echo"<input type='checkbox' name='CreateTicket'";  if(trim($UserAccess[CreateTicket])=='1'){echo 'checked';}echo ">Create Ticket<br>";
            echo "<input type='checkbox' name='AddUser' "; if(trim($UserAccess[AddUser])=='1'){echo 'checked';}echo">Add User<br>";
            echo "<input type='checkbox' name='EditProfile' ";if(trim($UserAccess[AEditUser])=='1'){echo 'checked';}echo">Edit/Delete User<br>";
            echo "<input type='checkbox' name='ResetPass'"; if(trim($UserAccess[APass])=='1'){echo 'checked';} echo">Reset Password<br>";
            echo "<input type='checkbox' name='Department'"; if(trim($UserAccess[ADept])=='1'){echo 'checked';} echo">Add Department<br>";
            echo "<input type='checkbox' name='Category'";  if(trim($UserAccess[ACat])=='1'){echo 'checked';}echo">Add Category<br>";
            echo "<input type='checkbox' name='SubCategory'";  if(trim($UserAccess[ASubCat])=='1'){echo 'checked';}else{ echo 'unchecked';}echo">Add Sub-Category";
            
        echo "</td>";
    echo "</tr>";
    echo "</div>";
    }
    ?>
    <tr>
        <td align='center' >
        <input type='submit' value='Save' name='save' title='Save User'>
        </td>
    </tr>
    </form>
</td>    


</tr>    
</table>

    </body>
    </html>
<?php
}else{ //not logged in
    header('location: login.php');
}
?>

Hello everyone. I learned javascript mainly from reading code. I'm have the most experience in c++. At any rate, what I want to happen is this

User chooses an option from a dropdown (select form.)
A textbox outputs the option they selected. This is my code so far: don't laugh at my old school c++ mindset.. It's all I know

Code:

<script type="text/javascript">

function setcharge(chargeamount)
{
var d;

switch (chargeamount)
{
case 0:
  var x="495.00";
  return x;
  break;
case 1:
  var x="350.00";
  return x;
  break;
case 2:
  var x="125.00";
  return x;
  break;
case 3:
  var x="250.00";
  return x;
  break;
case 4:
  var x="545.00";
  return x;
  break;
case 5:
  var x="545.00";
  return x;
  break;
case 6:
  var x="50.00";
  return x;
  break;
case 7:
  var x="189.00";
  return x;
  break;
case 8:
  var x="225.00";
  return x;
  break;
}
document.writeln("Current Total: ");
document.writeln(x);
break;
}
</script>

<script type="text/javascript"><!--
document.pfit.chargetype.onchange=(var x=setcharge(document.pfit.getElementById("chargetype").selectedindex));
document.writeln("I agree to pay: ");
document.writeln(x);
// --></script>

The form code is

Code:

<p><label>Select Course Type <select name="chargetype" id="chargetype"> <option value="aCourseOnly">$495.00 - a Course Only</option> <option value="bCousreOnly">$350.00 - b Course Only</option> <option value="aExamOnly">$125.00 - a Exam Only</option> <option value="bExamOnly">$250.00 - a Exam Only</option> <option value="aValueOption">$545.00 -a Course and Exam</option> <option value="bValueOption">$545.00 - a Course and Exam</option> <option value="CECIndividual">Continuing Education Credit (CEC) Course Individual Session Fee - $50.00 Each 4 hour Session</option> <option value="CEC2Day">2 Day a Continuing Educaton Credit(CEC) Course Review $189.00</option> <option value="CEC3Day">3 Day a Continuing Educaton Credit(CEC) Course Review $225.00</option></select> </label>(Complimentary with course)</p>

I have a feeling I'm using the DOM wrong, but then, I am a noob at javascript. Please help me.

I'm using onchange display to hide/show form elements depending on the value of a select box. It works perfectly well (I actually really adore it) for one select box, but I have another select box which I'd like to act similarly.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>
</form>
</body>

But when I go to add a second select (obj,id1,id2,id3,id4,id5,id6) with new "ifs" and id's, etc and so forth, neither work.

Code:

<head>
 <script type="text/javascript">
// <![CDATA[
function display(obj,id1,id2,id3,id4,id5,id6) {
txt = obj.options[obj.selectedIndex].value;
document.getElementById(id1).style.display = 'none';
document.getElementById(id2).style.display = 'none';
document.getElementById(id3).style.display = 'none';
document.getElementById(id4).style.display = 'none';
document.getElementById(id5).style.display = 'none';
document.getElementById(id6).style.display = 'none';
if ( txt.match(id1) ) {
document.getElementById(id1).style.display = 'block';
}
if ( txt.match(id2) ) {
document.getElementById(id2).style.display = 'block';
}
if ( txt.match(id3) ) {
document.getElementById(id3).style.display = 'block';
}
if ( txt.match(id4) ) {
document.getElementById(id4).style.display = 'block';
}
if ( txt.match(id5) ) {
document.getElementById(id5).style.display = 'block';
}
if ( txt.match(id6) ) {
document.getElementById(id6).style.display = 'block';
}
}
// ]]>
</script>
</head><body>

<form action="#">
<select name="Stype" onchange="display(this,'oneshot','outtake','multi','chapter');">
<option>Please select:</option>
<option value="oneshot">Oneshot</option>
<option value="outtake">Outtake</option>
<option value="multi">Original Multi-Chapter</option>
<option value="drabbles">Drabbles</option>
<option value="outline">Outline Preview</option>
<option value="chapter">Chapter Preview</option>
</select><BR><BR>
<div id="oneshot" style="display: none;">Some fields here</div>
<div id="outtake" style="display: none;">Some different fields here</div>
<div id="multi" style="display: none;">Some other fields here</div>
<div id="chapter" style="display: none;">Some more fields here</div>  <BR><BR><BR>

<select name="Atype" onchange="display(this,'romance','adventure');">
<option>Please select:</option>
<option value="romance">Romance</option>
<option value="adventure">Adventure</option>
</select><BR><BR>
<div id="romance" style="display: none;">Some new fields here</div>
<div id="adventure" style="display: none;">Some even newer fields here</div>
</form>
</body>

Is there any way to fuse them and get a second select to work the same?

Thanks in advance for the help!

I have a multiple fields on my page and wish to have a reusable javascript to update the previous box with the selction made.

how would this be done

Code:

<form name="form1" method="post" action="">
  <p>
    <input type="textone" name="textfieldone" id="textfieldone">
  </p>
  <p> 
    <select name="selectone" onChange="UpdatePreviousField()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </p>
  <p>&nbsp; </p>
  <p>&nbsp; </p>
  <p>&nbsp; </p>
  <p>&nbsp; </p>
  <p> 
    <input type="texttwo" name="textfieldtwo" id="textfieldtwo">
  </p>
  <p> 
    <select name="selecttwo" onChange="UpdatePreviousField()">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </p>
  <p>&nbsp; </p>
</form>

Trying to get the divs to switch style properties when selected form select menu. Any help would be great!

Code:

<script type="text/javascript">
function showstuff(element){
        if(document.getElementById(element).style.display = 'block')
                  {
                        document.getElementById(have).style.visibility="block";
                        document.getElementById(look).style.visibility="none";
                  }
        else if(document.getElementById(element).style.visibility = 'block')
                  {
                        document.getElementById(look).style.visibility="block";
                        document.getElementById(have).style.visibility="none";
                  }
}
</script>

<select name="type" onchange="showstuff(this.value);">
          <option value="look">Look</option>
          <option value="have">Have</option>
</select>
<div id="have" style="display:block;">Have</div>
<div id="look" style="display:none;">Look</div>