Solved

How to submit form when enter is pressed using ajax request instead of button

Posted on 2012-03-26
2
270 Views
Last Modified: 2012-03-27
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;
0
Comment
Question by:dmalovich
2 Comments
 
LVL 20

Accepted Solution

by:
BuggyCoder earned 500 total points
ID: 37770640
Fetched from here
<input name="TextBox1" type="text" id="TextBox1" onkeypress="return clickButton(event,'Button1')"  />

function clickButton(e, buttonid){
      var evt = e ? e : window.event;
      var bt = document.getElementById(buttonid);
      if (bt){
          if (evt.keyCode == 13){
                bt.click();
                return false;
          }
      }
}

Open in new window

0
 

Author Closing Comment

by:dmalovich
ID: 37770989
Perfect thanks....
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

ASP.NET AJAX callbacks to web service are becoming very popular and unavoidable these days. The feel that the user gets when only a part of the page is updated without even hindering the UI is the advantage that the callbacks offer. The wait for the…
Today I am discussing AJAX problems in IE7 and I bet this will helps many guys out here who have problems with AJAX work. Lets start with the discovery of problem and then we will talk about its different solutions. My last two projects included …
This video discusses moving either the default database or any database to a new volume.
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now