我需要帮助提交表格。我不想刷新页面，我不知道如何实现这一点
我使用按钮来提交表单，而不是提交按钮。但是，我的问题是，当我按 Enter 时，表单不会提交，所以我实际上必须单击提交按钮，这可能很不方便。我想知道如何使用一个按钮来提交我的表单而无需刷新页面，并且当我按 Enter 时，也可以提交表单。我觉得这是一个非常简单的修复，但我找不到。这是出现问题的页面的 URL。 http://www.pearlsquirrel.com/register.php
这是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>
该页面的该部分有代码块。任何帮助将不胜感激。谢谢！
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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您必须为输入字段添加 onKeyPress 处理程序并检查 keyCode：如果是 13 (Enter)，则执行“提交”按钮处理程序。
You gotta add onKeyPress handlers for input fields and check the keyCode: if it is 13 (Enter), execute Submit button handler.