Запуск кода JavaScript с отправкой HTML-формы - PullRequest
Новая
       11

Запуск кода JavaScript с отправкой HTML-формы

0 голосов
/ 22 октября 2009

Эй, я использую html-форму, которая используется для входа людей на мой сайт, я создаю его, чтобы он использовал AJAX (jQuery), но у меня возникли некоторые проблемы.

Вот код JavaScript: 

function validateLoginDetails() {
    $('[name=loginUser]').click(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
    });
}

Вот HTML-форма: 

<form id="formLogin" name="loginUser" method="post">
    Username<br /><input id="username" name="username" type="text" maxlength="30" style="width:160px; border:solid 1px #444444;" /><br /><br />
    Password<br /><input id="password" name="password" type="password" maxlength="50" style="width:160px; border:solid 1px #444444;" /><br /><br />
    <input id="submit" type="submit" value="Play" style="width:100px; background:#FFFFFF; border:solid 1px #444444;" />
</form>

Проблема в том, что когда я отправляю форму, она запускает код, но затем возвращается к тому, как это было раньше, это может звучать странно, но я могу сказать, потому что я вижу, как оно изменяет размер div, а затем сразу после возврата его оригинальный размер.

Есть идеи?

РЕДАКТИРОВАТЬ: Если я, например, запускаю код с приведенной ниже ссылкой, то он работает нормально. 

<a href="#" name="loginUser">Clicky</a>

Ответы [ 4 ]

4 голосов
/ 22 октября 2009

Вам необходимо вернуть false из вашего обработчика, чтобы он не выполнял фактическую отправку формы после выполнения вызова AJAX.

Вот что я бы сделал. 

$(function() {
     $('#formLogin').submit( function() {
         $('#mainWrap').css( { width: '600px', height: '200px' });
         $.post( 'modules/web/loginForm.php',
                 $(this).serialize(),
                 function(data) {
                     $('#interfaceScreen').html(data);
                 }
         );
         return false;
     });
});

Обратите внимание, что я использую сообщение, чтобы убедиться, что URL-адрес (включая имя пользователя и пароль) не отображается в веб-журналах. Я также предполагаю, что страница, содержащая форму, была загружена через https и, таким образом, пост также будет защищен.

0 голосов
/ 22 октября 2009

Если вы имеете дело с отправкой формы, вам действительно следует выбрать обработчик события .form (), а не обработчик события .click (). В первом случае, если форма отправляется с помощью любых других методов, ваши проверки по-прежнему будут выполняться, тогда как щелчок зависит от того, какой элемент запускает действие. Вам также нужно будет вернуть false или warnDefault () в этом событии, чтобы ваша функция действительно работала правильно.

Другая вещь (и это может быть незначительным / неважным на основе предоставленной вами выборки кода) заключается в том, что вы связываете этот обработчик событий с функцией, которая должна вызываться - почему бы не загрузить его в готовый документ, как так (см. ниже)?

Я бы лично переделал твой код следующим образом: 

$(document).ready(function() {
    $('#formLogin').submit(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
        return false;
    });
});
0 голосов
/ 22 октября 2009

Во-первых, вы подтвердили, что ваш файл .php возвращает содержимое, а не ошибку? Если вы вставляете контент (с $load), вы не должны запускать команды CSS на div, пока ожидаемый контент (от загрузки) не будет успешно возвращен, например, использовать обратный вызов. Кроме того, я бы предложил использовать .submit(), функцию, специфичную для формы, с прямой ссылкой на тег формы и / или id для ускорения процесса (не делая поиск в jquery так много вещей в DOM). 

< style >

.loadReg{ width:[yourBeginWidth]; height:[yourBeginHeight];}

.loadSuccess{ width:600px; height:200px;}

< / style >

function validateLoginDetails() {
  $('#formLogin').submit(function() {
    // using load(url,{data:toPOST},callback(if successful));

    $("#interfaceScreen").load("modules/web/loginForm.php?",
    {"username": encodeURIComponent(username), "password": encodeURIComponent(password)},
    function(){$("#mainWrap").toggleClass('loadSuccess');} 
    );// end load

  });// end submit

  return false;
}

Это могло бы быть еще более эффективным и менее навязчивым, но хотелось оставить его узнаваемым. Другие парни правы ... если ваш Div возвращается к своему первоначальному размеру ... это потому, что странице разрешено перезагружаться ... в этом случае ваша начальная ширина / высота DIV применяется браузером ... поскольку ваша альтернативная ширина / высота применяется только jquery onsubmit.

Подведем итог:

  1. назначить отправку события для формы напрямую
  2. использование $load встроенная возможность передачи пар значений - это объект {name:val}
  3. перевести CSS в ненавязчивое состояние и скрыться в коде
  4. вызвать CSS в случае успеха
  5. остановка загрузки страницы и перезагрузки дисплея
0 голосов
/ 22 октября 2009

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

$('[name=loginUser]').click(function() {
    //do stuff
    return false;
});

or

$('[name=loginUser]').click(function(e) {
    e.cancel();
});
...