Modifying form data before submission

Question

I'm using jQuery in conjunction with the form plugin and I'd like to intercept the form data before submission and make changes.

The form plugin has a property called beforeSubmit that should do this, but I seem to be having trouble getting the function I specify to run.

Here's the markup for the form (some style details omitted):

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

And here's the javascript that I have so far:

$(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() is from the Blackbird debugger library I'm using)

When I click the submit button, rather than the POST verb I specified it uses a GET instead, and nothing is logged from my beforeSubmit function. It seems that the ajaxForm plugin is not being applied to the form at all, but I don't see why. Can anybody help with this?

Answer 1

I ran the following code through firebug and it appears to work as advertised, but the formData variable in the beforeSubmit callback is empty because you didn't set the name attribute on the text boxes.

<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

For starters, according to this API, your options object should use type and not method, or just specify the method attribute on the form in the HTML.

(now I'll throw in a couple minor stylistic notes; you can stop reading here if you want):

1. You can replace $(document).ready(function... with just $(function....
2. $.each(formData, function... looks more natural as $(formData).each(function...