AllSeoHelp.com
Search the Entire Site
  • PHP
  • JavaScript
  • CSS
  • HTML
Learn VBA & Macros in 1 Week!

JavaScript - Onchange Select Box
Full Excel VBA Course - Beginner to Expert

Onchange Select Box

 View Content
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.
Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Error Using Onchange In Select Tag On Js And Php
Trying To Add An Onchange Event To A Select Tag
Please Help With Onchange, Select, And Displaying Output.
Javascript Select Boxes, Onchange Event Help
How To: Select Onchange Alter Another Field On Same Page
2 Select Boxes In 1 Form With Onchange Display
Javascript Show Hide Divs Onchange Select Menu
Onchange Help
Onchange
Onchange
Onchange Js Not Working In Ff Only
Onchange Event
Help With Onchange Validate
Onchange With Submit
Help With Onchange Event
How To Fix The Onchange Function?
Onchange Problem
Help With Onchange Event
Javascript Onchange
Simple Onchange Help.


Learn VBA & Macros for Excel in 1 Week!


Error Using Onchange In Select Tag On Js And Php

 Similar Tutorials View Content
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');
}
?>


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>


Please Help With Onchange, Select, And Displaying Output.

 Similar Tutorials View Content
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.

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.

How To: Select Onchange Alter Another Field On Same Page

 Similar Tutorials View Content
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>


2 Select Boxes In 1 Form With Onchange Display

 Similar Tutorials View Content
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!

Javascript Show Hide Divs Onchange Select Menu

 Similar Tutorials View Content
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>


Onchange Help

 Similar Tutorials View Content
Hi folks.

I'm working on a calculator and need to use the 'onchange' function.

Basically, the user selects the year (id=taxYear) and once the year is select (default is 2008) this year will appear in 2 different lines of the page under 2 seperate ID's(ageYear & totalYear).

I've looked at a few example of the function but I'm still not sure how to approach it.

At the moment the year changes once I hit the 'calculate' button but the onChange would obviously offer a better alternative with the date changing once 'taxYear' is changed.

here is the script;

Code:
 	//check the year 
	var taxYear =       document.getElementById('taxYear').options[document.getElementById('taxYear').selectedIndex].value;
	document.getElementById('ageYear').innerHTML = taxYear;	
	document.getElementById('totalYear').innerHTML = taxYear;

Here is the jsp;
Code:
    <tr>
      <td align="left" width="203" colspan=""><p> Your Tax Year: </p></td>
      <td align="left" 	>      	
        	<s:select name="taxYear" id="taxYear" list="#{'2008':'2008', '2009':'2009'}" theme="simple" />*        
      </td>
    </tr>

    <tr>
      <td align="left" width="203"><p> Age at December 31st <span id="ageYear"></span></p></td>
      <td align="left" colspan="1">
        	<s:textfield name="age" id="age" theme="simple" cssClass="text" value="30" /> *
        	<div id="errorage" class="warningmessage" style="display:none">
        		Please enter your Age to proceed.
        	</div>
      </td>
    </tr>
        
    <tr>
    	<td colspan="2" class="basicboldtext">
    		<br/>
    		The total pension contribution you can make for year <span id="totalYear"></span>&nbsp;is &euro;<span id="totalTax2"></span>
    		<br/>
    	</td>
    </tr>

Appreciate any help on this!

Onchange

 Similar Tutorials View Content
I have a onChange value Code:
   
var people = [
        ["Timothy Conner", "1999-Present", "Age: 12", "Male", ""],
        ["Andrew Conner", "1992-Present", "Age: 19", "Male", ""]
    ];

var how = "Brothers";

function find()
{
   if(document.getElementById("name").value == people [0] [0])
   {
      document.getElementById("desc").value = people [0] [1] + "   " + people [0] [2] + "   " +  people [0] [3];
   }
   if(document.getElementById("name").value == people [1] [0])
   {
     document.getElementById("desc").value = people [1] [1] + "   " + people [1] [2] + "   " +  people [1] [3];
   }
    document.getElementById("relateb").value = document.getElementById("name").value;
}

