Can anyone please give me an example of how to use an Ajax-form using javascript api?

This is my test form:

<form>
    <div class="form-group">
        <label>Name</label>
        <input type="text" name="name">
    </div>
    <button type="submit" >Senden</button>
</form>

and my js

$('form').on('submit', function() {
    $.request('onAjax');
})

or

$('[type="submit"]').on('click', function(event) {
    event.preventDefault();

    $.request('onAjax');
});

but both times a normal request is made.

What am I doing wrong?

{% framework extras %} added ?

@pavelmgn21376

{% framework extras %} added ? Yes

This is my folder structure:

plugins/
    contact/
        assets/
            js/
                contactform.js
        classes/
        components/
            contactform/
                default.htm
            ContactForm.php
        lang/
        updates/
        Plugin.php
        plugin.yaml

I created at contact.htm where I put the following component into.

The file ContactForm.php looks like:

<?php
namespace David\Contact\Components;

use Cms\Classes\ComponentBase;
use Illuminate\Support\Facades\Input;
use Illuminate\Support\Facades\Mail;
use Illuminate\Support\Facades\Validator;
use ValidationException;
use System\Classes\CombineAssets;

class ContactForm extends ComponentBase {

    public function onRun() {
        $js = ['assets/js/contactform.js'];
        $this->addJs(CombineAssets::combine($js, plugins_path('david/contact')));
    }

    public function componentDetails() {
        return [
            'name' => 'Kontaktformular',
            'description' => 'Ein Kontaktformular'
        ];
    }

    public function onSend() {
        $data = post();

        $name = Input::get('name');
        $email = Input::get('email  ');

        $rules = [
            'name' => 'required',
        ];

        $validator = Validator::make($data, $rules);

        if ($validator->passes()) {
            $vars = [
                'name' => $name,
            ];

            Mail::send('david.contact::mail.message', $vars, function ($message) {
                $subject = trans('david.contact::lang.plugin.components.contactform.subject');

                $message->to('david.bruenner@t-online.de', 'David');
                $message->subject($subject);
            });

        } else {
            throw new ValidationException($validator);
        }
    }
}

and the default.htm:

<h2>Kontaktformular</h2>

<form>

    <div>
        <label>Ihr Name</label>
        <input type="text" name="name">
        <span data-validate-for="name" class="errormsg"></span>
    </div>

    <button type="submit" data-attach-loading>Senden</button>
</form>

As you can see, data-attributes-api is used in this example.

This example is working. With click on submit-Btn a progress bar appears and the error msg is added to my form-field.

So I tried to use javascript-api. I changed my default.htm to:

<h2>Kontaktformular</h2>

<form data-request="contactform::onSend" data-request-validate>

    <div>
        <label>Ihr Name</label>
        <input type="text" name="name">
        <span data-validate-for="name" class="errormsg"></span>
    </div>

    <button type="submit" data-attach-loading>Senden</button>
</form>

and inserted in contact form.js (which was empty in the previous example):

$('form').on('submit', function() {
    $.request('onAjax');
})

or

$('[type="submit"]').on('click', function(event) {
    event.preventDefault();

    $.request('onAjax');
});

But now a normal request - no ajax - is made.

Last updated 5 years ago