|
JavaScript - Error Using Onchange In Select Tag On Js And Php
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'); } ?> Similar TutorialsAll, 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. 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>
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 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> </p>
<p> </p>
<p> </p>
<p> </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> </p>
</form>
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. 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! 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>
i keep getting the following error: - there is no attribute "onChange" Code: <select name="type" id="type" onChange="gettype('type');">
<option selected="selected">--Car type--</option>
<option value="1">Bmw</option>
<option value="2">Merc Blinds</option>
<option value="3">Ford</option>
<option value="4">Saab</option>
</select>
Hello all! I am hoping for some coding help as I have been trying to figure out my problem for a couple of days without resolve. I am new to Javascript so this is just test code that eventually will go into a larger project. Here goes: I have a form that initially creates two select boxes. The 2nd select box option values are determined onchange of the first boxes value using mysql to pull the data from a database. That all works fine. I also have an add button that adds a second set of select boxes dynamically and assigns names and values, etc. This also works fine. My goal is to have the 2nd set of select boxes act the same as the first so that when an option is chosen in the first box the 2nd dynamically populates. This does not work. The first box is created fine but when it tries to create the values in the 2nd from an onchange event I have a problem. This is the code that returns a valid object with the first set of select boxes but is null with the 2nd set. Code: var selbox = document.getElementById(exep); The entire piece of spaghetti code is below. Any help is appreciated. Please be nice as I am still trying to figure out this Javascript stuff. Thanks for any help... Code: <html>
<head>
<title>Workout testing</title>
<SCRIPT language="javascript">
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
<script language="javascript">
function setOptions(chosen, form_num) {
var musc = "musc_"+form_num;
var exep = "exep_"+form_num;
//var str = '';
// var elem = document.getElementById('form1').elements;
// for(var i = 0; i < elem.length; i++)
// {
// str += "<b>Type:</b>" + elem[i].type + "  ";
// str += "<b>Name:</b>" + elem[i].name + " ";
// str += "<b>Value:</b><i>" + elem[i].value + "</i> ";
// str += "<BR>";
// }
// document.getElementById('lblValues').innerHTML = str;
var selbox = document.getElementById(exep);
selbox.options.length = 0;
if (chosen == "0") {
selbox.options[selbox.options.length] = new Option('First select a muscle group','0');
}
<?
$car_result = mysql_query("SELECT muscle FROM work_muscle") or die('Something is wrong: ' . mysql_error());
while(@($c=mysql_fetch_array($car_result)))
{
?>
if (chosen == "<?=$c['muscle'];?>") {
<?
$c_id = $c['muscle']; ;
$mod_result = mysql_query("SELECT exercise FROM work_exercise WHERE muscle='$c_id'") or die('Something is wrong: ' . mysql_error());
while(@($m=mysql_fetch_array($mod_result)))
{
?>
selbox.options[selbox.options.length] = new
Option('<?=$m['exercise'];?>','<?=$m['exercise'];?>');
<?
}
?>
}
<?
}
?>
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>create DOM table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function makeTable() {
//give the new table unique name
var form_num = document.getElementsByTagName("table").length;
row=new Array();
cell=new Array();
row_num=1; //edit this value to suit
cell_num=6; //edit this value to suit
tab=document.createElement('table');
var table_id = 'newtable_'+form_num;
tab.setAttribute('id',table_id);
tbo=document.createElement('tbody');
for(c=0;c<row_num;c++){
row[c]=document.createElement('tr');
for(k=0;k<cell_num;k++) {
cell[k]=document.createElement('td');
//cont=document.createTextNode((c+1)*(k+1))
//cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
changeBorder(table_id, form_num);
}
function changeBorder(table_id, form_num){
document.getElementById(table_id).border="1";
pop_cells(table_id, form_num);
}
function pop_cells(table_id, form_num) {
var table = document.getElementById(table_id);
var colCount = table.rows[0].cells.length;
//create the first checkbox
var selcheck = document.createElement("input");
selcheck.type = "checkbox";
selcheck.name = "chk[]";
//create the first select box
var selbox = document.createElement("select");
var musc_opt = "musc_"+form_num;
selbox.name = "musc_"+form_num;
selbox.id = "id_"+form_num;
//var test_ops = javascript:setOptions(document.form1.'+musc_opt+'.options [document.form1.'+musc_opt+'.selectedIndex].value,'+selbox.name+');
//selbox.setAttribute("onchange", function(){setOptions(test_ops);});
selbox.onchange = function(){setOptions(this.value,form_num);};
selbox.options[selbox.options.length] = new Option('Select a muscle group','0');
<?
$car_result = mysql_query("SELECT muscle FROM work_muscle") or die('Something is wrong: ' . mysql_error());
while(@($c=mysql_fetch_array($car_result))) {
?>
selbox.options[selbox.options.length] = new Option('<?=$c['muscle'];?>','<?=$c['muscle'];?>');
<?
}
?>
//create the 2nd select box
var selbox2 = document.createElement("select");
selbox2.name = "exep_"+form_num;
selbox2.id = "id_"+form_num;
selbox2.size = "1";
selbox2.options[selbox2.options.length] = new Option('First select a muscle group','0');
//<?
//$car_result = mysql_query("SELECT exercise FROM work_exercise") or die('Something is wrong: ' . mysql_error());
//while(@($c=mysql_fetch_array($car_result))) {
//?>
// selbox2.options[selbox2.options.length] = new Option('<?=$c['exercise'];?>','<?=$c['exercise'];?>');
//<?
//}
//?>
var target0 = table.rows[0].cells[0];
var target1 = table.rows[0].cells[1];
var target2 = table.rows[0].cells[2];
// fire
target1.appendChild(selcheck);
target1.appendChild(selbox);
target1.appendChild(selbox2);
}
</script>
</head>
<body>
<form name="form1"><div align="center">
<INPUT type="button" value="Add Row" onclick="makeTable()" />
<INPUT type="button" value="Delete Row" onclick="javascript:deleteRow(this)" />
<TABLE id="newtable" width="350px" border="1">
<TR><TD><INPUT type="checkbox" name="chk[]"/></TD>
<td><select name="musc_0" size="1"
onchange="javascript:setOptions(document.form1.musc_0.options
[document.form1.musc_0.selectedIndex].value, 0);">
<option value="0" selected>Select a muscle group</option>
<?
$result = mysql_query("SELECT * FROM work_muscle") or die(mysql_error());
while(@($r=mysql_fetch_array($result)))
{
?>
<option value="<?=$r['muscle'];?>"><?=$r['muscle'];?></option>
<?
}
?>
</select></td>
<td>
<select name="exep_0" size="1">
<option value=" " selected>First select a muscle group</option>
</select></td></tr>
</div></table><div id="mytable"></div><div id="lblValues"></div>
</form>
</body>
</html>
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? 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. 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> is €<span id="totalTax2"></span>
<br/>
</td>
</tr>
Appreciate any help on this! 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!! 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>
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;
?>
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 />
I need the code to run a few functions on change, the box is a "date picker" and I unsure how to add my onchange function without breaking the date picker, can anyone help ? Code: p>end date:</p>
<input id='secondDate' type="text" size="25"><a href="javascript:NewCal('secondDate','ddmmyyyy')"><img src="images/cal.gif" width="16" height="16" border="0" alt="Pick a date" onchange="dateDiff() ;calculate() ;deposit() ;milecharge() ;agecheck()"></a>
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 Evening all. I have a little bit of code, thus: Code: var data = document.createElement("td");
box = document.createElement("input");
box.id = headercategories[i];
box.type = text;
box.value = "Ten";
box.onChange = alter("11");
data.appendChild(box);
in which I insert a text input box into a table data element. When the value of the input is changed, I would like to call the function alter(). However, what's happening in practice is that the function alter is getting called straight away, without waiting for any changes. Is there any way I can stop this? It doesn't seem to happen if you actually write the onchange bit into the HTML by hand rather than doing it dynamically. Thanks, Chris 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? |
|||||||