Code:
Name: <input type="text" id="name" value="" onChange="find()"/>

So for it to proses a name you must click out of a box is ther a way to make it instead of when you click out of it, it would immidiatly change?

Onchange

 Similar Tutorials View Content
Code:
<input type = "text" style ='display:none;' onchange="display_data_from_server(this.value)"/>

Value inside that input is cahanged from js.

Is there any reason that onchange would not happen ?
i mean, it does not.

Onchange Js Not Working In Ff Only

 Similar Tutorials View Content
I have an onchange event JS working fine in IE, but not in FF. It's intended to reset an input field to zero when an adjacent drop-down menu value is changed. I've spent a half-hour looking for answers, and nothing has worked. Decided to post here in the hope there is a quick solution I've overlooked. TIA.

Code:
function resetInput()
  {
  y = document.getElementById("baseInput");
  y.setAttribute("value","0");
  }

And the HTML...

Code:
<select id="baseMethod" onchange="resetInput()">
      <option value="baseGrowth"   selected="selected">Annual Growth Rate (%)</option>
      <option value="baseTarget">Target Year Projection</option>
      </select>

      <input type="text" name="baseInput" id="baseInput" value="0" size="14" maxlength="14" /><br />


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 Validate

 Similar Tutorials View Content
I am trying to create an onChange action that will validate that confirmation checkbox has been checked, and if not, popup an alert message and put the focus on the checkbox input and change the class of the container DIV to "highlight".

Here is the form, with the 'onchange' trigger:

Code:
<form id="checkout" name="my_form" method="post" action="!---SCRIPT_NAME---" onsubmit="return validForm(this);">	
<div id="verification" class="aligncenter required">
  <input type="checkbox" id="verified" name="verified" value="" /> <label for="verified">YES</label>, the items and quantities shown above are correct.</div>
<div class="required"><label for="name">Name:</label><input id="name" name="contactname" type="text" class="L" onchange="" /></div>
<div class="required"><label for="company">Company Name:</label><input id="company" name="company" type="text" class="L" /></div>
<div class="buttonRow"><input type="submit" name="VERIFY" class="btn red" value="Continue" /></div>
</form>

And here is my javascript code:

Code:
function verifyOrder() {
  if (document.my_form.verified.checked != "true") {
    alert("Please verify the contents of your order");
    document.my_form.verified.focus();
    getElementById('document.my_form.verification').className='highlight'
    return false;
  }
}

But this is not working and generates errors in firebug.

What am I doing wrong? Thanks!!

Onchange With Submit

 Similar Tutorials View Content
hi

i have a form where i need to join fields from the form prior to submission to flow into a pdf form.


here is the function
PHP Code:
<SCRIPT language='javascript' type='text/javascript'>
function joinna(form, elemName, ttl) {


form.bname.value = form.b_fname.value + ' ' + form.b_lname.value;

}
</script> 


here is what the form input looks like
PHP Code:
<input class="left" onBlur="mark(this,'#ffffff','#000000')" name="b_fname" size="20" maxlength="40" onFocus="nextfield ='cb_fname'; mark(this,'#FFFF99','#0000FF')" value="<?php echo $row['b_fname'];?>" onChange="joinna(this.form,'b_fname','p1f6');">
</span>
<input class="left" onBlur="mark(this,'#ffffff','#000000')" name="b_lname" size="20" maxlength="40" onFocus="nextfield ='cb_fname'; mark(this,'#FFFF99','#0000FF')" value="<?php echo $row['b_lname'];?>" onChange="joinna(this.form,'b_lname','p1f6');">
</span>

and here is the calc field

PHP Code:
<input type="hidden" NAME="bname" value="" Size="7" onBlur="mark(this,'#ffffff','#000000')" onFocus="blur();document.smartform.bname.focus()" onChange="this.form.b_fname.value + this.form.b_lname.value; joinna(this.form,'field');" > 


this works fine IF i manually insert something new into the b_fname field. but lets say a user pulls the for to edit, and then makes no changes, "bname" will remain blank.

what i want to do is call the function and/or force an 'onchange' or do whatever so bname is not left blank in the event the user submits w/o making any changes to the form

tia

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 Fix The Onchange Function?

 Similar Tutorials View Content
How can i change this code to do not duplicate the boxes when one option is selected in the same box as before?

http://www.plpgolfandturf.com.au/rr/rrboxes_test.php

Code:
<script type="text/javascript">
	function SetHTML2(type) {
		
   	  //document.getElementById("1").style.display = "none"
   	  //document.getElementById("2").style.display = "none"
   	  //document.getElementById("3").style.display = "none"
   	  //document.getElementById("4").style.display = "none"

    	  //document.getElementById("1.1").style.display = "none"
    	  //document.getElementById("1.2").style.display = "none"
    	  //document.getElementById("1.3").style.display = "none"
    	  //document.getElementById("1.4").style.display = "none"

    	  document.getElementById("2.1").style.display = "none"
    	  document.getElementById("2.2").style.display = "none"
    	  document.getElementById("2.3").style.display = "none"
    	  document.getElementById("2.4").style.display = "none"

    	  document.getElementById("3.1").style.display = "none"
    	  document.getElementById("3.2").style.display = "none"
    	  document.getElementById("3.3").style.display = "none"
    	  document.getElementById("3.4").style.display = "none"

    	  document.getElementById("4.1").style.display = "none"
    	  document.getElementById("4.2").style.display = "none"
    	  document.getElementById("4.3").style.display = "none"
    	  document.getElementById("4.4").style.display = "none"

    	  document.getElementById("1.1.1").style.display = "none"
    	  document.getElementById("1.1.2").style.display = "none"
    	  document.getElementById("1.1.3").style.display = "none"
    	  document.getElementById("1.1.4").style.display = "none"
    	  document.getElementById("1.2.1").style.display = "none"
    	  document.getElementById("1.2.2").style.display = "none"
    	  document.getElementById("1.2.3").style.display = "none"
    	  document.getElementById("1.2.4").style.display = "none"
    	  document.getElementById("1.3.1").style.display = "none"
    	  document.getElementById("1.3.2").style.display = "none"
    	  document.getElementById("1.3.3").style.display = "none"
    	  document.getElementById("1.3.4").style.display = "none"
    	  document.getElementById("1.4.1").style.display = "none"
    	  document.getElementById("1.4.2").style.display = "none"
    	  document.getElementById("1.4.3").style.display = "none"
    	  document.getElementById("1.4.4").style.display = "none"
		  
	  document.getElementById(type).style.display = ""
	}
</script>

<!--Display box -->
<font face="Verdana, Geneva, sans-serif" size="4" color="#FF0000"><br />
Search Parts</font><br />
<br /> 
    <select onchange="SetHTML2(this.value)">
	<option selected="selected">Choose your option</option>
	<option value="1">Beck</option>
	<option value="2">BobCat</option>
	<option value="3">Briggs</option>
    <option value="4">Yazoo</option>
</select>

