Uncaught TypeError

[kiahreading]

Hi Roman,

I am testing the plugin locally and have just run into this issue:

Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'. at FormBlock.submit (formblock.js:156:30)

The error is thrown on line 156: $this.formdata = new FormData($this.form_element);

Similar error received for "at FormBlock.validate".

My config is:

  'microman.formblock' => [
    'default_language' => 'en',
    'from_email' => ["hello@email.com" => "Agency"]
  ],

I am using the default setup without customising the output and my installation does not contain any custom form templates.

Any assistance would be great, thank you!

[plain-solutions-gmbh]

Let's try to reproduce it. I need your help for that. At the end of the form, you'il see a script-tag like this:

Could you find it, and send me a screenshot?

[kiahreading]

Thank you. Yes, here is the script-tag:

[nawalnew]

I have the same Problem, clean install, no templates. Even with just one field I can not send a testmail.

Thank you in advance :)

[plain-solutions-gmbh]

I'm working on it. Thank for your patient.

[plain-solutions-gmbh]

I couldn't reproduce it. Could you send me information of your Browser, your PHP and Kirby-Version, please..?

[kiahreading]

Hi Roman,

Here is the info.

Browsers tested: Chrome (Version 122.0.6261.129) Chrome iOS (Version 122.0.6261.89) Safari (Version 17.4 19618.1.15.11.12) Firefox (Version 123.0.1)

Kirby version: 4.1.2

PHP version: 8.2.0

Thanks a lot.

[nawalnew]

I tested it in Kirby 4.1.0 and 4.1.2. PHP 8.1 and 8.2Safari and Chrome. Thank you

[plain-solutions-gmbh]

No way. I couldn't reproduce it. Does someone of you running the page online? Could you send me a link..?

[nawalnew]

@youngcut Hi Roman,

Interestingly, it doesn't work locally with the Starter Kit, even though I'm using the same PHP version and the same Kirby version. However, it works online: https://kirby.nawalnew.com Tried a blank Kirby Starterkit Installation.

But I need to get it working locally first. There seems to be a problem somewhere with the local setup.

I believe it might be related to MAMP or something similar. I'm currently investigating to pinpoint the exact issue and will update as soon as I find out what's going wrong.

I'm on it and will reach out to you as soon as I have more information.

[nawalnew]

Hello again,

I've tried every possible way to reproduce this issue. It seems to be related to PHP FastCGI and SSL handling in MAMP. That might be the problem. I'm trying to narrow it down further, but I'm actually not making any progress. I've completely reinstalled MAMP and reinstalled the PHP version as well. This is the only plugin that doesn't work locally for me. I would be grateful if Roman could take a look. Perhaps doing a clean MAMP installation and checking if it works with the Starter Kit. This way, we can pinpoint and eliminate the error.

The Strange Part is, That even if i click in a field and get to another I get the Error. Not even when sending. Somehow your JS is checking something that is not there "local".

Here is the code of the local script:

<script type="module">

  import {FormBlock} from 'https://starter.local/media/plugins/microman/formblock/formblock.js';

  document.getElementById('bfbdc676-0f15-4c39-887c-0643e4ed5db6').formblock = new FormBlock({
    form_name: 'Formular',
    form_id: 'bfbdc676-0f15-4c39-887c-0643e4ed5db6',
    form_hash: '9b1bf117a875368b23db560bdba3eb6aabe1',
    page_id: 'home',
    language: 'en',
    endpoint: 'https://starter.local/form/validator',
    messages: {
      fatal: '<p>Something went wrong.<br>Contact the administrator or try again later.</p>',
      send: 'Send',
      loading: 'Uploading ({{percent}})'
    } 
  });

</script>

Here is the code of the same kirby Site online thats working.

<script type="module">

  import {FormBlock} from 'https://kirby.nawalnew.com/media/plugins/microman/formblock/formblock.js';

  document.getElementById('bfbdc676-0f15-4c39-887c-0643e4ed5db6').formblock = new FormBlock({
    form_name: 'Formular',
    form_id: 'bfbdc676-0f15-4c39-887c-0643e4ed5db6',
    form_hash: 'a33cef47223dbca7ee20efc3fc92affe83aa',
    page_id: 'home',
    language: 'en',
    endpoint: 'https://kirby.nawalnew.com/form/validator',
    messages: {
      fatal: '<p>Something went wrong.<br>Contact the administrator or try again later.</p>',
      send: 'Send',
      loading: 'Uploading ({{percent}})'
    } 
  });

</script>

[plain-solutions-gmbh]

@nawalnew We have two different things here:

1. If i open https://kirby.nawalnew.com i see an 403 for the Javascript. It may have something to do with symbolic link. Check your .htaccess and delete the media folder.
2. Now, the problem is clear for me: Kirby starts wrapping blocks with the block id:

Now we have two elements with the same id. I'il fix it ASAP and upload a new Version. I'il let you know....

[nawalnew]

@youngcut I understand now, too.

I've set up the most basic blocks using Kirby's initial setup:

<?php foreach ($page->blocks()->toBlocks() as $block): ?>
<div id="<?= $block->id() ?>" class="block block-type-<?= $block->type() ?>">
  <?= $block ?>
</div>
<?php endforeach ?>

If a different declaration for blocks in the frontend is needed, it would be helpful to include that in your documentation. Specifically, a working example of a blocks snippet in the Kirby Docs would be really useful.

Regardless, you're an incredible developer with impressive responsiveness. I'm glad I invested my license money in the right person. Keep it up! :)

[kiahreading]

@nawalnew We have two different things here:

1. If i open https://kirby.nawalnew.com i see an 403 for the Javascript. It may have something to do with symbolic link. Check your .htaccess and delete the media folder.
2. Now, the problem is clear for me: Kirby starts wrapping blocks with the block id:

Now we have two elements with the same id. I'il fix it ASAP and upload a new Version. I'il let you know....

Thanks Roman, that solved it for me.

[nawalnew]

@youngcut Thank you! Works like a charm :)