[SOLVED] Help with onchange events

Darkmatter5 · December 9, 2008

Here's my javascript

<script type="text/javascript">
/*window.onload=runfirst() {
    var cab=form.cabinet_lst.options[form.cabinet_lst.options.selectedIndex].value;
    var fol=form.folder_lst.options[form.folder_lst.options.selectedIndex].value;
    var item=form.item_lst.options[form.item_lst.options.selectedIndex].value;
    if (cab!="Show all") { form.edit_cab.disabled=false; }
    if (fol!="Show all") { form.edit_fol.disabled=false; }
}*/
function reloadCAB(form) {
    var cab=form.cabinet_lst.options[form.cabinet_lst.options.selectedIndex].value;
    self.location='res_filing.php?cab=' + cab ;
}
function reloadFOL(form) {
    var cab=form.cabinet_lst.options[form.cabinet_lst.options.selectedIndex].value;
    var fol=form.folder_lst.options[form.folder_lst.options.selectedIndex].value;
    self.location='res_filing.php?cab=' + cab +'&fol=' + fol ;
}
function reloadITEM(form) {
    var cab=form.cabinet_lst.options[form.cabinet_lst.options.selectedIndex].value;
    var fol=form.folder_lst.options[form.folder_lst.options.selectedIndex].value;
    var item=form.item_lst.options[form.item_lst.options.selectedIndex].value;
    self.location='res_filing.php?cab=' + cab +'&fol=' + fol +'&item=' + item ;
}
function enableCAB(form) {
    var cab=form.cabinet_lst.options[form.cabinet_lst.options.selectedIndex].value;
    if (cab!="Show all") { form.edit_cab.disabled=false; }
}
function enableFOL(form) {
    var fol=form.folder_lst.options[form.folder_lst.options.selectedIndex].value;
    if (fol!="Show all") { form.edit_fol.disabled=false; }
}
</script>

On the page I have this code

