Link to home
Start Free TrialLog in
Avatar of dmalovich
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,month,day,endyear,endmonth,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.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
 
xmlhttp.open("POST","test.php?s="+symbol+"&y="+year+"&m="+month+"&d="+day+"&ey="+endyear+"&em="+endmonth+"&ed="+endday+"&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:#e6EEEE; 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:#e6EEEE; text-align:left;'>Start Date:</td>
            <td>
            <select name='month'>
                  <option>June</option>
                  <option value='January'>January</option>
                  <option value='February'>February</option>
                  <option value='March'>March</option>
                              </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:#e6EEEE; text-align:left;'>End Date:</td>
            <td>
            <select name='endmonth'>
            <option>$list[1]</option>
                  <option value='January'>January</option>
                  <option value='February'>February</option>
                  <option value='March'>March</option>
                              </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,endyear.value,endmonth.value,endday.value) \">Get Answer</button>      </td>

   </table>
   </form>";
   
print $html;
ASKER CERTIFIED SOLUTION
Avatar of BuggyCoder
BuggyCoder
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of dmalovich
dmalovich

ASKER

Perfect thanks....