Question

Form is dynamically loaded via ajax. After form is loaded I calling initialization of my small form plugin.
Serialize works only first time but if form has required fields errors second submit is triggered but serialize gives empty string.
This problem occurs only in Firefox. Works ok in Chrome, IE, Safari

My small Form plugin:

App.Forms = (function (parent, $) {

// Default config
var config = {
    form            : '.ajax-form',
    control         : null,
    successCallback : function () {},
    errorCallback   : function () {}

}, _submitForm = function ($form) {

    console.log('--------------- FORM DATA STRING -----------------');
    console.log($form.serialize());
    console.log('--------------------------------------------------');

    $.ajax({
        type    : $form.attr('method'),
        url     : $form.attr('action'),
        data    : $form.serialize(),
        cache   : false,
        success : function (response) {

            if (config.control === null) {
                $form.hide().html(response).fadeIn(800);

            } else {
                $(config.control).hide().html(response).fadeIn(800);
                //                    console.log(response);
            }

            if ($(response).find('.field-validation-error')) {
                App.Placeholder.init();  // Generate placeholder if browser not support
                config.errorCallback.call();
            } else {
                config.successCallback.call();
            }

        }
    });
};

parent.init = function (options) {

    $.extend(config, options);

    var $form = $(config.form);

    if (!$form.length) {
        return false;
    }

    App.Placeholder.init();  // Generate placeholder if browser not support

    $form.on('click', ':submit', function (e) {
        e.preventDefault();
        _submitForm($form);
    });

    return parent;
};

return parent;  }) (App.Forms || {}, jQuery);

Form:

@using N2Project @model N2Project._Essence.Models.RegisterModel  @using (Html.BeginForm("Register", "LoyaltyLogin", FormMethod.Post, new { @id = "register-form" })) {
<p>
    <span class="error">@ViewBag.Error</span>
    <span class="success">@ViewBag.Success</span>
</p>

<p>
    @Html.TextBoxFor(m=>m.Loyaltycard,new{@placeholder="Card Number", @class="size100"})
    @Html.ValidationMessageFor(m=>m.Loyaltycard)
</p>

<p>
    @Html.TextBoxFor(m=>m.FirstName,new{@placeholder="First Name", @class="size100"})
    @Html.ValidationMessageFor(m=>m.FirstName)
</p>

<p>
    @Html.TextBoxFor(m=>m.LastName,new{@placeholder="Last Name", @class="size100"})
    @Html.ValidationMessageFor(m=>m.LastName)
</p>

<p>
    @Html.TextBoxFor(m=>m.DOB,new{@placeholder="Date of birth", @class="size100", @id="dob"})
    @Html.ValidationMessageFor(m=>m.DOB)
</p>

<p>
    @Html.TextBoxFor(m=>m.Email,new{@placeholder="Email", @class="size100"})
    @Html.ValidationMessageFor(m=>m.Email)
</p>

<p>
    @Html.PasswordFor(m=>m.Password,new{@placeholder="Password", @class="size100"})
    @Html.ValidationMessageFor(m=>m.Password)
</p>


<p class="checkbox">
    <input type="checkbox" id="subscribe" name="Subscribe" value="true" />
    <label for="subscribe">
        By registering you agree to recieve news and promotions from Essence via email
    </label>
</p>

<p>
    <button href="#" type="submit" class="btn size100">Send</button>
</p> }

Answer 1

Problem fixed with this:
_submitForm($(this).closest(‘form’));

When I calling submitForm private method I’m passing closest form, and it’s working.

Can someone explain why it’s working? Why us not working in firefox in first situation ?