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

Question

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

Плагин формы имеет свойство, называемое 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, и ничего не записывалось из моего beforeSubmi t. Кажется, что плагин ajaxForm не применяется к форме вообще, но я не понимаю, почему. Может ли кто-нибудь помочь в этом?

Answer 1

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

<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> 

Answer 2

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

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

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