[code]
<?php
  $conn=mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql');
  mysql_select_db($dbnamemain);
        
  $cabid=$HTTP_GET_VARS['cab'];
  $folid=$HTTP_GET_VARS['fol'];
  $itemid=$HTTP_GET_VARS['item'];
  // query for cabinets dropdown list
  $quer_cab=mysql_query("SELECT cabinet_id, cab_name FROM cabinets ORDER BY cab_name");
  // query for folders dropdown list
  if(isset($cabid) && strlen($cabid)>0 && $cabid!="showall") { $quer_fol=mysql_query("SELECT folder_id, fol_name FROM folders WHERE cabinet_id=$cabid ORDER BY fol_name"); }
  else { $quer_fol=mysql_query("SELECT folder_id, fol_name, cab_name FROM folders, cabinets WHERE folders.cabinet_id=cabinets.cabinet_id ORDER BY cab_name ASC, fol_name ASC"); }
  // query for items dropdown list
  if(isset($folid) && strlen($folid)>0) { $quer_item=mysql_query("SELECT item_id, item_name FROM items WHERE folder_id=$folid ORDER BY item_name"); }
  elseif(isset($cabid) && strlen($cabid)>0 && $cabid!="showall") {
  $cabname=mysql_fetch_array(mysql_query("SELECT cab_name FROM cabinets WHERE cabinet_id=$cabid"));
  $quer_item=mysql_query("SELECT item_id, item_name, cab_name, fol_name FROM items, folders, cabinets WHERE items.folder_id=folders.folder_id AND folders.cabinet_id=cabinets.cabinet_id AND cabinets.cab_name='" .$cabname['cab_name']. "' ORDER BY item_name");
        }
  else { $quer_item=mysql_query("SELECT item_id, item_name, cab_name, fol_name FROM items, cabinets, folders WHERE items.folder_id=folders.folder_id AND folders.cabinet_id=cabinets.cabinet_id ORDER BY cab_name ASC, fol_name ASC, item_name ASC"); }
        
  echo "<form method='post'>
    <table width='100%'>
    <tr><td colspan='3'>
    <b>ORGANIZATION EXPLAINATION<br>
    <a href='help.php#1.a'>Cabinets</a> are broken down<br>
    into folders and <a href='help.php#1.b'>folders</a> into <a href='help.php#1.c'>items</a>.</b>
    </td></tr>
    <tr><td width='30'>Cabinets</td>
    <td width='250'>
    <select name='cabinet_lst' onchange=\"reloadCAB(this.form);enableCAB(this.form)\">
    <option value='showall'>Show all</option>";
  while($cab=mysql_fetch_array($quer_cab)) {
    if($cab['cabinet_id']==$cabid) { echo "<option selected='selected' value='$cab[cabinet_id]'>$cab[cab_name]</option>"; }
    else { echo  "<option value='$cab[cabinet_id]'>$cab[cab_name]</option>"; }
  }
  echo "</select></td>
    <td><input type='submit' name='cabinet' class='button' value='LOAD'> <input type='submit' name='edit_cab' class='button' value='EDIT' disabled='true'></td></tr>
    <tr><td>Folders</td>
    <td>
    <select name='folder_lst' onchange=\"reloadFOL(this.form);enableFOL(this.form)\">
    <option value='showall'>Show all</option>";
  while($fol=mysql_fetch_array($quer_fol)) {
    if($fol['folder_id']==$folid) { echo  "<option selected='selected' value='$fol[folder_id]'>$fol[fol_name]</option>"; }
    else { echo "<option value='$fol[folder_id]'>$fol[fol_name]</option>"; }
  }
  echo "</select></td>
    <td><input type='submit' name='folder' class='button' value='LOAD'> <input type='submit' name='edit_fol' class='button' value='EDIT' disabled='true'></td></tr>
    <tr><td>Items</td>
    <td>
    <select name='item_lst' onchange=\"reloadITEM(this.form)\">
    <option value='showall'>Show all</option>";
  while($item=mysql_fetch_array($quer_item)) {
    if($item['item_id']==$itemid) { echo "<option selected='selected' value='$item[item_id]'>$item[item_name]</option>"; }
    else { echo "<option value='$item[item_id]'>$item[item_name]</option>"; }
  }
  echo "</td>
    <td><input type='submit' name='item' class='button' value='LOAD'> <input type='submit' name='edit_item' class='button' value='EDIT' disabled='true'></td></tr>
    <tr><td colspan='3'><hr></td></tr>
    <tr><td colspan='3'>";
  if(isset($_POST['cabinet'])) { $ec->show_filing(cabinets,$_POST['cabinet_lst']); }
  if(isset($_POST['folder'])) { $ec->show_filing(folders,$_POST['folder_lst']); }
  if(isset($_POST['item'])) { $ec->show_filing(items,$_POST['item_lst']); }
  echo "</td></tr>
    </table></form>";
        
  mysql_close($conn);
?>

What I'm wanting the edit buttons to activate only if the selected item in the respective dropdown list is NOT "Show all". And I'm needing these buttons to stay enabled or disabled when the page is reloaded.

Psycho · December 9, 2008

This is the Javascript forum, not the PHP forum. You should just provide just the post-processed code (i.e. not the PHP; run the page in your browser then capture the code and post). It is much easier to work with javascript from a working page. We don't have your database to test against.

I'm having a problem following your code. Each of the onchange triggers first runs the related 'reload' script and then the related 'enable' script. But, the 'reload' scripts will all reload the page, so the other script will never run. Not sure what you are trying to accomplish with the reload scripts. Also, having multiple functions that do the same things is inefficient and error prone. Create single functions and pass the appropriate variables.

So, I have no idea what you are trying to accomplish with the "reload" functions (should they be associated withthe LOAD buttons?), but this will work for enabling/disabling the EDIT buttons onchange and onload

<html>
<head>
<script type="text/javascript">
window.onload=function()
{
    enableEdit(document.getElementById('cabinet_lst'), 'edit_cab');
    enableEdit(document.getElementById('folder_lst'), 'edit_fol');
    enableEdit(document.getElementById('item_lst'), 'edit_item');
}

function enableEdit(selObj, editID)
{
    var editObj = document.getElementById(editID);
    var selVal = selObj[selObj.selectedIndex].value;
    editObj.disabled = (selVal=='showall') ? true : false ;
}

</script>
</head>

<body>

<form method='post'>
<table width='100%'>
  <tr>
    <td colspan='3'>
    <b>ORGANIZATION EXPLAINATION<br>
    <a href='help.php#1.a'>Cabinets</a> are broken down<br>
    into folders and <a href='help.php#1.b'>folders</a> into <a href='help.php#1.c'>items</a>.</b>
    </td>
  </tr>
  <tr>
    <td width='30'>Cabinets</td>
    <td width='250'>
    <select name='cabinet_lst' id="cabinet_lst" onchange="enableEdit(this, 'edit_cab');">
    <option value='showall'>Show all</option>
    <option value='test'>test</option>
    </select>
    </td>
    <td>
      <input type='submit' name='cabinet' class='button' value='LOAD'>
      <input type='submit' name='edit_cab' id='edit_cab' class='button' value='EDIT'></td>
  </tr>
  <tr>
    <td>Folders</td>
    <td>
    <select name='folder_lst' id="folder_lst" onchange="enableEdit(this, 'edit_fol');">
    <option value='showall'>Show all</option>
    <option value='test'>test</option>
    </select></td>
    <td>
      <input type='submit' name='folder' class='button' value='LOAD'>
      <input type='submit' name='edit_fol' id='edit_fol' class='button' value='EDIT'>
    </td>
  </tr>
  <tr>
    <td>Items</td>
    <td>
      <select name='item_lst' id='item_lst' onchange="enableEdit(this, 'edit_item');">
      <option value='showall'>Show all</option>
      <option value='test'>test</option>
    </td>
    <td>
      <input type='submit' name='item' class='button' value='LOAD'>
      <input type='submit' name='edit_item' id='edit_item' class='button' value='EDIT'>
    </td>
  </tr>
  <tr>
    <td colspan='3'><hr></td>
  </tr>
</table>
</form>

</body>
</html>

Darkmatter5 · December 10, 2008

The reloading is for recreating the list on options in the dropdown lists depending on what's selected in the other dropdown lists. That code is all working, but I still can't get this dang disable code working. I've changed things up a little, here's what I have.

<script type="text/javascript">
window.onload=function() {
    enableEdit(document.getElementbyId('cabinet_lst'), 'edit_cab');
    enableEdit(document.getElementbyId('folder_lst'), 'edit_fol');
    enableEdit(document.getElementbyId('item_lst'), 'edit_item');
}
function enableEdit(selObj, editID) {
    var editObj=document.getElementById(editID);
    var selVal=selObj[selObj.selectedIndex].value;
    if (selVal!='Show all') { editObj.disabled=false; }
    else { editObj.disabled=true; }
    //editObj.disabled=(selVal=='Show all') ? true : false;
}
function reload(form, type) {
    var cab=form.cabinet_lst.options[form.cabinet_lst.options.selectedIndex].value;
    var fol=form.folder_lst.options[form.folder_lst.options.selectedIndex].value;
    var item=form.item_lst.options[form.item_lst.options.selectedIndex].value;
    if (type=="cab") { self.location='test.php?cab=' + cab ; }
    if (type="fol") { self.location='test.php?cab=' + cab +'&fol=' + fol ; }
    if (type="item") { self.location='test.php?cab=' + cab +'&fol=' + fol +'&item=' + item ; }
}
</script>

Here's the buttons code.

<form method='post'>
<input type='submit' name='edit_cab' class='button' value='EDIT' disabled='true'>
<input type='submit' name='edit_fol' class='button' value='EDIT' disabled='true'>
</form>

