am new to php. my question is:
i have 5 items in adrop down list box . i have items related to that list in mysql database. i want to list those items in textbox from database when user selects an item from drop down list box.
example;
i have table as follows:

Name Numbers 
Sam   042358
dev    785694
dev    34567
fid     345348

i have created list box wic displays name's..
now i have to retrieve the numbers which is stored under those name's..
could anyone give some idea how to do it..
here is d code i did:

<?php
            $dbname='test;
            $db_user='root';
            $db_pass='';
            $host='localhost';
            $conn = mysql_connect($host, $db_user, $db_pass);
            mysql_select_db($dbname);
            //$result = mysql_query($query, $connection) or die('Dynamic query function: error making query');
            $sql = mysql_query("SELECT distinct Name FROM billing_numbers orderby",$conn);
            //echo "connection success";
            //$result=mysql_fetch_array($sql);
    ?>
            <select name="Make" onchange="sampledata(this.form.text1);"> <!--((this.selectedIndex == -1) ? null : team[this.selectedIndex-1]));">-->
    <?php
            while ($row = mysql_fetch_array($sql))
            {              
    ?>
             <option
     <?php
                echo $_GET['Name']==$row['Name'] ? 'selected' : '';
    ?>
                >
    <?php
                echo $row['Name'];
    ?>
                </option>
    <?php             
            }

thanks

Recommended Answers

All 9 Replies

Member Avatar for rajarajan2017

Logic:

Get the text your selected from the list box and stored it ina variable
Ex: $resName=itemname;

Again make the query to fetch the relevant number from the database
Ex: 'Select phnum from table where name=$resName';

If it is a unique record, then only one number is returned. then show it in your text box
phtxt.value=phno;

Hope you understand the logic!

the logic presented by rajarajan07 is correct, but if you want this to happen when the user selects something from the drop down and not have to "submit" the form, then you may need to use AJAX, which allows the form to make a request to the database without having the page load. There are plenty of scripts out there that will show you how to use AJAX with plain javascript or you could just use Jquery which is easier, faster and more simple to use.

ya the logic rajarajan said was correct and already i thought that.. but d thing was i dono how to get the value from combobox.. whether we have to use javascript or we can directly get using option value

ya the logic rajarajan said was correct and already i thought that.. but d thing was i dono how to get the value from combobox.. whether we have to use javascript or we can directly get using option value

you can get the value using a submit button, the value depends on what is in the <option value='the value'> and which option is chosen by the user, if you don't want to SUBMIT the form then use javascript.

logic:

when the onchange event is triggered by the user on the dropdown
run a function that will make a XMLHttpRequest to another page and getting that data from that page. It's a bit confusing so....

ex:
keep this in a seperate file like AJAX.js and link it to your webpage

//keep this in a seperate file like AJAX.js and link it to your webpage

//I DIDN'T WRITE THIS code, I got it from a website, http://www.killerajax.com/
var xhr = false;

function makeRequest(url, callback_function, return_txt) {
	if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
	}
	else {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) { }
		}
	}

	   if (!xhr) {
       alert('Your browser doesn\'t support this feature.');
       return false;
   }
   xhr.onreadystatechange = function() {
   		/* The request can go through a number of states but we only care about 4
   		 	0 (uninitialized)
			1 (loading)
			2 (loaded)
			3 (interactive)
			4 (complete)
   		*/
       if (xhr.readyState == 4) {
           if (xhr.status == 200) { //200 is sucess. The page brought results back
               if (return_txt) {
                   eval(callback_function + '(xhr.responseText)');
               } else {
                   eval(callback_function + '(xhr.responseXML)');
               }
           } else if (xhr.status != 0){ //some versions of IE can return 0
        //Stephan added this line above, BUT all it does is possibly prevent the alert.
        //it doesn't call eval as if the status was 200, so perhaps this needs more research
               alert('There was a problem with the request.(Code: ' + xhr.status + ')');
           }
       }   	
	   
   }
xhr.open("GET", url, true);
		xhr.send(null);
}

