www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to get onchange event to change check boxes according to item selected in listbox

  1. #1
    Join Date
    Jul 2011
    Posts
    8

    Question How to get onchange event to change check boxes according to item selected in listbox

    I have a form that has check boxes and a list box. When an item is selected in the listbox, I want to look up the database associated with that item and change the check boxes to checked or unchecked accordingly. If the first item in the listbox is selected, I want to bring up a form for creating a new item. All I have succeeded with so far is creating the page containing the check boxes and listbox and populating the listbox. Every attempt at getting the selected item to do something worthwhile with the 'onchange' event has failed. Any help would be greatly appreciated. See code below:

    ExampleForm.php
    Code:
    <?php
    	include_once 'includes/func.inc.php';
    	connect();
    ?>
    
    
    <!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
    	<title>Item Form</title>
    	</head>
    	
    	<body style="width:800px">
    		<form name="frm" action="LoadDatabase.php">
    			<table>
    				<tr>
    					<td style="width: 75%">
    						Control 1:
    						<input type="checkbox" name="Checkbox1" style="width:50px" />
    						Control 2:
    						<input type="checkbox" name="Checkbox2" style="width:50px" />
    						Control 3:
    						<input type="checkbox" name="Checkbox3" style="width:50px" />
    						Control 4:
    						<input type="checkbox" name="Checkbox4" style="width:50px" />
    					</td>
    					<td>
    						<h4 style="margin-bottom:0px">Item: </h4>
    						<select id="items" name="items" size="3" style="width:220px" onchange="ChangeControl(this);">
    							<option id="item0" value='new'>New Item</option>
    							<?php  query() ?>
    						</select>
    						<?php close() ?>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<input name="submit" type="button" value="Submit" />
    					</td>
    					<td id="note">Change this value</td>
    				</tr>
    			</table>
    		</form>
    	</body>
    </html>
    func.inc.php
    Code:
    <?php
    	include_once 'includes/db.inc.php';
    	
    	function connect() {
    		mysql_connect(DB_HOST,DB_USER,DB_PASS) or die ('Could not connect to the database ' . mysql_error());
    		mysql_select_db(DB_NAME);
    	}
    	
    	function close() {
    		mysql_close();
    	}
    	
    	function query() {
    		$myData = mysql_query("SELECT * FROM items");
    		while($record = mysql_fetch_array($myData)) {
    			echo '<option id="' . "item" . $record['item_id'] . '" value="' . $record['item_name'] . '">' . $record['item_name'] . '</option>';
    		}
    	}
    ?>	
    
    	<script type="text/javascript">
    		function ChangeControl(id)
    		
    		myIndex = id.selectedIndex;
    		myValue = id.options[myIndex].value;
    		
    		{
    			if (myValue = "new") 
    			{
    				//open dialog box for entering in a new Item
                                    //I would be happy If I could get this to open a different php file,
                                    //one that I would make into a form for creating a new item.
    
    			}
    			else 
    			{
    				//change the check boxes to checked or unchecked by looking up
                                    //item in database.               
    
    			}	
    		}
    	</script>
    db.inc.php
    Code:
    <?php
    	define('DB_NAME', 'example');
    	define('DB_USER', 'root');		
    	define('DB_PASS', '');	
    	define('DB_HOST', 'localhost');
    ?>
    example.sql
    Code:
    -- phpMyAdmin SQL Dump
    -- version 3.5.2.2
    -- http://www.phpmyadmin.net
    --
    -- Host: 127.0.0.1
    -- Generation Time: Jul 18, 2013 at 09:29 PM
    -- Server version: 5.5.25a
    -- PHP Version: 5.4.7
    
    SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
    SET time_zone = "+00:00";
    
    
    /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
    /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
    /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
    /*!40101 SET NAMES utf8 */;
    
    --
    -- Database: `example`
    --
    
    -- --------------------------------------------------------
    
    --
    -- Table structure for table `form_controls`
    --
    
    CREATE TABLE IF NOT EXISTS `form_controls` (
      `control_id` int(11) NOT NULL AUTO_INCREMENT,
      `control_1` tinyint(1) DEFAULT '0',
      `control_2` tinyint(1) DEFAULT '0',
      `control_3` tinyint(1) DEFAULT '0',
      `control_4` tinyint(1) DEFAULT '0',
      PRIMARY KEY (`control_id`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
    
    --
    -- Dumping data for table `form_controls`
    --
    
    INSERT INTO `form_controls` (`control_id`, `control_1`, `control_2`, `control_3`, `control_4`) VALUES
    (1, 1, 0, 1, 0),
    (2, 0, 1, 0, 1),
    (3, 0, 1, 1, 0),
    (4, 1, 1, 1, 1);
    
    -- --------------------------------------------------------
    
    --
    -- Table structure for table `items`
    --
    
    CREATE TABLE IF NOT EXISTS `items` (
      `item_id` int(11) NOT NULL AUTO_INCREMENT,
      `item_name` varchar(50) NOT NULL,
      PRIMARY KEY (`item_id`)
    ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
    
    --
    -- Dumping data for table `items`
    --
    
    INSERT INTO `items` (`item_id`, `item_name`) VALUES
    (1, 'Item 1'),
    (2, 'Item 2'),
    (3, 'Item 3'),
    (4, 'Item 4');
    
    /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
    /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
    /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

  2. #2
    Join Date
    Jul 2013
    Posts
    66
    You shouldn't load the Javascript before your document so much as even began. It might still work, but it's not a good idea. Anyway -- do you know what your browser's console is and how to open it? If not, this is the time to look it up. It will show you some very obvious problems right away, for example:

    Code:
    function ChangeControl(id)
        myIndex = id.selectedIndex;
        myValue = id.options[myIndex].value;
    		
        {
    You declare variables before the opening '{' brace of the function (illegal syntax and frankly very few languages allow this, so it's not a Javascript-specific problem) and you declare them as global due to the missing 'var' keyword (bad practice, illegal in strict mode, classic beginner's mistake)

    Code:
    if (myValue = "new")
    You don't compare with a single '=', you assign with it. To compare you use '==' or even better '===' (type-safe and transitive comparison). This is no different in PHP.

    In other words: Please go back to the books and learn Javascript before you start using it. Then learn how to use the development tools that come with any modern browser to find the obvious yourself. Scripts that don't even compile without syntax errors can be fixed very easily in the majority of cases by simply looking at what your console tells you.

  3. #3
    Join Date
    Jul 2011
    Posts
    8
    I just tried something different with the ChangeControl function. I wanted to see if I could get some sort of echo displayed on the page. I'm getting a response, but not what I expected. it appears as if id.value = "new" when clicking on any of the items in the listbox and the 'Here is where you enter in a new item.' text is displayed in a popup box not in the html. Even if this did do what I had hoped, I would still be a long way from what I really want to have happen. Sure hope someone can help me with this stuff. Here is the code:

    Code:
    	<script type="text/javascript">
    		function ChangeControl(id)
    		{
    			// Go to web page defined by the VALUE attribute of the OPTION element
    			if (id.value = "new") 
    			{
    				//open dialog box for entering in a new Item
    				var newItem="<?php echo "document.getElementById('note').value='Here is where you enter in a new item.'";?>";
    				alert(newItem);
    			}
    			else 
    			{
    				//change the check boxes to checked or unchecked by looking up Item in database
    				var changeItem="<?php echo "document.getElementById('note').value='Change check boxes.'";?>";
    				alert(changeItem);
    			}	
    		}
    	</script>

  4. #4
    Join Date
    Jul 2013
    Posts
    66
    I don't like to repeat myself very much, especially when being ignored, but I'll say it again: '=' assigns a value, not compares. An assignment will always evaluate to true.

  5. #5
    Join Date
    Jul 2011
    Posts
    8
    Sorry, I hadn't read your first post before I posted my second. You gave some good advice. Thanks.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles