CODEWITHSUNDEEP
javascriptjqueryonsubmit
SeanWM
SeanWM

Reputation: 17019

Submitting a form with an onSubmit

My form onSubmit is calling: 

onsubmit="validate(this); return false;"

validate(); is as follows:

function validate(obj) {
    $.ajax({
        url : "ajax/validate_check.php",
        type : "POST",
        data : $("#" + obj.id).serialize(),
        success : function(data) {
            $('#' + obj.id + ' :input.form_errors').removeClass('form_errors')
            data = $.parseJSON(data);
            if(data['error_count'] >= 1) {
                $.each(data, function(i, item) {
                    $('#' + i).addClass('form_errors');
                });
            } else {
                $('#' + obj.id).submit();
            }
        }
    });
}

When I have 0 errors it's trying to submit the form but I'm getting an infinite loop. I realize it's happening because my onSubmit calls the function again. How do I actually submit the form when I'm ready?

EDIT:

I'm just looking for the best way to approach this. I want to validate onSubmit for a quick response to the user and then I want to actually submit the form that way I know where the data is going (eg register.php will register a user).

That's why I'm not doing a combined action/validate script because I wouldn't know which form I'm submitting. I probably need to rearrange the way I'm doing this.

Upvotes: 1

Views: 10357

Answers (6)

Rick Suggs
Rick Suggs

Reputation: 1622

  1. Don't use the onsubmit attribute, it's mixing JavaScript into html markup, and goes against best practices.
  2. Why don't you make the validation part of the register function (server side). That way you aren't making twice as many round trips as you need. Following best practices you should be making as few http requests as possible. You can organize your php scripts into folders depending on the functionality. Much easier to tell what form is being submitted. This way it will also be much easier to create a unique validation script for each form submission. You may also be able to use the REQUEST_URI Server variable to tell which form you are submitting.

See here for instructions on accessing the REQUEST URI of the request within a php script.

If there is a common validation that you are doing for every form submitted, you can move that into a separate php file and import it into all files that will use the function. That function will then be available inside the script you imported it into.

See here for instructions on including files in php.

Then you can add custom validation to each individual script. You will more than likely need custom validation for some of your forms, someday.

  • util/validation_util.php
  • ajax/user/register.php
  • ajax/user/login.php
  • ajax/user/logout.php
  • ajax/product/search.php
  • ajax/product/detail.php
  • ajax/product/addToCart.php

  • etc...

    $('#formId').on('submit', function (event) {

event.preventDefault();

$.ajax({
    url : "ajax/user/register.php",
    type : "POST",
    data : $(this).serialize(),
    success : function(data) {
        $('#' + obj.id + ' :input.form_errors').removeClass('form_errors')
        data = $.parseJSON(data);
        if(data['error_count'] >= 1) {
            $.each(data, function(i, item) {
                $('#' + i).addClass('form_errors');
            });
        }
    }
});
});

Upvotes: 0

jk.
jk.

Reputation: 14435

Remove onsubmit="validate(this); return false;"

And use the following function:

$('form').submit(function(e){
    e.preventDefault();
    var $form = $(this),
        $formId = $form.attr('id'),
        $formName = $form.attr('name');

    $.ajax({
        url : "ajax/validate_check.php",
        type : "POST",
        data : $("#" + $formId).serialize(),
        success : function(data) {
            $('#' + $formId + ' :input.form_errors').removeClass('form_errors')
            data = $.parseJSON(data);
            if(data['error_count'] >= 1) {
                $.each(data, function(i, item) {
                    $('#' + i).addClass('form_errors');
                });
            } else {
                document.forms[$formName].submit();
            }
        }
    });
});

Fiddle where you can test with form id or name: http://jsfiddle.net/67rvg/3/

Upvotes: 1

Michael MacDonald
Michael MacDonald

Reputation: 708

In your block

   } else {
        $('#' + obj.id).submit();
   }

Rather than do an actual form submission use another ajax call to send your data to your forms action endpoint:

} else {

    $.ajax({
        url : obj.action
        ,type : obj.method
        ,data : $(obj).serialize()
        ,success : function() {
            // show success message/close window/ etc
        }
        , error: function() {
            // show error saving form message
        }
    });
}

This way you'll be in a better position to capture the results if something goes wrong with the form submission.

Upvotes: 0

GVdP
GVdP

Reputation: 175

This should work: Unbind the event before re-submitting.

Instead of

function validate(obj) {
    $.ajax({
        url : "ajax/validate_check.php",
        type : "POST",
        data : $("#" + obj.id).serialize(),
        success : function(data) {
            $('#' + obj.id + ' :input.form_errors').removeClass('form_errors')
            data = $.parseJSON(data);
            if(data['error_count'] >= 1) {
                $.each(data, function(i, item) {
                    $('#' + i).addClass('form_errors');
                });
            } else {
                $('#' + obj.id).submit();
            }
        }
    });
}

Try

function validate(obj) {
    $.ajax({
        url : "ajax/validate_check.php",
        type : "POST",
        data : $("#" + obj.id).serialize(),
        success : function(data) {
            $('#' + obj.id + ' :input.form_errors').removeClass('form_errors')
            data = $.parseJSON(data);
            if(data['error_count'] >= 1) {
                $.each(data, function(i, item) {
                    $('#' + i).addClass('form_errors');
                });
            } else {
                $('#' + obj.id).unbind('submit').submit();
            }
        }
    });
}

Upvotes: 0

balexandre
balexandre

Reputation: 75133

Don't submit it again using the submit call, as you say, you will be in a loop... just post everything like a submit:

change your $('#' + obj.id).submit(); line by submitForm() and add

function submitForm() {
    var form = $("#my_form"),
        url = form.attr("action"),
        dt = form.serialize();

    $.post(url, dt, function(data) {
       // your form was post'd successfully
    });
}

Now that you know how to work, why inventing the well?

Why don'y you use jQuery Validate and the remote validation to do the job for you?

Upvotes: 0

Cristian
Cristian

Reputation: 23

i'd not issue another submit in your else branch, but return a true value.

in your onsubmit i'd do onsubmit="return validate(this);"

Upvotes: 0

Related Questions