Изменение данных формы перед отправкой - PullRequest
Новая
       22

Изменение данных формы перед отправкой

4 голосов
/ 05 декабря 2008

Я использую jQuery вместе с плагином формы , и я хотел бы перехватить данные формы перед отправкой и внести изменения.

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

Вот разметка для формы (некоторые детали стиля пропущены): 

<form id="form1">
    <fieldset id="login">
        <legend>Please Log In</legend>
        <label for="txtLogin">Login</label>
        <input id="txtLogin" type="text" />
        <label for="txtPassword">Password</label>
        <input id="txtPassword" type="password" />
        <button type="submit" id="btnLogin">Log In</button>
    </fieldset>
</form>

А вот мой javascript: 

$(document).ready(function() {
    var options = {
        method: 'post',
        url: 'Login.aspx',
        beforeSubmit: function(formData, form, options) {
            $.each(formData, function() { log.info(this.value); });
            return true;
        }
    };
    $('form#form1').ajaxForm(options);
});

(log.info () из библиотеки отладчика Blackbird , которую я использую)

Когда я нажимаю кнопку отправки, а не указанный мной глагол POST, вместо него используется GET, и из моей функции beforeSubmit ничего не регистрируется. Кажется, что плагин ajaxForm вообще не применяется к форме, но я не понимаю, почему. Кто-нибудь может помочь с этим?

Ответы [ 2 ]

3 голосов
/ 05 декабря 2008

Я выполнил следующий код через firebug, и он, кажется, работает как объявлено, но переменная formData в обратном вызове beforeSubmit пуста, потому что вы не установили атрибут имени в текстовых полях. 

<script type="text/javascript">
  $(document).ready(function() {
    var options = {
      beforeSubmit: showData
    };
    $('form#form1').ajaxForm(options);
  });
  function showData(formData, form, options) {
    //var formData = [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ];
    $.each(formData, function(i, obj) { log.info(obj.name + " | " + obj.value); });
    return true;
  }
</script>

<form id="form1" action="Login.aspx" method="post">
<fieldset id="login">
    <legend>Please Log In</legend>
    <label for="txtLogin">Login</label>
    <input id="txtLogin" type="text" name="User" />
    <label for="txtPassword">Password</label>
    <input id="txtPassword" type="password" name="Pass" />
    <button type="submit" id="btnLogin">Log In</button>
</fieldset>
</form>
1 голос
/ 05 декабря 2008

Для начала, согласно этому API , ваш объект параметров должен использовать type, а не method, или просто указать атрибут метода в форме в HTML.

(сейчас я добавлю пару небольших стилистических заметок; вы можете перестать читать здесь, если хотите):

  1. Вы можете заменить $(document).ready(function... просто $(function....
  2. $.each(formData, function... выглядит более естественно, как $(formData).each(function...
...