I am using a button to submit a form, not a submit button. However, my problem is that I when I press enter, the form does not not submit, so instead i actually have to click the submit button, which can be inconvenient. I am wondering how I can use a button the submit my from without having the page refresh and when I press enter, also have the form submit. I feel like it is a very easy fix that I just can not find. Here is the URL to the page on which the problem is occurring. http://www.pearlsquirrel.com/register.php
Here is the code to register.php
<div id="centered3">
<h1><div align='center' style="color:white;">Join PearlSquirrel</align></h1>
<h4><div id='response'></div></h4>
<script language='javascript' type='text/javascript'>
function ajaxregister(){
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try{
ajaxRequest = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){
// Something went wrong
alert('Your browser broke!');
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('response');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var repeatpassword = document.getElementById('repeatpassword').value;
var queryString = '?username=' + username + '&password=' + password + '&repeatpassword=' + repeatpassword;
ajaxRequest.open('GET', 'ajaxregister.php' + queryString, true);
ajaxRequest.send(null);
}
</script>
<form method='GET'>
<table>
<tr>
<td>
Choose a username:
</td>
<td>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
$('#username').keyup(username_check);
});
function username_check(){
var username = $('#username').val();
if(username == "" || username.length < 4){
$('#username').css('border', '3px #CCC solid');
$('#tick').hide();
}else{
jQuery.ajax({
type: "POST",
url: "check.php",
data: 'username='+ username,
cache: false,
success: function(response){
if(response == 1){
$('#username').css('border', '3px #C33 solid');
$('#tick').hide();
$('#cross').fadeIn();
}else{
$('#username').css('border', '3px #090 solid');
$('#cross').hide();
$('#tick').fadeIn();
}
}
});
}
}
</script>
</head>
<script>
function nospaces(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode == 32)
return false;
return true;
}
</script><body>
<input name="username" id="username" type="text" style="height:30px; width:212px;" value='<?php echo $username; ?>' onkeypress="return nospaces(event)"/>
<img id="tick" src="tick.png" width="16" height="16"/>
<img id="cross" src="cross.png" width="16" height="16"/>
</body>
</html>
</td>
</tr>
<tr>
<td>
Choose a password:
</td>
<td>
<input type='password' name='password' id='password' style="height: 30px; width:220px;" >
</td>
</tr>
<tr>
<td>
Repeat your password:
</td>
<td>
<input type='password' name='repeatpassword' id='repeatpassword' style="height: 30px; width:220px;" >
</td>
</tr>
<tr>
<td>
</td>
<td>
By registering, you agree to the<br><a href="termsofservice.php">terms of service</a> & <a href="privacypolicy.php">privacy policy</a>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type='button' name='submit' value='Register' class='registerbutton' onclick='ajaxregister()'>
<div id="msg"></div>
</td>
</tr>
</table>
<p>
There is the block of code for that part of the page. Any help would be greatly appreciated. Thanks!
You gotta add onKeyPress handlers for input fields and check the keyCode: if it is 13 (Enter), execute Submit button handler.