<span id="1" style="display:none" ><br /><select onchange="SetHTML2(this.value)">
									<option selected="selected">Choose your option</option>
									<option value="1.1">Beck 1</option>
									<option value="1.2">Beck 2</option>
									<option value="1.3">Beck 3</option>
									<option value="1.4">Beck 4</option>
                                    </select></span> 
                                    
 <span id="2" style="display:none"><br /><select onchange="SetHTML2(this.value)">
									<option selected="selected">Choose your option</option>
									<option value="2.1">BobCat 1</option>
									<option value="2.2">BobCat 2</option>
									<option value="2.3">BobCat 3</option>
									<option value="2.4">BobCat 4</option>
                                    </select></span> 
 
  <span id="3" style="display:none"><br /><select onchange="SetHTML2(this.value)">
									<option selected="selected">Choose your option</option>
									<option value="3.1">Briggs 1</option>
									<option value="3.2">Briggs 2</option>
									<option value="3.3">Briggs 3</option>
									<option value="3.4">Briggs 4</option>
                                    </select></span> 
 
  <span id="4" style="display:none"><br /><select onchange="SetHTML2(this.value)">
									<option selected="selected">Choose your option</option>
									<option value="4.1">Yazoo 1</option>
									<option value="4.2">Yazoo 2</option>
									<option value="4.3">Yazoo 3</option>
									<option value="4.4">Yazoo 4</option>
                                    </select></span> 

   
  <span id="1.1" style="display:none"><br /><select onchange="SetHTML2(this.value)">
									<option selected="selected">Choose your option</option>
									<option value="1.1.1">Beck 1.1</option>
									<option value="1.1.2">Beck 1.2</option>
									<option value="1.1.3">Beck 1.3</option>
									<option value="1.1.4">Beck 1.4</option>
                                    </select></span> 
  <span id="1.2" style="display:none"><br /><select onchange="SetHTML2(this.value)">
									<option selected="selected">Choose your option</option>
									<option value="1.2.1">Beck 2.1</option>
									<option value="1.2.2">Beck 2.2</option>
									<option value="1.2.3">Beck 2.3</option>
									<option value="1.2.4">Beck 2.4</option>
                                    </select></span> 
  <span id="1.3" style="display:none"><br /><select onchange="SetHTML2(this.value)">
									<option selected="selected">Choose your option</option>
									<option value="1.3.1">Beck 3.1</option>
									<option value="1.3.2">Beck 3.2</option>
									<option value="1.3.3">Beck 3.3</option>
									<option value="1.3.4">Beck 3.4</option>
                                    </select></span> 
  <span id="1.4" style="display:none"><br /><select onchange="SetHTML2(this.value)">
									<option selected="selected">Choose your option</option>
									<option value="1.4.1">Beck 4.1</option>
									<option value="1.4.2">Beck 4.2</option>
									<option value="1.4.3">Beck 4.3</option>
									<option value="1.4.4">Beck 4.4</option>
                                    </select></span> 
  
  <span id="2.1" style="display:none"> text </span>
  <span id="2.2" style="display:none"> text </span>
  <span id="2.3" style="display:none"> text </span>
  <span id="2.4" style="display:none"> text </span>
  
  <span id="3.1" style="display:none"> text </span>
  <span id="3.2" style="display:none"> text </span>
  <span id="3.3" style="display:none"> text </span>
  <span id="3.4" style="display:none"> text </span>

  <span id="4.1" style="display:none"> text </span>
  <span id="4.2" style="display:none"> text </span>
  <span id="4.3" style="display:none"> text </span>
  <span id="4.4" style="display:none"> text </span>
  
  <span id="1.1.1" style="display:none"> text </span>
  <span id="1.1.2" style="display:none"> text </span>
  <span id="1.1.3" style="display:none"> text </span>
  <span id="1.1.4" style="display:none"> text </span>
  <span id="1.2.1" style="display:none"> text </span>
  <span id="1.2.2" style="display:none"> text </span>
  <span id="1.2.3" style="display:none"> text </span>
  <span id="1.2.4" style="display:none"> text </span>
  <span id="1.3.1" style="display:none"> text </span>
  <span id="1.3.2" style="display:none"> text </span>
  <span id="1.3.3" style="display:none"> text </span>
  <span id="1.3.4" style="display:none"> text </span>
  <span id="1.4.1" style="display:none"> text </span>
  <span id="1.4.2" style="display:none"> text </span>
  <span id="1.4.3" style="display:none"> text </span>
  <span id="1.4.4" style="display:none"> text </span>
  
<br />
<br /><a href="http://www.plpgolfandturf.com.au/rr/rrboxes_test.php"><img src="http://www.plpgolfandturf.com.au/rr/bt2.png" border="0" /></a>


Onchange Problem

 Similar Tutorials View Content
I'm trying to figure out how to call multiple functions within the same onchange attribute, associated in the same select object. I have a drop-down menu in which I can select MN, WI, and Other. I've worked it now so that when I select MN, a new drop-down menu appears in which I can select one of MN's Counties. I want to be able to do the same with WI and Other, but my code is only calling MN. Here it is:

