Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile [HELP] updating multiple select with javascript

    Code:
    <html>
    <head>
    	<script type="text/javascript">
    		var supplier = [{"id":"1","val":"jojo"},{"id":"2","val":"swt"}]; 
    var namabarang = {"1":[{"id":"1","val":"door handle"}],"2":[{"id":"2","val":"headlamp innova"}]}; 
    		
    		window.onload = function(){
    			loadSupplier();
    		}
    		
    		function addRow(tableID) { 
    			var table = document.getElementById(tableID);
    	
    			var rowCount = table.rows.length;
    			var row = table.insertRow(rowCount);
    			
    			var colCount = table.rows[5].cells.length;
    	
    			for(var i=0; i<colCount; i++) {
    			
    				var newcell = row.insertCell(i);
    	 
    				newcell.innerHTML = table.rows[5].cells[i].innerHTML;
    				
    				switch(newcell.childNodes[0].type) {
    					case "text":
    						newcell.childNodes[0].value = "";
    						break;
    					case "checkbox":
    						newcell.childNodes[0].checked = false;
    						break;
    					case "select-one":
    						newcell.childNodes[0].selectedIndex = 0;
    						break;
    				}
    			}
    		}
    	 
    		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[1];
    					if(null != chkbox && true == chkbox.checked) {
    						if(rowCount <= 6) {
    							alert("Cannot delete all the rows.");
    							break;
    						}
    						table.deleteRow(i);
    						rowCount--;
    						i--;
    					}
    				}
    			}catch(e){
    				alert(e);
    			}
    		}
    		
    		function loadSupplier(){
    			var supplierSelect = document.getElementById("supplier");
    			supplierSelect.onchange = updateNamabarang;
    			for(var a = 0; a < supplier.length; a++){
    				supplierSelect.options[a] = new Option(supplier[a].val, supplier[a].id);          
    			}
    		}
    		
    		function updateNamabarang(){
    			var supplierSelect = this;
    			var supplierid = this.value;
    			var namabarangSelect = document.getElementsByClassName("namabarang");
    			namabarangSelect.options.length = 0;
    			for(var a = 0; a < namabarang[supplierid].length; a++){
    				namabarangSelect.options[a] = new Option(namabarang[supplierid][a].val, namabarang[supplierid][a].id);
    			}
    		}
        </script>
    </head>
    <body>
        <form method="post" action="process.php">
            <table id="purchase">
                <tr>
                    <td> Purchase ID </td>
                    <td>
                        <?php
                            include "connect.php";
                            $query = "select max(purchaseid) from tpurchase";
                            $execute = mysql_query($query, $conn);
                            while($row = mysql_fetch_array($execute)){
                                $nextcode = $row[0] + 1;
                            }
                            echo "<input type=\"text\" name=\"purchaseid\" value=\"$nextcode\" disabled=\"disabled\">";	
                            mysql_close($conn);
                        ?>
                        <?php
                            include "connect.php";
                            $query = "select max(purchasedetailid) from tpurchasedetail";
                            $execute = mysql_query($query, $conn);
                            while($row = mysql_fetch_array($execute)){
                                $purchasedetailid = $row[0] +1;
                            }
                            mysql_close($conn);
                        ?>
                        <input type="hidden" name="purchasedetailid" value="<?php echo "$purchasedetailid"; ?>">
                        <input type="hidden" name="purchaseid" value="<?php echo "$nextcode"; ?>">
                    </td>
                </tr>
                <tr>
                    <td> Date </td>
                    <td>
                        <?php
                            $datetime;
                            $now = date("Y");
                        ?>
                        <select name="day">
                            <option value="">Day</option>
                                <?php	for($i=1;$i<=31;$i++){	?>
                                            <option value="<?php echo $i; ?>" <?php if(isset($datetime) && $i == date('j',$datetime)) { echo 'selected'; } ?> > 
                                                <?php echo date('d',mktime(0,0,0,1,$i,1950)); ?>
                                            </option>
                                <?php	} ?>
                        </select>
                        <select name="month">
                            <option value="">Month</option>
                                <?php	for($i=1;$i<=12;$i++){	?>
                                            <option value="<?php echo $i; ?>" <?php if(isset($datetime) && $i == date('n',$datetime)) { echo 'selected'; } ?> >
                                                <?php echo date('M',mktime(0,0,0,$i,1,1950)); ?>
                                            </option>
                                <?php	} ?>
                        </select>
                        <select name="year">
                            <option value="">Year</option>
                                <?php for($i=$now;$i<=$now+10;$i++){ ?>
                                            <option value="<?php echo $i; ?>" <?php if(isset($datetime) && $i == date('Y',$datetime)) { echo 'selected'; } ?> >
                                                <?php echo $i; ?>
                                            </option>
                                <?php	}	?>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td> Select Supplier </td>
                    <td> <select name="supplierid" id="supplier"> </select> </td>
                </tr>
                <tr>
                    <td> </td>
                    <td> <input type="button" onClick="addRow('purchase')" value="addRow"> <input type="button" onClick="deleteRow('purchase')" value="deleteRow"> </td>
                    <td> <input type="submit" name="submit" value="Submit"> </td>
                </tr>
                <tr>
                    <td> No </td>
                    <td> Nama Barang </td>
                    <td> Harga Beli/Satuan </td>
                    <td> Quantity </td>
                </tr>
                <tr>
                    <td> <input type="checkbox" name="checkbox"> </td>
                    <td> <select name="codebarang[]" class="namabarang"> </select> </td>
                    <td> <input type="text" name="hargabelisatuan"> </td>
                    <td> <input type="text" name="quantity[]"> </td>
                </tr>
            </table>
        </form>
    </body>
    </html>
    i have a table of select option which i can customize whether to add another row or delete rows. i found on the internet that 'id' attribute of 'select option' must be unique so i change it to class but it still not work.. i want that everytime i change supplier (with blue colors) the array of 'select' also changes.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You have to loop through all select elements in the namabarangSelect.
    Code:
    for (var i=0; i < namabarangSelect.length; i++) {
        var select = namabarangSelect[i];
        //do something with the select
    }
    Note that getElementsByClassName does not work in IE8 and below (see http://caniuse.com/getelementsbyclassname).

    If you care about IE8 but not IE7 and below, you can use document.querySelectorAll (http://caniuse.com/queryselector) instead of document.getElementsByClassName.
    Code:
    var namabarangSelect = document.querySelectorAll(".namabarang");
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New Coder
    Join Date
    Jun 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    [QUOTE=glenngv;1349934]You have to loop through all select elements in the namabarangSelect.
    Code:
    for (var i=0; i < namabarangSelect.length; i++) {
        var select = namabarangSelect[i];
        //do something with the select
    }
    you mean like this?

    Code:
    function updateNamabarang(){
    			var supplierSelect = this;
    			var supplierid = this.value;
    			var namabarangSelect = document.getElementsByClassName("namabarang");
    			namabarangSelect.options.length = 0;
    			for(var i = 0; i < namabarangSelect.length; i++){
    				var selected = namabarangSelect[i];
    				for(var a = 0; a < namabarang[supplierid].length; a++){
    					selected.options[a] = new Option(namabarang[supplierid][a].val, namabarang[supplierid][a].id);
    				}
    			}
    		}
    it is no use

  • #4
    New Coder
    Join Date
    Jun 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    if i change to getElementbyid('namabarang'), the select will load the options but when i change the supplier only the first select will regenerate the options..



    so that means i have to use getElementsByClassName because if i use id it must be unique whilst i have more than one 'select'.. am i right?

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by phyra_x99 View Post
    Quote Originally Posted by glenngv View Post
    You have to loop through all select elements in the namabarangSelect.
    Code:
    for (var i=0; i < namabarangSelect.length; i++) {
        var select = namabarangSelect[i];
        //do something with the select
    }
    you mean like this?

    Code:
    function updateNamabarang(){
    			var supplierSelect = this;
    			var supplierid = this.value;
    			var namabarangSelect = document.getElementsByClassName("namabarang");
    			namabarangSelect.options.length = 0;
    			for(var i = 0; i < namabarangSelect.length; i++){
    				var selected = namabarangSelect[i];
    				for(var a = 0; a < namabarang[supplierid].length; a++){
    					selected.options[a] = new Option(namabarang[supplierid][a].val, namabarang[supplierid][a].id);
    				}
    			}
    		}
    it is no use
    Remove the line in red above. That's causing a js error.

    You need to reset the options right after the var selected line inside the loop.
    Code:
    selected.options.length = 0;
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    phyra_x99 (08-05-2013)

  • #6
    New Coder
    Join Date
    Jun 2013
    Posts
    18
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Remove the line in red above. That's causing a js error.

    You need to reset the options right after the var selected line inside the loop.
    Code:
    selected.options.length = 0;

    wow.. that works.. thanks a lot
    Last edited by phyra_x99; 08-05-2013 at 08:06 AM.


  •  

    Tags for this Thread

    Posting Permissions

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