Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old October 6th, 2005, 10:33 PM
Authorized User
 
Join Date: Oct 2005
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default how to get the index and value from option dropdow

Hi,

I would like to find out how to handle the following:

I retrieve the data from the database by calling javabean and return the data back to the same jsp page and then display those values using html/javascript in the dropdown listbox.

how to get the value selected by user (to be used in java - as a condition - for retrieving data from database) without submitting the form? I have many fields in that form and each each field required to check whether the data exist in the database and then retrieve other data fo be displayed in another field in the form.

can I use hidden iframe. if so, how to apply to the following codes

pls help

Part of the code for ref - trans_main.jsp
--------------------------------------
<%@page import="java.util.List.*;"%>
<jsp:useBean id = "trx" class="trx.TransDetails" />
<%
String jCompany;
ArrayList listCompany = new ArrayList();
int sizeCompany=0;
%>

<html>
<head><title>JSP Page</title></head>
<title>Form</title>

<body>

<form name="transaction" method="post" >
<input type="hidden" name="hid_page" value="main"/>

<table>
<th width="9%"align="left">Company</th>
<td width="1%" align="center">:</td><td width="5%" >

<select name="co_no" id="co_no" >
<option value="select"></option>
<%
listCompany = trx.display_company();;
ListIterator iter = listCompany.listIterator();
while (iter.hasNext()) {
jCompany =(String)iter.next();
%>
<option value="<%=jCompany %>"><%=jCompany %></option>
<% } %>
</select>
</td>
</tr>

<tr>
<th width="9%"align="left">Project</th>
<td width="1%" align="center">:</td><td width="25%">
<select name="proj_cde" >
<option value="select"></option>
-----

</select>
</td>
</tr>
</table>
</form>
</body>
</html>
 
Old October 7th, 2005, 07:28 AM
Friend of Wrox
 
Join Date: Oct 2004
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hii tllcll

Offcourse u can do this
try link
 http://p2p.wrox.com/topic.asp?TOPIC_ID=31530
hope this will help you

Cheers :)

vinod
 
Old October 7th, 2005, 08:04 PM
Authorized User
 
Join Date: Oct 2005
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thanks for the reply. I try to click on those link but the page is unable to display. I manage to see the javascript page but I think I can apply that because I need to pass the selected value back to retrieve the next set of data to display on the same form

I saw you have reply to that topic with XMLHttpRequest. can this be apply to the above codes. if so, can you possible show how to apply to the above code

TQ


 
Old October 10th, 2005, 09:45 AM
Friend of Wrox
 
Join Date: Oct 2004
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

Hi tllcll.
Here is the complete solution ,
plz change ur url and asp /jsp/php code as per ur requirements
Hope this will help you :)
<script>
var isfound
dependentArr=new Array('country','state','city','hospital','doctor' )
isfound=false;
var foundat=0;

qryString="";
function getOptionIndex(obj)
{
qryString="";
counter=0;
currentOption=obj.name

for(i=0;i<dependentArr.length;i++)
{
     if(isfound)
        {
        removeValues(dependentArr[i]);
        }
  if(dependentArr[i]==currentOption) //userselected optionbox
         {
      isfound=true;
        foundat=i
       }

}
isfound=false



for(k=0;k<=foundat;k++)
    {
    counter++;
    if(counter==1)
  qryString=qryString+dependentArr[k]+'='+_eval('document.myform.'+dependentArr[k]+'.value');
    else
    qryString=qryString+'&'+dependentArr[k]+'='+_eval('document.myform.'+dependentArr[k]+'.value');
  }







}

function getValues(obj)
{
getOptionIndex(obj)
blr();
}

function removeValues(objstrname)
{
obj=_eval('document.myform.'+objstrname)
obj.options.length = 0
}


var req;
function blr()
{
url="http://localhost/vinod/optionvalue.asp?"+qryString


    req = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest) {

        try {
            req = new XMLHttpRequest();
        } catch(e) {
            req = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                req = false;
            }
        }
    }
    if(req) {
        req.onfiltered= processReqChange;
        req.open("GET", url, true);
        req.send();
    }
}


function processReqChange()
{

    if (req.readyState == 4) {


        if (req.status == 200) {


                    var xmlDOM = new ActiveXObject("Microsoft.XMLDOM");
                        xmlDOM.loadXML(req.ResponseText);

                        var onfiltered= xmlDOM.documentElement.firstChild;



                        var outputstr
                        outputstr=""
                        if(oNode != null)
                        {



                                        outputstr=oNode.text


                            }
  var obj
                                             curr_level=dependentArr[foundat+1]


                                                                            parentobj=document.getElementById(curr_level)

                                                                            objarr=outputstr.split("|")

                                                                            for(i=0;i<objarr.length;i++)
                                                                            {

                                                                            chld=objarr[i].split("~")
                                                                            myname=chld[0];
                                                                            myvalue=chld[1];
                                                                            obj=new Option(myname,myvalue)
                                                                            parentobj[i]=obj
  }


            } }
}
</script>