Code:
<html>
<head>
<script="text/javascript">
function showMN(select)
{
	select.form.MN.value=""; // reset the text box value
	document.getElementById("MNBox").style.display =
		select.value == "MN" ? "inline" : "none";
}

function showWI(select)
{
	select.form.WI.value=""; // reset the text box value
	document.getElementById("WIBox").style.display =
		select.value == "WI" ? "inline" : "none";
}

function showOther(select)
{
    select.form.otherState.value = ""; // reset the text box value
    document.getElementById("otherBox").style.display =
        select.value == "Other" ? "inline" : "none";

</script>
</head>
<body>

<select name="state" onchange="showMN(this);showWI(this);showOther(this)">
    		<option value="" selected="selected">Choose...</option>
    		<option value="MN">MN</option>
    		<option value="WI">WI</option>
   			<option value="Other">Other</option>
			</select><font color="red">*</font>

<span id="MNBox" style="display:none"> 
County: <select name="MN">
	<option value="" selected="selected">Choose...</option>
	<option value="List of MN Counties">List of MN Counties</option>								</select><font color="red">*</font>

<span id="WIBox" style="display:none"> 
County: <select name="WI">
	<option value="" selected="selected">Choose...</option>
	<option value="List of WI Counties">List of WI Counties</option>
</select><font color="red">*</font>
			
<span id="otherBox" style="display:none"> 
<input type="text" name="otherState" placeholder="Enter state here"/><font color="red">*</font> <input type="text" name="otherCounty" placeholder="Enter County here"</span>

</body>
</html>

Am I even close?

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.

Javascript Onchange

 Similar Tutorials View Content
Hi everyone. i hope you could help me for my problem. I want to place a value in the option when i change the contenent.

ie when i select North America
It shoulde be <option value='1'>Canada</option><option value='2'>United States</option> and so on and so fort...

Please help.


Code:
<script type="text/javascript">
 //<![CDATA[ 
 // array of possible countries in the same order as they appear in the country selection list 
 var countryLists = new Array(4) 
 ccountryLists["empty"] = ["Select a Country"]; 
 countryLists["North America"] = ["Canada", "United States", "Mexico"]; 
 countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"]; 
 countryLists["Asia"] = ["Russia", "China", "Japan"]; 
 countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"]; 
 /* CountryChange() is called from the onchange event of a select element. 
 * param selectObj - the select object which fired the on change event. 
 */ 
 function countryChange(selectObj) { 
 // get the index of the selected option 
 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 
 // use the selected option value to retrieve the list of items from the countryLists array 
 cList = countryLists[which]; 
 // get the country select element via its known id 
 var cSelect = document.getElementById("country"); 
 // remove the current options from the country select 
 var len=cSelect.options.length; 
 while (cSelect.options.length > 0) { 
 cSelect.remove(0); 
 } 
 var newOption; 
 // create new options 
 for (var i=0; i<cList.length; i++) { 
 newOption = document.createElement("option"); 
 newOption.value = cList[i];  // assumes option string and value are the same 
 newOption.text=cList[i]; 
 // add the new option 
 try { 
 cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
 } 
 catch (e) { 
 cSelect.appendChild(newOption); 
 } 
 } 
 } 
//]]>
</script>

Code:
<noscript>This page requires JavaScript be available and enabled to function properly</noscript>
  <h1>Dynamic Select Statements</h1>
  <label for="continent">Select Continent</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">Select a Continent</option>
    <option value="1">North America</option>
    <option value="2">South America</option>
    <option value="3">Asia</option>
    <option value="4">Europe</option>
  </select>
  <br/>
  <label for="country">Select a country</label>
  <select id="country">
    <option value="0">Select a country</option>
  </select>


Simple Onchange Help.

 Similar Tutorials View Content
Hello all, I have a translation script that I want to modify to use select boxes instead of divs, but I have a little problem with what I have.

Bascially, the user selects an option and it changes the text in between the ' ' (VALUE) to whatever the value of the option is:

Code:
<select onchange="updateLangTo('VALUE')">
<option value="en">English</option>
<option value="ar">Arabic</option>
</select>

So how would JavaScript be able to accomplish this?
Privacy