Home/ Questions/Q 7421299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T08:23:06+00:00

I am autofilling second textbox based on first textbox in auto.jsp, similarly i want

  • 0

I am autofilling second textbox based on first textbox in auto.jsp, similarly i want to autofill a combobox, how can i do it? that is autofill second combo box based on first combo box selection.
——auto.jsp——-

<script language="javascript" type="text/javascript">  
    var xmlHttp  
    var xmlHttp
    function showState(str){ 
        if (typeof XMLHttpRequest != "undefined"){
            xmlHttp= new XMLHttpRequest();
        }
        else if (window.ActiveXObject){
            xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xmlHttp==null){
            alert ("Browser does not support XMLHTTP Request")
            return
        } 
        var url="state.jsp";
        url += "?count=" +document.getElementById("textbox1").value;//passing first textbox value and displaying in textbox2 ID
        xmlHttp.onreadystatechange = stateChange;
        xmlHttp.open("GET", url, true);
        xmlHttp.send(null);
    }
    function stateChange(){   
        if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){   
            document.getElementById("textbox2").value = xmlHttp.responseText;    
        }   
    }   
</script>  
 <body>  
 <input id="textbox1" type="text" name="name" onkeyup="showState(this.value)"/> 
<input id="textbox2" type="text" name="secondVal" />// here i am displaying first textbox value
</body>

——–state.jsp———–

<%
String firsttextbox=request.getParameter("count");//Got first textbox value
out.println(firsttextbox);// setting it in second text box value by document.getElementById("textbox2").value = xmlHttp.responseText; 
%>

Same thing i want to do when a drop down is selected from first combo box, then an event will be fired to state.jsp there by enabling second combo box in auto.jsp, how can i achieve it?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can simplify your existing code a lot if you use jQuery – which I assume you do from the way you tagged your question. The following would replace all of the code you showed, plus you wouldn’t need the inline onkeyup in your html:

    $(document).ready(function() {
   $("#textbox1").keyup(function() {
      $.get('state.jsp', {count : this.value}, function(responseData) {
         $("#textbox2").val(responseData);
      });
   });
});

    Where $.get() is one of jQuery’s simple Ajax methods. It passes the data from the second parameter to the url in the first parameter, and when a response comes back it calls the function in the third parameter (which is kind of equivalent to your stateChange() function except jQuery tests the state for you and only calls the function when ready).

    (By the way, I wouldn’t recommend a new Ajax request on every keyup. Maybe do it on blur, or at least use a timeout mechanism to only do an event when the user has stopped typing for, say, 400ms.)

    When you say “autofill second combo box based on first combo box selection” do you mean set the list of available options depending on the value selected in the first combo? Assuming you do you can use a technique similar to the above:

    $("#combo1,#combo2,#combo3").change(function() {
   var associatedCombo = $(this).attr('data-associated');
       requestData = {};
   requestData[this.id] = $(this).val();
   $.get('combo.jsp', requestData, function(responseData) {
      $("#" + associatedCombo).replaceWith(responseData);
   });
});

<select id="combo1" data-associated="combo4">

    Where 'combo.jsp' would process the ‘combo1Val’ request parameter and return the appropriate data. If you use the .replaceWith() method it would need to return the HTML for the filled combo something like this:

    <select id="combo2" name="combo2">
   <option value="1">One</option>
   ...
</select>

    Because the entire existing combo would be replaced with the new one. Of course there are lots of other approaches, e.g., returning just the options, or returning JSON and using it to create the options one by one.

    • 0