JQuery ajax drop down

JavaScript
1

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](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> 

<?php

	  echo "Name";

?>

Any Idea?

-Thanks
Zohaib.

2

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.


<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


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);
3

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.

<%@ 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>

<%

//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

Hi,

I got it working using following.

<%@ 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>

<%@ 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.