This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

  1. Forum
  2. FormTools Support
  3. Working example of form with javascript api
david.bruenner30689
david.bruenner30689

Hi,

can anyone please give me a working example of a form whit javascript api? Thanks.

I`ve got a working example of a component creating a contactform, which uses data attributes api

<h2>{{ 'contactform.header'|_ }}</h2>

<form data-request="onSend">

    <div class="form-group">
        <label for="name">{{ 'contactform.name'|_ }}</label>
        <input type="text" name="name" id="name" class="form-control">
    </div>

    <div class="form-group">
        <label for="email">{{ 'contactform.email'|_ }}</label>
        <input type="email" name="email" id="email" class="form-control">
    </div>

    <div class="form-group">
        <lable for="message">{{ 'contactform.message'|_ }}</lable>
        <textarea id="message" name="message" class="form-control"></textarea>
    </div>

    <button type="submit">{{ 'contactform.send'|_ }}</button>

</form>

When I click on submitBtn a progressbar appears and then a mail is send.

So I tried to use it with javascript api

<form onsubmit="$(this).request('onSend'); return false;">.     <!-- this is the example from the octorbercms docs -->

But when I click on submitBtn nothing happens. When I change the name of the handler to eg. 'onProcess' than a popup informs me that 'AJAX handler 'onProcess' was not found.' But no progressbar.

Then I tried to write in my js-file:

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

And the form only has "normal" opening and closing tags

<form>
   ...
</form>

When I know press submitBtn a normal page refresh is done - but no ajax. And no progressbar.

This is an output of my page source:

<html>
    <head>
        ..
    </head>
    <body>
        ...
        <h2>Kontaktformular</h2>
        <form>
            ...
        </form>
    ...
    <script src="http://192.168.10.12/themes/olympos/assets/compiled/js/all.js"></script> <!-- in this file there is my js -->
    <script src="/modules/system/assets/js/framework.js"></script>
    <script src="/modules/system/assets/js/framework.extras.js"></script>
</body>

I can't see why the form is not working with javascript api.

Last updated

1-1 of 1

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.