<form name="myform">
<table><tr><td>

<table bgcolor="cococo" border=0 width=100%>
<tr><td>Country:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbs p;&nbsp;<select name="country" onfiltered="getValues(this)">
<option value="Country1">Country1</option>
<option value="Country2">Country2</option>
<option value="Country3">Country3</option>
<option value="Country4">Country4</option>
<option value="Country5">Country5</option>
<option value="Country6">Country6</option>
<option value="Country7">Country7</option>

</select></td></tr>

<tr><td>State:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select id="state" name="state" onfiltered="getValues(this)">


</select></td></tr>

<tr><td>City:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select name="city" onfiltered="getValues(this)" id="city">

</select></td></tr>

<tr><td>Hospitals:&nbsp;&nbsp;&nbsp;&nbsp;<selec t id="hospital" name="hospital" onfiltered="getValues(this)">

</select></td></tr>
</table>
</td><td><table bgcolor="ccCCO"> <tr><td>Doctors</td></tr><tr><td><select id=doctor name=doctor multiple size=4></select></table></td></tr>


<input type=button onfiltered="rem()" value=remov>
</form>


**************optionvalue.asp**************
<%
outstr=""
curr_level=""
counter1=10

if request("country")<>"" then
outstr=outstr&"-"&request("country")
curr_level="STATE"
end if


if request("state")<>"" then
outstr=outstr&"-"&request("state")
curr_level="CITY"
end if


if request("city")<>"" then
outstr=outstr&"-"&request("city")
curr_level="HOSPITALS"
end if

if request("hospital")<>"" then
outstr=outstr&"-"&request("hospital")
curr_level="Doctors"
counter1=20
end if




resultstr=""
for i=1 to counter1
if(i=1) then
resultstr=outstr&"-"&curr_level&i&"~"&curr_level&i
else
resultstr=resultstr&"|"&outstr&"-"&curr_level&i&"~"&curr_level&i
end if
next

%>

<response>
<option1><%=resultstr%></option1>
</response>


Cheers :)

vinod
 
Old October 11th, 2005, 04:01 AM
Authorized User
 
Join Date: Oct 2005
Posts: 15
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi, thks for the info. I have tried to apply but seems that it is not working. are you able to detect where I go wrong.

trans.jsp
---------
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@page import="java.sql.*,java.text.*,java.util.*,java.ut il.Vector" %>
<%@page import="java.sql.*,java.lang.Object,java.lang.Stri ng,java.lang.Integer,java.util.*,java.text.SimpleD ateFormat, java.text.*"%>
<%@page import="java.util.List.*;"%>
<jsp:useBean id = "trx" class="trx.TransDetails" />
<jsp:useBean id = "db" class="dbConn.Conn" scope="request" />
<%
String jCompany;
ArrayList listCompany = new ArrayList();
int sizeCompany=0;
%>

