dmalovich
asked on
How to submit form when enter is pressed using ajax request instead of button
I have included below my ajax function call and my html form. Right now it submits the form when button is pressed but how can I submit the form with the enter key instead?
function loadXMLDoc(symbol,year,mon th,day,end year,endmo nth,endday )
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.X MLHTTP");
}
xmlhttp.onreadystatechange =function( )
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("m yDiv").inn erHTML=xml http.respo nseText;
}
}
xmlhttp.open("POST","test. php?s="+sy mbol+"&y=" +year+"&m= "+month+"& d="+day+"& ey="+endye ar+"&em="+ endmonth+" &ed="+endd ay+"&date= "+new Date().getTime(),true);
xmlhttp.send();
}
This is the form:
<form action="" >
<?php
$html = " ";
$html .= " <table style='text-align:center; font-size:14px; width:500px;' id='tablesorter' class='tablesorter' border='1' cellpadding='0' cellspacing=''>
<tr style='width:200px;'>
<td style='background-color:#e 6EEEE; text-align:left'>Enter Symbol:</td>
<td><input height='30' size=35 name='symbol'></input></td >
</tr>
<tr style='width:200px;'>
<td style='background-color:#e 6EEEE; text-align:left;'>Start Date:</td>
<td>
<select name='month'>
<option>June</option>
<option value='January'>January</o ption>
<option value='February'>February< /option>
<option value='March'>March</optio n>
</select>
<select name='day'>
<option>15</option>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select name='year'>
<option>1970</option>
<option value='2012'>2012</option>
<option value='2011'>2011</option>
<option value='2010'>2010</option>
</select></td></tr>
</tr>
<tr>
<td style='background-color:#e 6EEEE; text-align:left;'>End Date:</td>
<td>
<select name='endmonth'>
<option>$list[1]</option>
<option value='January'>January</o ption>
<option value='February'>February< /option>
<option value='March'>March</optio n>
</select>
<select name='endday'>
<option>$list[2]</option>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select name='endyear'>
<option>$list[0]</option>
<option value='2012'>2012</option>
<option value='2011'>2011</option>
<option value='2010'>2010</option>
</select></td>
</tr>
</table>
<div id=\"myDiv\">Replace this text</div>
<table><tr>
<td><button type=\"button\" onclick=\" loadXMLDoc(symbol.value, year.value,month.value,day .value,end year.value ,endmonth. value,endd ay.value) \">Get Answer</button> </td>
</table>
</form>";
print $html;
function loadXMLDoc(symbol,year,mon
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.X
}
xmlhttp.onreadystatechange
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("m
}
}
xmlhttp.open("POST","test.
xmlhttp.send();
}
This is the form:
<form action="" >
<?php
$html = " ";
$html .= " <table style='text-align:center; font-size:14px; width:500px;' id='tablesorter' class='tablesorter' border='1' cellpadding='0' cellspacing=''>
<tr style='width:200px;'>
<td style='background-color:#e
<td><input height='30' size=35 name='symbol'></input></td
</tr>
<tr style='width:200px;'>
<td style='background-color:#e
<td>
<select name='month'>
<option>June</option>
<option value='January'>January</o
<option value='February'>February<
<option value='March'>March</optio
</select>
<select name='day'>
<option>15</option>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select name='year'>
<option>1970</option>
<option value='2012'>2012</option>
<option value='2011'>2011</option>
<option value='2010'>2010</option>
</select></td></tr>
</tr>
<tr>
<td style='background-color:#e
<td>
<select name='endmonth'>
<option>$list[1]</option>
<option value='January'>January</o
<option value='February'>February<
<option value='March'>March</optio
</select>
<select name='endday'>
<option>$list[2]</option>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select name='endyear'>
<option>$list[0]</option>
<option value='2012'>2012</option>
<option value='2011'>2011</option>
<option value='2010'>2010</option>
</select></td>
</tr>
</table>
<div id=\"myDiv\">Replace this text</div>
<table><tr>
<td><button type=\"button\" onclick=\" loadXMLDoc(symbol.value, year.value,month.value,day
</table>
</form>";
print $html;
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER