AJAX with HTML Submit buttons

tayorolls · Jun 1, 2007

Hi,

I have always used AJAX with onChange events of Select Controls, or creating dependent Drop Down Boxes.

Now I am faced with another scenario. Users want a search form. Once they select a value in the Select box, they will enter the search values and then click on the submit button to get the search results.

Can I invoke the AJAx funtion with submit buttons?

Kindly give me suggestions what I should do to implement AJAX with submit buttons.

I am trying a small example first with Northwind.

Here is my code:

Code:

<form name="formSearch" method="post" action="getNorthwind.asp">

<div class="Container">
<label>Search Criteria: </label>
<select name="SearchCriteria" onchange="togDisplay(this.value)">
    <option value="">-  Select  -</option>
    <option value="CompanyName">Company Name</option>
    <option value="ContactName">Contact Name</option>
    <option value="ContactTitle">Contact Title</option>    
</select><br />
<div id="dCompanyName" style="display:none">
<label>Company Name: </label>
<input type="text" name="CompanyName" /><br />
</div>
<div id="dContactName" style="display:none">
<label>Contact Name: </label>
<input type="text" name="ContactName" /><br />
</div>
<div id="dContactTitle" style="display:none">
<label>Contact Title: </label>
<input type="text" name="ContactTitle" /><br />
</div>
<label></label>
<input type="submit" value="    Search    " />
</div>
</form>

Thanks.

Foamcow · Jun 1, 2007

You could use an onsubmit event handler on the form tag.

Code:

<form name="blah" action="nonAjaxScript.php" method="post" onsubmit="ajaxFunction();return false;">

Something like that. Note the use of the nonAjaxScript for non Javascript environments - make user you use the return false; too.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

tayorolls · Jun 1, 2007

Hi,

Thanks for the response.

My form tag is this:

Code:

<form name="formSearch" method="post" action="Northwind.asp" onsubmit="showNorthwind();return false;">

When the user loads the page, the page shows the Search form followed by all the Customer information displayed in a table.

Customer table is as follows:

Code:

<div id="Customers" class="Container2">
<%
sSQL = "Select CompanyName, ContactName, ContactTitle, Address, City, PostalCode from Customers ORDER BY CompanyName"
Set rs = Server.CreateObject("ADODB.Recordset")
rs.Open sSQL, Conn

%>
<table> 
    <tr>
        <th>Company Name</th>
        <th>Contact Name</th>
        <th>Contact Title</th>
        <th>Address</th>
        <th>City/Postal Code</th>
    </tr>
    <%
    If not rs.EOF Then
        Do While Not rs.EOF %>
    <tr>
        <td valign="top"><%=rs("CompanyName")%></td>
        <td valign="top"><%=rs("ContactName")%></td>
        <td valign="top"><%=rs("ContactTitle")%></td>
        <td valign="top"><%=rs("Address")%></td>
        <td valign="top"><%=rs("City")%></td>              
    </tr>
    <%
        rs.MoveNext
        Loop
    End If
    %>
</table>

<%
rs.Close
 %>
</div>

The user then selects the search criteria, then types a value into the respective textbox of the div. On Clicking of the submit button, then the user gets the results in the same div (Customers)where the earlier table was displayed.

I am not going to any other page, I would like to submit the search results in the same page.

How does the AJAX method send the form values through the AJAX method?

My AJAX method is:

Code:

function showNorthwind(str)
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
} 

var url="Northwind.asp"
url=url+"?q="+str
alert(url);
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
alert(xmlHttp.responseText);
document.getElementById("Customers").innerHTML=xmlHttp.responseText 
} 
} 


function GetXmlHttpObject()
{ 
var objXMLHttp=null;
if (window.XMLHttpRequest) //Safari, Mozilla browers
{
	objXMLHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject) //IE browsers
{
	objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}

tayorolls · Jun 4, 2007

Hi,

This is what I did to make this form work with a submit button and AJAX.

The page with the search criteria

Code:

<%@language="VBScript" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL] 
<HTML>
<head>
<title>AJAX and Northwind</title>
<script type="text/javascript">
function togDisplay(argState) {
			argState = String(argState);
			switch (argState) {			
				          
				case "CompanyName" :
					dCompanyName.style.display = "block";
					dContactName.style.display = "none";
					dContactTitle.style.display = "none";				
					break;
				
				case "ContactName" :
					dCompanyName.style.display = "none";
					dContactName.style.display = "block";
					dContactTitle.style.display = "none";					
					break;
					
				case "ContactTitle" :
					dCompanyName.style.display = "none";
					dContactName.style.display = "none";
					dContactTitle.style.display = "block";				
					break;									
					
				default :
					dCompanyName.style.display = "none";
					dContactName.style.display = "none";
					dContactTitle.style.display = "none";	
	}
}

function submitForm(f){   
 if(window.XMLHttpRequest){   
 var xmlReq = new XMLHttpRequest();   
 } else if(window.ActiveXObject) {   
 var xmlReq = new ActiveXObject('Microsoft.XMLHTTP');   
 }   
 var formData = '', elem = '';   
 for(var s=0; s<f.elements.length; s++){   
 elem = f.elements[s];   
 if(formData != ''){   
 formData += '&';   
 }   
 formData += elem.name+"="+elem.value;   
 }   
 xmlReq.onreadystatechange = function(){   
 if(xmlReq.readyState == 4){   
 document.getElementById('Customers').innerHTML = xmlReq.responseText;   
 }   
 }   
 xmlReq.open(f.method, f.action, true);   
 xmlReq.setRequestHeader("Content-Type", "application/x-[URL unfurl="true"]www-form-urlencoded");[/URL]   
 xmlReq.send(formData);   
 return false;   
 }   
</script>

<style type="text/css">
label,input, select {
	display: block;
	width: 150px;
	float: left;
	margin-bottom: 10px;
}

input.submit{
    align: center;
}

label {
	text-align: right;
	width: 150px;
	padding-right: 20px;
}

br {
	clear: left;
}

.Container
{
   position:absolute; 
   top:50px; 
   left:40px; 
   width:400px; 
   height:200px; 
   border:thin solid; 
   border-width: 1px;
   padding-right: 20px;
   padding-left: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #000066;
   border-top: 1px solid #000066;
   border-right: 1px solid #000066;
   border-left: 1px solid #000066;
}

th {	
    font-size:10px;
	font-family:Arial,Verdana,Helvetica,sans-serif;
	color: #FFFFFF;
	border-right: 1px solid #000066;
	border-bottom: 1px solid #000066;
	border-top: 1px solid #000066;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-align: left;
	padding: 6px 6px 6px 12px;
	background: #000066;
}

.Container2
{
   position:absolute; 
   top:300px; 
   left:40px; 
   width:660px; 
   height:200px; 
   
}
</style>
</head>

<body>
    
<form name="formSearch" method="post" action="Northwind1.asp" onsubmit="return submitForm(this)">

<div class="Container">
<label>Search Criteria: </label>
<select name="SearchCriteria" onchange="togDisplay(this.value)">
    <option value="">-  Select  -</option>
    <option value="CompanyName">Company Name</option>
    <option value="ContactName">Contact Name</option>
    <option value="ContactTitle">Contact Title</option>    
</select><br />
<div id="dCompanyName" style="display:none">
<label>Company Name: </label>
<input type="text" name="CompanyName" /><br />
</div>
<div id="dContactName" style="display:none">
<label>Contact Name: </label>
<input type="text" name="ContactName" /><br />
</div>
<div id="dContactTitle" style="display:none">
<label>Contact Title: </label>
<input type="text" name="ContactTitle" /><br />
</div>
<label></label>
<input type="submit" value="    Search    " />
</div>
</form>
<div id="Customers" class="Container2">
<%
Conn = "Provider=SQLOLEDB;Data Source=Renoir;Initial Catalog=Northwind;"
sSQL = "Select CompanyName, ContactName, ContactTitle, Address, City, PostalCode from Customers ORDER BY CompanyName"
Set rs = Server.CreateObject("ADODB.Recordset")
rs.Open sSQL, Conn

%>
<table> 
    <tr>
        <th>Company Name</th>
        <th>Contact Name</th>
        <th>Contact Title</th>
        <th>Address</th>
        <th>City/Postal Code</th>
    </tr>
    <%
    If not rs.EOF Then
        Do While Not rs.EOF %>
    <tr>
        <td valign="top"><%=rs("CompanyName")%></td>
        <td valign="top"><%=rs("ContactName")%></td>
        <td valign="top"><%=rs("ContactTitle")%></td>
        <td valign="top"><%=rs("Address")%></td>
        <td valign="top"><%=rs("City")%></td>              
    </tr>
    <%
        rs.MoveNext
        Loop
    End If
    %>
</table>

<%
rs.Close
 %>
 
</div>
</body>
</html>

Page that displayes in the above div tag "Customer" with the matching results. (Northwind1.asp)

Code:

 <%

Conn = "Provider=SQLOLEDB;Data Source=Renoir;Initial Catalog=Northwind;"
sSQL = "Select CompanyName, ContactName, ContactTitle, Address, City, PostalCode from Customers ORDER BY CompanyName"
Set rs = Server.CreateObject("ADODB.Recordset")
rs.Open sSQL, Conn
%>

<%
sCompanyName = Request.Form("CompanyName")
sContactName = Request.Form("ContactName")
sContactTitle = Request.Form("ContactTitle")

if sCompanyName <> "" Then
    sSQL = "Select CompanyName, ContactName, ContactTitle, Address, City, PostalCode from Customers WHERE CompanyName LIKE '%" & sCompanyName & "%' ORDER BY CompanyName"
    'Response.Write sSQL
End If

if sContactName <> "" Then
    sSQL = "Select CompanyName, ContactName, ContactTitle, Address, City, PostalCode from Customers WHERE ContactName LIKE '%" & sContactName & "%' ORDER BY CompanyName"
    'Response.Write sSQL
End If

if sContactTitle <> "" Then
    sSQL = "Select CompanyName, ContactName, ContactTitle, Address, City, PostalCode from Customers WHERE ContactTitle LIKE '%" & sContactTitle & "%' ORDER BY CompanyName"
    'Response.Write sSQL
End If

Set rsResults = Server.CreateObject("ADODB.Recordset")
rsResults.Open sSQL, Conn

%>
<table> 
    <tr>
        <th>Company Name</th>
        <th>Contact Name</th>
        <th>Contact Title</th>
        <th>Address</th>
        <th>City/Postal Code</th>
    </tr>
    <%
    If not rsResults.EOF Then
        Do While Not rsResults.EOF %>
    <tr>
        <td valign="top"><%=rsResults("CompanyName")%></td>
        <td valign="top"><%=rsResults("ContactName")%></td>
        <td valign="top"><%=rsResults("ContactTitle")%></td>
        <td valign="top"><%=rsResults("Address")%></td>
        <td valign="top"><%=rsResults("City")%></td>              
    </tr>
    <%
        rsResults.MoveNext
        Loop
    End If
    
    rsResults.Close
    rs.Close
    %>
</table>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

AJAX with HTML Submit buttons

tayorolls

MIS

Foamcow

Programmer

tayorolls

MIS

tayorolls

MIS

Similar threads

Part and Inventory Search

Sponsor