<html>

    <head><title>JSP Page</title></head>
    <title>Transaction Form</title>

    <script language ="JAVASCRIPT" src="exchanger.js"></script>
    <script language ="JAVASCRIPT">

        var isfound;
        dependentArr = new Array('co_no','proj_cde');
        isfound=false;
        var foundat=0;

        qryString="";

        function getOptionIndex(obj)
        {
            qryString="";
            counter=0;
            currentOption=obj.name

            for(i=0;i<dependentArr.length;i++)
            {
                if(isfound)
                {
                    removeValues(dependentArr[i]);
                }
                if(dependentArr[i]==currentOption) //userselected optionbox
                {
                    isfound=true;
                    foundat=i
                }

            }

            isfound=false
            for(k=0;k<=foundat;k++)
            {
                counter++;
                if(counter==1)
                    qryString=qryString+dependentArr[k]+'='+_eval('document.transaction.'+dependentArr[k]+'.value');
                else
                    qryString=qryString+'&'+dependentArr[k]+'='+_eval('document.transaction.'+dependentArr[k]+'.value');
            }
        }

        function getValues(obj)
        {
            getOptionIndex(obj)
            blr();
        }

        function removeValues(objstrname)
        {
            obj=_eval('document.transaction.'+objstrname)
            obj.options.length = 0
        }

        var req;
        function blr()
        {
            <% String url = request.getRequestURI();
            System.out.println("url " +url); %>


            url = "http:/<%=url%>?"+qryString;
            alert("url " + url);

            req = false;
            // branch for native XMLHttpRequest object
            if(window.XMLHttpRequest) {
                try {
                    req = new XMLHttpRequest();
                }
                catch(e) {
                    req = false;
                }
                // branch for IE/Windows ActiveX version
            }
            else if(window.ActiveXObject) {
                try {
                    req = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e) {
                    try {
                        req = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch(e) {
                    req = false;
                    }
                }
            }
            if(req) {
                req.onfiltered= processReqChange;
                req.open("GET", url, true);
                req.send();
            }
        }

        function processReqChange()
        {
            if (req.readyState == 4) {

                if (req.status == 200) {
                    var xmlDOM = new ActiveXObject("Microsoft.XMLDOM");
                    xmlDOM.loadXML(req.ResponseText);
                    var onfiltered= xmlDOM.documentElement.firstChild;

                    var outputstr
                    outputstr=""
                    if(oNode != null)
                    {
                        outputstr=oNode.text
                    }
                    var obj
                    curr_level=dependentArr[foundat+1]
                    parentobj=document.getElementById(curr_level)
                    objarr=outputstr.split("|")
                    for(i=0;i<objarr.length;i++)
                    {
                        chld=objarr[i].split("~")
                        myname=chld[0];
                        myvalue=chld[1];
                        obj=new Option(myname,myvalue)
                        parentobj[i]=obj
                    }
                }
            }
        }

        function changeProjectDesc() {
        var companyIndex = document.transaction.co_no.selectedIndex;
        var companyValue = document.transaction.co_no.options[companyIndex].value;
        var companyText = document.transaction.co_no.options[companyIndex].text;

        }

        </script>


        <!--input type="hidden" name="counter" value="1"/>
        <input type="hidden" name="hiddenProj" value=""/>
        <input type="hidden" name="hiddenDept" value=""/-->

        <form name="transaction" method="post" >
        <input type="hidden" name="hid_page" value="main"/>
        <table border = "0" width="100%" cellspacing=0.2>
            <tr>
                <td width="100%" colspan="3">

                        <b>Transaction Form</b>

                </td>
            </tr>
        </table>



        <table>
        <th width="9%"align="left">Company</th>
        <td width="1%" align="center">:</td><td width="5%" >


            <select name="co_no" id="co_no" onfiltered="getValues(this)" >

                <option value="select"></option>
<%
                            //ArrayList listCompany = trx.display_company();
                            listCompany = trx.display_company();;

                            ListIterator iter = listCompany.listIterator();
                            while (iter.hasNext()) {
                                 jCompany =(String)iter.next();
%>
                <option value="<%=jCompany %>"><%=jCompany %></option>
                                 <% } %>
            </select>
        </td>
    </tr>

                <tr>
                    <th width="9%"align="left">Project</th>
                    <td width="1%" align="center">:</td><td width="25%">
                        <select name="proj_cde" onfiltered="getValues(this)"">
                            <option value="select"></option>

                            <%
                            String aaa = request.getParameter("co_no");
                            System.out.println("aaa " +aaa);

                            ArrayList listProject = trx.display_project();
                            ListIterator iterProject = listProject.listIterator();
                            while (iterProject.hasNext()) {
                                String jProject =(String)iterProject.next();
%>
                            <option value="<%=jProject %>"><%=jProject %></option>
<% }%>
                        </select>
                    </td>
                    <th width="13%" align="left">Cost Centre</th>
                    <td width="1%">:</td>
                    <td width="18%">
                        <select name="dept_cde" disabled>
                            <option value="select"></option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th width="9%"align="left">Transaction Type</th>
                    <td width="1%" align="center">:</td>
                    <td>
                        <select name="tran_cde" onChange="clearTable(); setReasonCode(this);">

                            <option value="D" selected>Delivery</option>
                        </select>
                    </td>
                    <th width="13%" align="left">Reason Code</td>
                    <td width="1%">:</td>
                    <td width="5%">
                        <select name="rea_cde">
                            <option value="select"></option>
                        </select>
                    </td>
                </tr>

            </table>

        </form>
    </body>

</html>







Similar Threads
Thread Thread Starter Forum Replies Last Post
Is there a "like" option? crabjoe Classic ASP Basics 4 June 9th, 2008 03:42 PM
Create Check Boxes/Option buttons/Option Group hewstone999 Access VBA 1 March 14th, 2008 07:25 AM
if option kgoldvas XSLT 1 May 14th, 2007 09:39 AM
how to get the index and value from option dropdow tllcll Pro JSP 1 December 21st, 2005 08:14 AM
Getting select option name not value mildge Javascript How-To 2 April 5th, 2004 10:20 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.