When I change the selection in a dropdown list nothing happens with the edit buttons. Why not? What am I doing wrong?

Also in your code it used the line "editObj.disabled=(selVal=='Show all') ? true : false;" Can you explain it for me?

Psycho · December 10, 2008

If the current code is still running the 'reload' AND the 'enable' functions then it will not work. Once you initiate a page reload and other function calls will be dropped. However, if you have an appropriate onload function it should handle it appropriately. How complex are the lists that need to be populated into the select lists? You could include all the data for those lists in the javascript and repopulate them dynamically.

But, looking at the code you just posted, the line you commented out is the one that is required for disabling/enabling the edit button. Don't know why you commented it out. But, it is also the line you had a question about.

editObj.disabled=(selVal=='Show all') ? true : false;

This is what is called a Ternarry (sp?) Operator. It is basically a shorthand if/else statement. In this particular line it is setting the editObj.disabled value to true or false depending upon the condition (selVal=='Show all').

This could be rewritten as this:

if (selVal=='Show all') {
    editObj.disabled = true;
} else {
    editObj.disabled = false;
}

However, after reviewing my own code I see I could have simply used this:

editObj.disabled=(selVal=='Show all')

Snce the condition will result in true/false.

Darkmatter5 · December 10, 2008

Onchange only runs reload now. But enableEdit is now run onload. So after reload is executed and the page is reloaded enableEdit is run, which should set the edit buttons to their respective state, depending on the value of the dropdown lists. It's still not doing it.

The dropdown lists are generated by what is in 3 different database tables, so they aren't static options.

I'm posting the post loaded source of the page to see if it helps you guys in helping me figure this out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>E-Cabinet Filing Page</title>
<link href="library/config.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.onload=function() {
    enableEdit(document.getElementbyId('cabinet_lst'), 'edit_cab');
    enableEdit(document.getElementbyId('folder_lst'), 'edit_fol');
    enableEdit(document.getElementbyId('item_lst'), 'edit_item');
}
function enableEdit(selObj, editID) {
    var editObj=document.getElementById(editID);
    var selVal=selObj[selObj.selectedIndex].value;
    if (selVal!='Show all') { editObj.disabled=false; }
    else { editObj.disabled=true; }
}
function reload(form, type) {
    var cab=form.cabinet_lst.options[form.cabinet_lst.options.selectedIndex].value;
    var fol=form.folder_lst.options[form.folder_lst.options.selectedIndex].value;
    var item=form.item_lst.options[form.item_lst.options.selectedIndex].value;
    if (type=="cab") { self.location='test.php?cab=' + cab ; }
    if (type="fol") { self.location='test.php?cab=' + cab +'&fol=' + fol ; }
    if (type="item") { self.location='test.php?cab=' + cab +'&fol=' + fol +'&item=' + item ; }
}
</script>
</head>

<body>
<div id="wrap">
  <div id="header">
    <table width="100%" height="100%" align="center">
      <tr>
        <td width="50%" valign="bottom"><a href='res_checklist.php'>CHECKLIST</a></td></td>
        <td align="right" valign="bottom"><span class="small_text">This site is best viewed at a screen resolution of atleast 1024 x 768</span><br>December 10, 2008, 12:18:45 PM</td>
      </tr>
    </table>
  </div>
  <div id="content">
    <div id="c_menu">
      <table width="100%">
        <td><a href='help.php' tabindex='7'>HELP</a> | <a href='index.php'>MAIN</a> | <a href='forums.php'>FORUMS</a> | <a href='res_admin.php'>SITE ADMIN</a></td>
        <td align="right">E-Cabinet version:  1.2</td>
      </table>
    </div>
    <div id="c_content">
      <form method='post'>
              <table width='100%'>
              <tr><td colspan='4'>
                <b>ORGANIZATION EXPLAINATION<br>
                <a href='help.php#1.a'>Cabinets</a> are broken down into<br>
                folders and <a href='help.php#1.b'>folders</a> into <a href='help.php#1.c'>items</a>.</b>
              </td></tr>
              <tr><td width='30'>Cabinets</td>
              <td width='250'>
                <select name='cabinet_lst' onchange="reload(this.form, 'cab')">
                <option value='showall'>Show all</option>
                <option value='2'>Bills</option>
                <option selected='selected' value='4'>Investments</option>
                <option value='3'>MilitaryDocuments</option>
                <option value='1'>unfiled</option>
                <option value='5'>Vehicle</option>
                </select></td>
              <td width='100' align='center'><input type='submit' name='cabinet' class='button' value='LOAD'> <input type='submit' name='edit_cab' class='button' value='EDIT' disabled='true'></td>
              <td> </td></tr>
              <tr><td>Folders</td>
              <td>
                <select name='folder_lst' onchange="reload(this.form, 'fol')">
                <option value='showall'>Show all</option>
                <option value='7'>John Hancock</option>
                <option value='1'>Primerica</option>
                <option value='4'>Stocks</option>
                </select></td>
              <td align='center'><input type='submit' name='folder' class='button' value='LOAD'> <input type='submit' name='edit_fol' class='button' value='EDIT' disabled='true'></td>
              <td> </td></tr>
              <tr><td>Items</td>
              <td>
                <select name='item_lst' onchange="reload(this.form, 'item')">
                <option value='showall'>Show all</option>
                <option value='8'>Primerica transaction - 093008</option>
                <option value='10'>Stock1</option>
                </select></td>
              <td align='center'><input type='submit' name='item' class='button' value='LOAD and/or EDIT'></td>
              <td> </td></tr>
              <tr><td colspan='4'><hr></td></tr>
              <tr><td colspan='4'></td></tr>
              </table></form>    </div>
  </div>
  <div id="tools">
    <div id="tools_login" align="center"><table width='100%' height='100%' valign='middle'>
                          <tr><td><b><span class='welcome_text'>Welcome <strong></b>mark.lalich</strong>!</span></td></tr>
                          <tr><td align='center'><span class='small_text'><a href='res_accmaint.php'>Edit your profile</a> | <a href='logout.php' tabindex='5'>Logout</a></span></td></tr>
                          </table></div>
    <div id="tools_account" align="center"><table width='100%' height='100%' valign='middle'>
                          <tr><td align='center'><span class='medium_text'>You have 2 message(s).</span></td></tr>
                          <tr><td align='center'><span class='small_text'><a href='res_maint.php' tabindex='7'>Maint</a> | <a href='help.php' tabindex='8'>Help</a> | <a href='res_mess.php'>My Messages</a></span></td></tr>
                          </table></div>
  </div>
  <div id="footer">
    <table width="100%" height="100%" border="0">
      <tr><td valign="bottom">Copyright &copy 2008 by Mark Lalich.  All rights reserved.</td></tr>
    </table>
  </div>
</div>
</body>

</html>

Psycho · December 10, 2008

OK, ther are a few problems. Do you know that you can have the JS errors displayed when they occur? You can set the browser to always display. But even if they don't you can double-click the error icon at the bottom of the browser to see the error. This will help you in finding and fixing the errors.

Anyway:

Problem 1

    enableEdit(document.getElementbyId('cabinet_lst'), 'edit_cab');
    enableEdit(document.getElementbyId('folder_lst'), 'edit_fol');
    enableEdit(document.getElementbyId('item_lst'), 'edit_item');

It should be getElementById() - with a capital B

Problem 2

    if (selVal!='Show all') { editObj.disabled=false; }
    else { editObj.disabled=true; }

The test value should be 'showall' NOT 'Show all'. Plus, you can replace all of those lines with just a single line:

    editObj.disabled = (selVal=='showall');

Problem 3