how to use the code above

function getNmae(name){
       //the URL is another page you've created which sole purpose is to run a query
       //like select name from table; and echoing it
        var URL = "./names.php?name="+name;

        //the "display" uses the callback function in the code above
	makeRequest(URL, "display", "true");
       //return false so the page doesn't submit.(if it's a button) 
	return false;
	}

function display(result){
         //this will display the data u requested above into a <div> or anyother tags with the ID of show
	document.getElementById("show").innerHTML=result;
	}

If you have a page named names.php the code should be

if(isset($_GET['name'])){
//do the query by getting the $_GET['name']
//echo the result
}

http://www.killerajax.com/ -- this has a pretty good tutorial on how to use AJAX, and they now teach on how to use it with JQUERY

finally succeded gettin the result from selected combo box value. but it happens only when i click the submit button... is there any other way to pass the result value directly to a textbox without clicking the submit button.
here is my code.

<html>
    <head><title> Testing </title> </head>
    <body>
        <form method="post">
            <p> Choose group </p>
            <p>
                <label for="Group">Group</label>
                <?php
                    $dbname='callreader';
                    $db_user='root';
                    $db_pass='';
                    $host='localhost';
                    $conn = mysql_connect($host, $db_user, $db_pass);
                    mysql_select_db($dbname);
                    $query="select distinct Name from billing_numbers";
                    $result=mysql_query($query,$conn) or die(mysql_error());
                    if($result)
                    {
                ?>
                <select id="Name" name="Name">
                <?php
                        while($row=mysql_fetch_assoc($result))
                        {
                            echo '<option value="'.$row['Name'].'">'.$row['Name'].'</option>';
                        }
                ?>
                </select>
                <?php
                    }
                ?>          
                <input type="submit" value="submit" />
            </p>
        </form>
        <?php
            if(isset($_POST['Name']))
            {
                $query="select Number from billing_numbers where Name='".$_POST['Name']."'";
                $result=mysql_query($query,$conn) or die(mysql_error());
                    echo '<b>';
                    echo "Group Name:" . $_POST['Name'] . "\n<br/>";
                    echo "Numbers:\n<br/>";
                    echo '<b/>';
                if($result)
                {                    
                    while($row=mysql_fetch_assoc($result))
                    {
                        echo $row['Number']."<br/>";
                    }                    
                }
            }
        ?>            
    </body>
</html>

please someone give some idea how to do that..
thanks

Member Avatar for rajarajan2017

Without using AJAX you can't able to get the value and display it instantly. Becoz the page will get refresh.

Get an Idea about AJAX: http://www.w3schools.com/ajax/default.asp

thanks for your reply rajan.
actually this is simply a part of my application. this is not the whole program. i don have any idea about ajax. but my homepage code is as follows. go through that you can understand what i want exactly.

<html>
    <head>
        <title>Call Reader</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <link type="text/css" rel="stylesheet" href="calendar.css">
        <link rel="stylesheet" type="text/css" media="all" href="themes/aqua.css" title="Calendar Theme-aqua.css" >
        <script type="javascript" src="choosedate.js"></script>
        <!-- import the calendar script -->
        <script type="text/javascript" src="src/utils.js"></script>
        <script type="text/javascript" src="src/calendar.js"></script>
        <!-- import the language module -->
        <script type="text/javascript" src="lang/calendar-en.js"></script>
        <!-- other languages might be available in the lang directory; please check
		your distribution archive. -->
        <!-- import the calendar setup script -->
        <script type="text/javascript" src="src/calendar-setup.js"></script>
    </head>
    <body onload=top()>
        <center>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp; </p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp; </p>

            <form name=callsubm method="get" onsubmit="return DoSubmit();" action="outgoing.php" >
                <table border="0" >
                    <tr >
                        <td align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            From Date</td>
                        <td align="center" >&nbsp;
                            <input style="border-style: none;" type="text" name="beg" id="beg" size="15" ></td>
                        <td><img src="calender" alt="C" id='img1'>
                            <script language=javascript type="text/javascript">
                                var cal = new Zapatec.Calendar.setup({
                                    inputField:"beg",
                                    ifFormat:"%d-%m-%Y ",
                                    button:"img1",
                                    showsTime:false
                                });
                            </script>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            End Date</td>
                        <td >&nbsp;
                            <input style="border-style: none;" type="text" name="datEnd" id="datEnd" size="15" ></td>
                        <td><img src="calender" alt="C" id='img2'>
                            <script language=javascript type="text/javascript">
                                var cal = new Zapatec.Calendar.setup({
                                    inputField:"datEnd",
                                    ifFormat:"%d-%m-%Y ",
                                    button:"img2",
                                    showsTime:false
                                });
                            </script>
                        </td>

                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            Time</td>
                        <td >&nbsp;
                            <input  style="border-style: none;" name=time id=time type="text" size="15"></td>
                        <td><input type="image" id=time name=time src="Time.png"></td>
                    </tr>
                    <tr>
                        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            Extension</td>
                        <td >&nbsp;
                            <input  style="border-style: none;" name=inTxt id=inTxt type="text" size="15"></td>
                        <td><input type="image" id=callBtn name=callBtn src="phone.png"  ></td>
                    </tr>
                </table>
// here is were i need to implement that code and have to pass the result to above textfield 'inTxt'
           <?php
            $dbname='callreader';
            $db_user='root';
            $db_pass='';
            $host='localhost';
            $conn = mysql_connect($host, $db_user, $db_pass);
            mysql_select_db($dbname);
            //$result = mysql_query($query, $connection) or die('Dynamic query function: error making query');
            $sql = mysql_query("SELECT distinct Name FROM billing_numbers ",$conn);
           ?>
                <select class="style01" style="width:9em;" id="intercom" name="intercom" onchange="PrintCombo(document.forms[0])" style="font-size:12px;color:#006699;font-weight: bold;font-family:verdana;background-color:#ffffff;" >
           <?php
            while ($row = mysql_fetch_array($sql))
            {
                echo "<option value='$row[Name]'>$row[Name]";
                echo $_GET['Name']==$row['Name'] ? 'selected' : '';
                echo '</option>';
                $var=$row[Name];
            }
            ?>
            </select>
             <br/><br/>
                <table>
                    <tr align="center">
                        <td align="center">Single&nbsp;</td>
                        <td><input class="submit" type=radio  id=optSingle name=optSingle onclick=selectpage(name)>
                        </td>
                        <td>Datewise&nbsp;</td>
                        <td><input class="submit" type=radio checked id=optDat name=optDat onclick=selectpage(name)>
                        </td>
                    </tr>
                </table>
                <input TYPE=HIDDEN NAME="pageNum" value="1">
                <input TYPE=HIDDEN NAME="rowsPerPage" value="10">
            </form>
        </center>
    </body>
    <script type="text/javascript">
         function PrintCombo(form) {
                //If you use the options value attribute for course fees
                var item=form.intercom.selectedIndex;
                var Result=form.intercom.options[item].text;
                form.inTxt.value = Result;
            }
        function DoSubmit()
        {
            if(document.callsubm.datEnd.value=="")
            {
                document.callsubm.datEnd.value=document.callsubm.beg.value;
            }

            if (document.callsubm.inTxt.value=="")
            {
                alert ("Please enter extension number");
                document.callsubm.inTxt.focus();
                return false;
            }
            else
                {
                    return true;
                }

        }
        function selectpage(value)
        {
            if(value=='optSingle')
            {
                callsubm.optDat.checked=!callsubm.optDat.checked;
            }
            if(value=='optDat')
            {
                callsubm.optSingle.checked=!callsubm.optSingle.checked;
            }
        }
    </script>
</html>

am i clear or am i going wrong ....
help

can anyone give idea how i have to proceed further.

thanks for everyone who shared their ideas with me. i solved this by
function printcombo()
{
document.form.submit();
}

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.