www.webdeveloper.com
Results 1 to 5 of 5

Thread: Javascript changing select drop menu

Hybrid View

  1. #1
    Join Date
    Mar 2014
    Posts
    3

    Javascript changing select drop menu

    I have two select boxes they are drop downs I want the first select box too change the second one based on is selection. It works great but the problem is that the first drop down value that I assigned is not the value that I want.
    This is my table setup
    my first table name is "calltypecode."
    the fields for the this table is
    some example data
    description and priority
    description = fire one
    priority = regular
    description = fire two
    priority = silent

    my second table name is "prioritytype".
    my second table only has field priority
    priority = regular
    priority = silent

    They booth have something in commend but for the first drop down box I want the value to be description not the value priority I already have that value in the other drop down box.

    I pretty much give up. Does anyone now how to do what I want.

    This code works great but the value that I want is this variable to post $description
    this is my code for javascript
    Code:
    window.onload = function() { BindEvent(); }
    
        function BindEvent()
        {
           
            var elemToBind = document.getElementById ( "maintype" );
            elemToBind.onchange = function () { SetSel ( this ); }
        }
        function SetSel(elem)
        {
           
            var secondCombo = document.getElementById ( "priority" );
            secondCombo.value = elem.value;   
        }
    this is the code for the first select box
    Code:
    <select class="type" id="maintype"  name="maintype" selected="selected" onchange="showhide(this)">
    	<option value=0 selected="selected"></option>
    <?php
    	while($fetchdrop = mysqli_fetch_array($executedrop))
    	{
    		$description = $fetchdrop['description'];
    		$priority = $fetchdrop['priority'];
    		 echo "<option id= 1 value='$priority'>". $description . "</option>";
    	}
    	mysqli_close($cnx);
    ?>
    </select>
    I am optaining information from a database.

    This is my other select drop down box
    Code:
    <select class="priority" id="priority">
    	<option value=0></option>
    <?php
    	include "connection.php";
    	$sqlpriority = mysqli_query($cnx, "SELECT * FROM prioritytype");
    	while($fetch2 = mysqli_fetch_array($sqlpriority))
    	{
    		$priority = $fetch2['priority'];
    		echo "<option value='$priority'>" . $priority . "</option>";
    	}
    ?>
    </select>

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    why wouldn't you post the html code for your dropdowns instead of php which is absolute useless when someone tries to run the code locally? do you think we all have access to your db?

    looking at this code

    Code:
    while($fetchdrop = mysqli_fetch_array($executedrop))
    	{
    		$description = $fetchdrop['description'];
    		$priority = $fetchdrop['priority'];
    		 echo "<option id= 1 value='$priority'>". $description . "</option>";
    	}
    i can predict that all of this dropdown options are going to have same id attribute values which is not correct because every id within the current HTML document must be unique ( http://www.w3schools.com/tags/att_global_id.asp /Definition and Usage/ )

    i'm not sure i understood your question correctly but try this code:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>title</title>
    <style>
    body{text-align:center;padding-top:200px;}
    input,select{cursor:pointer;}
    #db_data{cursor:default;text-align:center;}
    div > #db_maintype,#db_priority{margin-top:15px;margin-bottom:15px;text-align:center;}
    b{margin-left:10px;margin-right:10px;}
    </style>
    <script>
    function $(id){return document.getElementById(id);}
    
    onload=function(){
    $('maintype').onchange=$('priority').onchange=function(){
    var val=this.value,
        targetID=this.id=='maintype'?'priority':'maintype',
    	opts=$(targetID).options,
    	i=0;
    for(;i<opts.length;i++){
    if(opts[i].value===val){
    $(targetID).selectedIndex=i;
    this.blur();
    $('db_'+this.id).value=this.options[this.selectedIndex].text;
    $('db_'+targetID).value=$(targetID).options[$(targetID).selectedIndex].text;
    break;
    }
    else{continue;}
    }
    }
    
    $('myform').onsubmit=function(){
    return ($('db_maintype').value===$('db_priority').value) ? false : true;
    }
    }
    </script>
    </head>
    <body>
    <form id="myform" name="myform" action="">
    <b>Maintype:</b><select id="maintype">
    <option value=""></option>
    <option value="regular">fire_one</option>
    <option value="silent">fire_two</option>
    </select>
    <b>Priority:</b><select id="priority">
    <option value=""></option>
    <option value="regular">regular</option>
    <option value="silent">silent</option>
    </select>
    <div>
    <input type="text" id="db_maintype" name="db_maintype" size="70" placeholder="this field value will be sent to the DB as 'db_maintype', set this type 'hidden'" />
    <input type="text" id="db_priority" name="db_priority" size="70" placeholder="this field value will be sent to the DB as 'db_priority', set this type 'hidden'" />
    </div>
    <input type="reset" value="Reset" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="Send" />
    </form>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Mar 2014
    Posts
    3
    Hey I am sorry but I am a beginner at html and javascript as well php. I am doing this project at the same time I am learning this languages trying to combine them together. The one I am learning the most is javascript. As for php and html not some much I am learning. But I found my solution to this problem. What I did was they submitted that form it executed a javascript code this is the code that work for me. I created a function alert() in that function have this var x = document.getElementById("maintype").selectedIndex; var y = document.getElementsByTagName("option")[x].value = document.getElementsByTagName("option")[x].text; and on the button onclick="alert()" so when I submit the information javascript runs first then php at the end which gives me the end results. Insteda of giving me the value to post it gives me the text information. By the way do you know where are some tutorials that allow you to learn javascript like beginners intermidiate and advance concepts. So when I read the beginners and I am done I will go to intermidiate so on.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    as for me i don't know where to find such tutorials. i learn js right here trying to help people if i can and i know many high skilled coders over here (i'm just an amateur) learnt it by themselves aswell. may be somebody else can advice you where those tutorials can be found. i would advice you a good book which you can easily find in the internet (buy or download - it's your choise) - this is Secrets of the JavaScript Ninja
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Mar 2014
    Posts
    3
    I just have one question Padonak.
    What does this mean.

    var y = document.getElementsByTagName("option")[x].value = document.getElementsByTagName("option")[x].text;
    I am interested in knowing what is this mean [x]. I understand the rest except for that.

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles