Solved

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

Posted on 2012-03-26
2
288 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hello World !, Thanks : My Sincere thanks to @Michael Male who encouraged me to write an article on this in my  blog (http://scribblejava.wordpress.com). Introduction:       There are several technical issues a developer may face in his…
There is basically two types of AJAX request in mootools. Request  and Request.HTML Request: Request is the basic XHR request class in MooTools. While not extremely useful on its own, it provides the basic functionality for both Request.HTM…
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

786 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