Блог

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

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

#button

#кнопка

Вопрос:

Я использую кнопку для отправки формы, а не кнопку отправки. Однако моя проблема в том, что когда я нажимаю 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   'amp;password='   password       'amp;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> amp; <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 для полей ввода и проверить код ключа: если он равен 13 (введите), выполните обработчик кнопки отправки.

Комментарии:

1. Хм, я понятия не имею, как это сделать… Я n00b в javascript. Все, что вы там видите, было изучено из онлайн-учебников. Так что, если бы вы могли уточнить, это было бы здорово. Спасибо за помощь!

2. фрагмент моего кода: onKeyUp=»if (event.keyCode == 13) document.getElementById(‘loginbtn’).click();»

3. вы должны добавить его в поля ввода, необходимые для обработки клавиши ввода. и замените loginbtn идентификатором вашей кнопки отправки

4. Спасибо! Я реализую это как можно скорее и посмотрю, что я могу с этим сделать.

5. Это работает абсолютно идеально. Большое спасибо, чувак, твоя помощь очень ценится!!!!