window.onload=function() {
    enableEdit(document.getElementById('cabinet_lst'), 'edit_cab');
    enableEdit(document.getElementById('folder_lst'), 'edit_fol');
    enableEdit(document.getElementById('item_lst'), 'edit_item');
}

The last function call is passing 'edit_item' as the button ID. But there is no such button - you combined the Load/Edit buttons into one. not sure if you want to disable this button or not. You need to either remove that line or make the necessary changes to support that button.

Darkmatter5 · December 12, 2008

The original post issue has been fixed, but here's another similar one I thought I'de just tack onto this post.

Here's my code:

<script type="text/javascript">
  function reload(form) {
    var param=form.client_id.options[form.client_id.options.selectedIndex].value;
    self.location='newaddjob.php?param=' + param ;
}
</script>

<select name="client_id" onchange="reload(this.form)" tabindex="2">
            <option value='a'>A</option><option value='b'>B</option><option value='c'>C</option><option value='d'>D</option>
            <option value='e'>E</option><option value='f'>F</option><option value='g'>G</option><option value='h'>H</option>
            <option value='i'>I</option><option value='j'>J</option><option value='k'>K</option><option value='l'>L</option>
            <option value='m'>M</option><option value='n'>N</option><option value='o'>O</option><option value='p'>P</option>
            <option value='q'>Q</option><option value='r'>R</option><option value='s'>S</option><option value='t'>T</option>
            <option value='u'>U</option><option value='v'>V</option><option value='w'>W</option><option value='x'>X</option>
            <option value='y'>Y</option><option value='z'>Z</option><option value='num'>0-9</option><option value='all'>Show all</option>
            </select> <a title="Client record associated with this job."><?php $byrndb->client_list(3,'',''); ?></a>

When I change the dropdown list with the alphabet in it, it doesn't seem to run reload. Can anyone figure out why?

Psycho · December 12, 2008

There's no form.

The onchange event is onchange="reload(this.form)" but there are no form tags, thus there is no form.

Although, having a properly formatted page (i.e. adding the form tags) is important, there is no reason to call the function with the form object only to then reference the field that called the function. Just pass the field object.

Plus, even though that script will work (in some browsers), it is not correct.

var param=form.client_id.options[form.client_id.options.selectedIndex].value;

Options do not have selected indexes, but the select object does. The correct format would be

var param=form.client_id.options[form.client_id.selectedIndex].value;

However, as I stated above, I would not use the form object, only the field object.:

<html>
<head>

<script type="text/javascript">

function reload(clientObj)
{
    var param = clientObj.options[clientObj.selectedIndex].value;
    self.location = 'newaddjob.php?param=' + param ;
}

</script>
</head>

<body>
<form>
<select name="client_id" onchange="reload(this)" tabindex="2">
    <option value='a'>A</option><option value='b'>B</option><option value='c'>C</option><option value='d'>D</option>
    <option value='e'>E</option><option value='f'>F</option><option value='g'>G</option><option value='h'>H</option>
    <option value='i'>I</option><option value='j'>J</option><option value='k'>K</option><option value='l'>L</option>
    <option value='m'>M</option><option value='n'>N</option><option value='o'>O</option><option value='p'>P</option>
    <option value='q'>Q</option><option value='r'>R</option><option value='s'>S</option><option value='t'>T</option>
    <option value='u'>U</option><option value='v'>V</option><option value='w'>W</option><option value='x'>X</option>
    <option value='y'>Y</option><option value='z'>Z</option><option value='num'>0-9</option><option value='all'>Show all</option>
</select>

<a title="Client record associated with this job."><?php $byrndb->client_list(3,'',''); ?></a>
</form>
</body>
<html>

Darkmatter5 · December 15, 2008

Thanks, it worked perfect!

Sign In

[SOLVED] Help with onchange events

Recommended Posts

Darkmatter5

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Darkmatter5

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Darkmatter5

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Darkmatter5

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

Darkmatter5

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information