displaying ajax response in html page without submit buttons

Question

I have two questions

First Question:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="" />
<title>List Companies</title>

<script language="JavaScript" type="text/javascript">

 function ajax_post(){
var databox =document.getElementById("status");
    var hr = new XMLHttpRequest();
    var url = "yourdomain/List_ajax.php";
var f = document.getElementById("format").value;
    var vars = "format="+f;
    hr.open("POST", url, true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var return_data = JSON.parse(hr.responseText);
        var x="<table border='1'><tr><td style='width:80px'><center><b>Company ID</center></b></td><td style='width:80px'><center><b>Company Name</center></b></td><td style='width:80px'><center><b>Manager Name</center></b></td><td style='width:80px'><center><b>Manager Phone</center></b></td></tr>";
        for(var o in return_data){
            if(return_data[o].company_id){
                x +="<tr><td style='width:80px'>"+return_data[o].company_id+"</td><td style='width:80px'>"+return_data[o].company_name+"</td><td style='width:80px'>"+return_data[o].manager_name+"</td><td style='width:80px'>"+return_data[o].manager_phone+"</td></tr>";
            }//end if            
        }//end for
        x += "</table>";
        databox.innerHTML=x;
    }//end if
}//end function
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = '<center> <img src="http://www.slimspresents.com/wp-content/themes/simplicity/images/indicator.gif" alt="wait"> </center>';
}
</script>
</head>

<body>


<table width="380px">

<tr>
<td colspan="2" style="text-align:center">
<h3>List of Companies</h3> 
</td>
</tr>

<tr>
<td colspan="2" style="text-align:center">
<input id="format" name="format" type="hidden" value="json"/>
<input name="myBtn" type="submit" value="List Companies" onClick="javascript:ajax_post();">
</td> 
</tr>

</table>

<br /><br />
<div id="status"></div>

</body>
</html>

Now when the user open the page has to click on the button to display "List of Companies" in a Table >>> I try to display the ajax without buttons directly when the user open the page displaying the "List of Companies" in a Table directly by this code

 <script type="text/javascript">
 ajax_post();
 </script>

but does not work I want solution if it possible

Second Question:

I have a form has input fields with submit button like This Login page :

<table width="350px">

<tr>
<td colspan="2" style="text-align:center">
<h3>Login </h3> 
    <input id="format" name="format" type="hidden" value="json"/>
</td>
</tr>

<tr>
<td valign="top">
   <label for="username">Username *</label>
</td>
<td valign="top">
   <input id="username" name="username" type="text" maxlength="50" size="25"/>
</td>
</tr>

<tr>
<td valign="top">
  <label for="password">Password *</label>
</td>
<td valign="top">
  <input id="password" name="password" type="password" maxlength="50" size="25" />
</td>
</tr>

<tr>
<td colspan="2" style="text-align:center">
  <input name="myBtn" type="submit" value="Login" onClick="javascript:ajax_post();">
</td> 
</tr>

</table>

Now when the user fill the fields has to click on Login button to submit the data. The problem is when the user fill username filed and password filed and after that pressing on Enter in the Keyboard that does not submit the data >>>> I want when the user press on Enter on the Keyboard directly submit the data that means the user does not has to click on Login button that is better for usability.

Set the `ajax_post` function as the event handler function for the `onload` property of the `window` object. — Akinkunle Allen, Apr 15 '14 at 21:31
This should start you off with your second question http://stackoverflow.com/questions/4416505/how-to-take-keyboard-input-in-javascript — Scott, Apr 15 '14 at 21:32

score 1 · Answer 1 · answered Apr 15 '14 at 21:33

For your first question, I think what you are looking for is:

<body onload="myFunction()">

This will execute your function, once your element has been loaded.

The enter key is usually bound to a object, but in your instance you don't have one - and even if you did, you don't want a POST or GET to happen. To get around this, simply bind a method to your function that will execute your Ajax call.

<input id="password" name="password" type="password" maxlength="50" size="25" onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()"/>

displaying ajax response in html page without submit buttons

1 Answers1