Multiple ajax

[yuvi2288]

HI EXPERTS,

I am trying ajax.

The code I have used is given below.I linked both the javascript files inside the head section.

When I select any category from first dropdown box, I call the javascript func and got the corresponding subcategories in the second dropdown. This is ok.

But I want to print the text boxes between second dropdown box and comment field corresponding to the subcategory selected in the second dropdown box using ajax.

But i can't get the text boxes.

What I have to do to print the text boxes between second dropdown box and comment field corresponding to the subcategory selected in the second dropdown box using ajax???.

Hope you will help me..

Form.jsp

<form name="myform">
       <table>
       <tr><td>Category:</td><td>
       <select name="category" onchange="setOptions(document.myform.category.value);">
       <option value="Select category" selected="selected">Select category</option>
       <option value="Entertainment">Entertainment</option>
       <option value="Electronics">Electronics</option>
       <option value="Locals">Locals</option>
       <option value="Automobiles">Automobiles</option>
       <option value="Travels & Tourism">Travels & Tourism</option>
       </select></td></tr>
       <tr><td>Sub-Category:</td><td>
       <select name="sub_category" onchange="selectTag(this.value);">
       <option value=""  selected="selected">Please Select Category First</option>
       </select></td></tr>
       <tr><td><div id="div"></div></td></tr>        
       <tr><td>Comments:</td> <td><input type="text" name="comments"/></td></tr>
       </table>
</form>

javasc.js

function setOptions(chosen) {
    var selbox = document.myform.sub_category;

    selbox.options.length = 0;
    if (chosen == "Select category") {
        selbox.options[selbox.options.length] = new Option('Please Select Category First',' ');

    }
    if (chosen == "Entertainment") {
        selbox.options[selbox.options.length] = new Option('Select Sub-Category',' ');
        selbox.options[selbox.options.length] = new Option('Books','Books');
        selbox.options[selbox.options.length] = new Option('Club','Club');
        selbox.options[selbox.options.length] = new Option('Drama & Theatre','Drama & Theatre');
        selbox.options[selbox.options.length] = new Option('Movie','Movie');
        selbox.options[selbox.options.length] = new Option('Music','Music');
        selbox.options[selbox.options.length] = new Option('Games','Games');
        selbox.options[selbox.options.length] = new Option('Pub','Pub');
        selbox.options[selbox.options.length] = new Option('Theme Park','Theme Park');
        selbox.options[selbox.options.length] = new Option('TV Serials','TV Serials');
    }
    if (chosen == "Electronics") {
        selbox.options[selbox.options.length] = new Option('Select Sub-Category',' ');
        selbox.options[selbox.options.length] = new Option('Air Conditioners','Air Conditioners');
        selbox.options[selbox.options.length] = new Option('Audio Systems','Audio Systems');
        selbox.options[selbox.options.length] = new Option('Mobile Phones','Mobile Phones');
        selbox.options[selbox.options.length] = new Option('Photo & Optics','Photo & Optics');
        selbox.options[selbox.options.length] = new Option('Television','Television');
    }
    if (chosen == "Locals") {
        selbox.options[selbox.options.length] = new Option('Select Sub-Category',' ');
        selbox.options[selbox.options.length] = new Option('Hotel & Restaurents','Hotel & Restaurents');
        selbox.options[selbox.options.length] = new Option('Retails','Retails');
        selbox.options[selbox.options.length] = new Option('SPA','SPA');
        selbox.options[selbox.options.length] = new Option('Training Institute','Training Institute');
    }

    if (chosen == "Automobiles") {
        selbox.options[selbox.options.length] = new Option('Select Sub-Category',' ');
        selbox.options[selbox.options.length] = new Option('Cars','Cars');
        selbox.options[selbox.options.length] = new Option('Car Dealers','Car Dealers');
        selbox.options[selbox.options.length] = new Option('Two Wheelers','Two Wheelers');
        selbox.options[selbox.options.length] = new Option('Two Wheeler Dealers','Two Wheeler Dealers');
    }

    if (chosen == "Travels & Tourism") {
        selbox.options[selbox.options.length] = new Option('Select Sub-Category',' ');
        selbox.options[selbox.options.length] = new Option('Tourism','Tourism');
    }
}

ajax.js

