javascript - Modifying form data before submission - Stack Overflow

admin管理员组

文章数量:1022670

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?

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?

• javascript
• jquery
• jquery-forms-plugin

Share Improve this question Follow asked Dec 5, 2008 at 16:44 Adam LassekAdam Lassek 35.5k1414 gold badges9393 silver badges109109 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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>

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

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?

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?

• javascript
• jquery
• jquery-forms-plugin

Share Improve this question Follow asked Dec 5, 2008 at 16:44 Adam LassekAdam Lassek 35.5k1414 gold badges9393 silver badges109109 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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>

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

本文标签： javascriptModifying form data before submissionStack Overflow