Ajax code to send the form data to the .php file after successful validation

  ajax, forms, javascript

Where to add the Ajax code to send the form data to the .php file after successful validation? There are three separate forms on the page. The js code and forms were created with formoid by someone else and I don’t know where to put the ajax request in that code.

One request is enough, should I do it for each of the three forms separately?

After this:

if ($input.attr('name') === "email") {
                    if (!isValidEmail(input)) {
                        $submit.removeClass('btn-loading').prop('disabled', true);
                        def.reject(new Error('Form is not valid'));
                        return false;
                    }
                }

                switch (typeInput) {
                    case 'file': {
                        var reader = new FileReader(),
                            name = $input.attr('data-form-field') || $input.attr('name'),
                            files = $input[0].files[0];

                        reader.onloadend = function () {
                            data.push([
                                name,
                                reader.result
                            ]);
                            objDeferred.resolve();
                        };
                        reader.onerror = function () {
                            $alert.html(reader.error);
                            def.reject(reader.error);
                        };

                        if (files) {
                            reader.readAsDataURL(files);
                        }
                    }
                        break;
                    case 'checkbox': {
                        data.push([
                            $input.attr('data-form-field') || $input.attr('name'),
                            $input.prop("checked") ? $input.val() : 'No'
                        ]);
                        objDeferred.resolve();
                    }
                        break;
                    case 'radio': {
                        if ($input.prop("checked")) {
                            data.push([
                                $input.attr('data-form-field') || $input.attr('name'),
                                $input.val()
                            ]);
                        }
                        objDeferred.resolve();
                    }
                        break;
                    default: {
                        data.push([
                            $input.attr('data-form-field') || $input.attr('name'),
                            $input.val()
                        ]);
                    }
                    objDeferred.resolve();
                }
            });

            return def.resolve(arrDeferred);
        }

or this? :

 parseInputs(inputs).then(function (arrDef) {
            $.when.apply(this, arrDef)
            .then(function() {
                form.send(data)
                    .always(function () {
                        $submit.removeClass('btn-loading').prop('disabled', false);
                        $alert.removeAttr('hidden');
                    })
                    .then(function (message) {
                        $form[0].reset();
                        $form.removeClass('form-active');
                        $alert.text(alertSuccess || message);
                        $alert.removeClass('alert-danger').addClass('alert-success');
                    })
                    .fail(function (error) {
                        $alert.text(error);
                        $alert.removeClass('alert-success').addClass('alert-danger');
                    });
            }, function (err) {
                $alert.html(err.message);
                $alert.removeClass('alert-success').addClass('alert-danger');
                $alert.removeAttr('hidden');
            });

I will be grateful for your help, where to start. That’s my frist steps in Java Script.

Source: Ask Javascript Questions

LEAVE A COMMENT