Мне нужна помощь при отправке формы. Я не хочу, чтобы страница обновлялась, и я не знаю, как этого добиться

Я использую кнопку для отправки формы, а не кнопку отправки. Однако моя проблема заключается в том, что когда я нажимаю клавишу ввода, форма не отправляется, поэтому вместо этого мне нужно нажать кнопку "Отправить", что может быть неудобно. Мне интересно, как я могу использовать кнопку "Отправить", не обновляя страницу, и когда я нажимаю "Ввод", также можно отправить форму. Я чувствую, что это очень легко исправить, что я просто не могу найти. Вот URL-адрес страницы, на которой возникает проблема. http://www.pearlsquirrel.com/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>

Для этой части страницы есть блок кода. Любая помощь будет принята с благодарностью. Спасибо!

Источник

1 ответ

Решение

Вам нужно добавить обработчики onKeyPress для полей ввода и проверить keyCode: если это 13 (Enter), выполнить обработчик кнопки Submit.

Источник
Другие вопросы по тегам