function GetXmlHttpObject()
{
    var xmlHttp1=null;

  if (window.XMLHttpRequest)
  {
  xmlHttp1=new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  {
  xmlHttp1=new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xmlHttp1;
}

function selectTag(chosen)
{
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request")
        return
    }
    var url="Dynamic_form.jsp";
    url=url+"?sub_category="+chosen;
    url=url+"&sid="+Math.random();
    xmlHttp.onreadystatechange=stateChanged3;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
}


function stateChanged3()
{
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    {
        document.getElementById("div").innerHTML=xmlHttp.responseText ;
    }
}

Dynamic_form.jsp

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <%

            String sub_category = (String)request.getParameter("sub_category");
            String responseText = new String("");


            if (sub_category == "Books") {
                responseText = "<tr><td>Book Name:</td><td><input type = 'text' name = 'brand'> </td> < /tr>";
                responseText += "<tr> <td> Author Name: </td><td><input type = 'text' name = 'model'> </td> </tr>";
            }


            if (sub_category == "Movie" || sub_category == "Music") {
                responseText = "<tr><td> Name:</td><td><input type = 'text' name = 'brand'> </td> < /tr>";
                responseText += "<tr> <td> Language:</td><td><input type = 'text' name = 'model'> </td> </tr>";
            }


            if (sub_category == "Games") {
                responseText = "<tr><td>Game Name:</td><td><input type = 'text' name = 'brand'> </td> < /tr>";
                responseText += "<tr> <td> Type: </td><td><input type = 'text' name = 'model'> </td> </tr>";
            }


            if (sub_category == "TV Serials") {
                responseText = "<tr><td>Serial Name:</td><td><input type = 'text' name = 'brand'> </td> < /tr>";
                responseText += "<tr> <td>Channel: </td><td><input type = 'text' name = 'model'> </td> </tr>";
            }


            if (sub_category == "Mobile phones") {
                responseText = "<tr><td>Brand Name:</td><td><input type = 'text' name = 'brand'> </td> < /tr>";
                responseText += "<tr> <td> Model: </td><td><input type = 'text' name = 'model'> </td> </tr>";
            }

            if (sub_category == "Air Conditioners" || sub_category == "Audio Systems" || sub_category == "Television" || sub_category == "Photo & Optics") {
                responseText = "<tr><td>Brand Name:</td><td><input type = 'text' name = 'brand'> </td> < /tr>";
                responseText += "<tr> <td>Model: </td><td><input type = 'text' name = 'model'> </td> </tr>";
            }

            if (sub_category == "Hotel & Restaurents" || sub_category == "SPA" || sub_category == "Retails" || sub_category == "Training Institute" || sub_category == "Car Dealers" || sub_category == "Two Wheeler Dealers" || sub_category == "Pub" || sub_category == "Club" || sub_category == "Theme Park" || sub_category == "Drama & Theatre") {
                responseText = "<tr><td>Name:</td><td><input type = 'text' name = 'brand'> </td> < /tr>";
                responseText += "<tr> <td>City : </td><td><input type = 'text' name = 'model'> </td> </tr>";
            }

            if (sub_category == "Cars" || sub_category == "Two Wheelers") {
                responseText = "<tr><td>:</td><td><input type = 'text' name = 'brand'> </td> < /tr>";
                responseText += "<tr> <td> : </td><td><input type = 'text' name = 'model'> </td> </tr>";
            }

            if (sub_category == "Tourism") {
                responseText = "<tr><td>Name:</td><td><input type = 'text' name = 'brand'> </td> < /tr>";
                responseText += "<tr> <td>City: </td><td><input type = 'text' name = 'model'> </td> </tr>";
            }
            out.println(responseText);
        %>

    </body>
</html>

Thanks in advance,

yuvi

[musthafa.aj]

sorry , i can't get your points..

i think you need DHTML ie,innerHtml to be appeared when you select particular value from the drop down list is it?

please clarify about what you print as textbox..

[yuvi2288]

Hi musthafa,

first thanks for ur reply.

the text fields that I have to print is mentioned in Dynamic_form.jsp. To print I used the variable responseText.
hope you will find that.

Again thanks,

yuvi

[musthafa.aj]

so you need to print responseText ...

rseponseText is a string as you declared..

but you need it as TextBox is it?

[yuvi2288]

ya, textbox along with the field name