SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question JQuery ajax drop down

    Hi,

    I have two drop down and on change of dropdown1 ,dropdown2 value changes.

    I have solution for this using ajax and I am looking for JQuery solution.

    Following is the example of Ajax drop down call.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Multiple Response in Ajax</title> 
    
    <script> 
    var xmlhttp; 
    
    function getDetails() 
    { 
    	  xmlhttp=GetXmlHttpObject(); 
    	  if (xmlhttp==null) 
    	  { 
    		    alert ("Your browser does not support Ajax HTTP"); 
    		    return; 
    	  } 
    	  var url="getDetails.php"; 
    	  xmlhttp.onreadystatechange=getOutput; 
    	  xmlhttp.open("GET",url,true); 
    	  //xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    	  //xmlhttp.setRequestHeader("Content-Type", "text/html;charset=UTF-8"); 
    	  xmlhttp.send(null); 
    } 
    function getOutput() 
    { 
    	  if (xmlhttp.readyState==4) 
    	  { 
    		    alert(xmlhttp.responseText); 
    		    //document.frmMultipleResponse.txtNo.value = xmlhttp.responseText; 
    		    //document.frmMultipleResponse.txtName.value = xmlhttp.responseText; 
    		    return; 
    	  } 
    } 
    function GetXmlHttpObject() 
    { 
    	  if (window.XMLHttpRequest) 
    	  {  
    	     return new XMLHttpRequest(); 
    	  } 
    	  if (window.ActiveXObject) 
    	  { 
    	    return new ActiveXObject("Microsoft.XMLHTTP"); 
    	  } 
    	  return null; 
    }	
    </script> 
    
    </head> 
    <body> 
    
    <form action="" method="post" name="frmMultipleResponse"> 
    <table width="100%" border="1"> 
      <tr> 
    	  <td> </td> 
    	  <td><input type="text" name="txtName" id="txtName" value="" /></td> 
      </tr> 
      <tr> 
    	  <td> </td> 
    	  <td><input type="text" name="txtNo" id="txtNo" value="" /></td> 
      </tr> 
      <tr> 
    	  <td> </td> 
    	  <td><a href="#" onclick="getDetails();">Get Details</a></td> 
      </tr> 
    </table> 
    </form>
    Code:
    <?php 
    
    	  echo "Name"; 
    
    ?>
    Any Idea?

    -Thanks
    Zohaib.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by zohaib82 View Post
    I have solution for this using ajax and I am looking for JQuery solution.
    That looks to be fairly straight forward. The following would achieve the same job well.
    I've updated the form so that it uses identifiers to attach events to the form, and to access the form contents, which is a best-practice manner to perform things.

    HTML Code:
    <form id="frmMultipleResponse" action="" method="post"> 
    <table width="100%" border="1"> 
      <tr> 
          <td> </td> 
          <td><input type="text" name="txtName" id="txtName" value="" /></td> 
      </tr> 
      <tr> 
          <td> </td> 
          <td><input type="text" name="txtNo" id="txtNo" value="" /></td> 
      </tr> 
      <tr> 
          <td> </td> 
          <td><a id="getdetails" href="#">Get Details</a></td> 
      </tr> 
    </table> 
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="script.js"></script>
    script.js
    Code javascript:
    function updateForm(data) {
        var $form = $('#frmMultipleResponse');
        $('[name="txtName"]', $form).val(data);
        $('[name="txtNo"]', $form).val(data);
    }
     
    function getDetails() {
        $.ajax({
            url: 'getDetails.php'
        }).done(updateForm);
    }
     
    $('#getdetails').on('click', getDetails);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi Paul,

    Thanks for update.

    I have following code with drop down and want to make it working.

    On change of drop down ,other drop down values are not updating.

    Code:
    <%@ page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" errorPage="" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>JQuery Ajax</title>
    </head>
    <body>
    <form id="frmMultipleResponse" action="" method="post"> 
    <table width="100%" border="1"> 
      <tr> 
          <td> </td> 
          <td><SELECT NAME="category" tabindex="2" onchange="getdetails(this.value)" >
    		<OPTION value="News">News</OPTION>
    		<OPTION value="Entertainment">Entertainment</OPTION>
    		<OPTION value="Special Offers">Special Offers</OPTION>
    		<OPTION value="Events">Events</OPTION>
    		<OPTION value="Celebrity">Celebrity</OPTION>
    		<OPTION value="Movies">Movies</OPTION>
    		<OPTION value="TV">TV</OPTION>
    		<OPTION value="Music">Music</OPTION>
    		<OPTION value="Light News">Light News</OPTION>
    		<OPTION value="Lifestyle">Lifestyle</OPTION>
    		<OPTION value="Local events">Local events</OPTION>
    		<OPTION value="Incidents/accidents">Incidents/accidents</OPTION>
    		<OPTION value="Travel">Travel</OPTION>
    		<OPTION value="Health">Health</OPTION>
    		<OPTION value="Culture">Culture</OPTION>
    		<OPTION value="Economy/business">Economy/business</OPTION>
    	</SELECT></td> 
      </tr> 
      <tr> 
          <td> </td> 
          <td><select name="country" id="country"></select></td> 
      </tr> 
      
    </table> 
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
    function updateForm(data) {
        var $form = $('#frmMultipleResponse');
       // $('[name="txtName"]', $form).val(data);
        $('[name="country"]', $form).val(data);
    }
     
    function getDetails(value) {
        $.ajax({
            url: "getDetails.jsp?value="+value;
        }).done(updateForm);
    }
     
    $('#getdetails').on('click', getDetails);
    </script>
    </body>
    </html>


    Code:
    <%
    
    //out.println("Name");
    
    %>
    <SELECT NAME="country" tabindex="3"> 
    	<OPTION value=""></OPTION>
    	<OPTION value="United States">United States</OPTION>
    	<OPTION value="UK">UK</OPTION>
    	<OPTION value="Germany">Germany</OPTION>
    	<OPTION value="Australia">Australia</OPTION>
    	<OPTION value="UAE">UAE</OPTION>
    	<OPTION value="Japan">Japan</OPTION>
    	<OPTION value="China">China</OPTION>
    </SELECT>
    Any idea?

    -Thanks
    Zohaib.

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Hi,

    I got it working using following.

    Code:
    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery Ajax</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
      $('#select').change(function() {
        var option = $(this).val();
    	
        $.get('select.jsp', {select:option}, function(data) {
          $('#result').html(data).hide().fadeIn(0);
    	  document.getElementById("result3").style.display="none";
    	  $('#result').html(data).hide().fadeIn(0);
        });
      });
    });
    
    </script>
    </head>
    
    <body>
    <select name="select" id="select" style="width:100px;">
    	<option value="">Select</option>
    	<option value="25">Option 1</option>
    	<option value="12">Option 2</option>
    	<option value="20">Option 3</option>
    	<option value="17">Option 4</option>
    	<option value="29">Option 5</option>
    </select>
    <div id="result"></div>
    <select name="result3" id="result3" style="width:100px;">
    </select>
    </body>
    </html>
    Code:
    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
    <%@ page import="java.sql.*"%>
    <%@ page import="java.util.*"%>
    <%@ page import="java.util.Random.*"%>
    <%
    	String data = "";
    	int id=0;
    	int parentid=0;
    	String title="";	
    	int select = 0;
    	//option = 12;
    	select = Integer.parseInt(request.getParameter("select"));
    	
    	try
    	{
    		PreparedStatement stat= conn.prepareStatement("SELECT id,parentid,title FROM mytable WHERE parentid ="+select+" ");
    		rs = stat.executeQuery();
    		
    		data += "<SELECT NAME='category' tabindex='2' style='width:100px;'>";
    		
    		while(rs.next())
    		{
    			id = rs.getInt(1);
    			parentid = rs.getInt(2);
    			title = rs.getString(3);
    			
    			data += "<OPTION value="+title+">"+title+"</OPTION> ";
    		}
    		data += "</SELECT>";	
    	}	
    	catch(Exception E)
    	{
    		out.println("Error "+E);
    	}
    	finally
    	{
    		//rs.close();
    		//conn.close();
    	}
    	
    	out.println(data);
    	
    %>
    -Thanks
    Zohaib.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •