Form is not submitting
The important part - the html is missing. If you can, you should share the code in codesandbox or similar online editors.
Read full answer below ↓Question
I am trying to create as custom block. But the form is not submitting when i use components inside content.
const blockManager = editor.BlockManager;
blockManager.add("pre-made-element--registration", {
label: "Registration Form",
category: "Pre-Made Elements",
attributes: { class: "fa fa-user-plus" },
content: {
script: function () {
const $ = window.$;
const form = $(this).find("form");
form.submit((event) => {
const formData = form.serializeArray();
console.log(data);
});
},
components: "HERE IS THE FORM COMPONENT",
},
});
};
I am able to get all the form data when i use content instead of component. But then it's not allowing me drag new inputs to form.
const blockManager = editor.BlockManager;
blockManager.add("pre-made-element--registration", {
label: "Registration Form",
category: "Pre-Made Elements",
attributes: { class: "fa fa-user-plus" },
content: {
script: function () {
const $ = window.$;
const form = $(this).find("form");
form.submit((event) => {
const formData = form.serializeArray();
console.log(data);
});
},
content: "HERE IS THE FORM COMPONENT",
},
});
};
Answers (4)
The important part - the html is missing. If you can, you should share the code in codesandbox or similar online editors.
Yeah, we need the complete code to understand the issue.
Anyway, if you're using script please define a Custom Component instead of placing it directly in the Block, or you'll face issues on storing. I know that this is how is illustrated in the documentation but the usage of blocks was there only as an example (I hope to update it for the next release)
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.
Thanks for reporting this, @shkhalid.
Great suggestion about Form is not submitting! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior.
Using the event system:
editor.on('component:update', (component) => {
// your logic here
});
Alternative approaches:
- Listen to
selector:addfor CSS selector changes - Use
selector:customfor custom rules - Tap into the
change:*events for fine-grained tracking - Build a plugin that extends the editor with this capability
Making it official: If this feature would benefit many users, consider opening a formal Feature Request on the GrapesJS repo with:
- A detailed use case
- Code example showing the desired behavior
- Why this matters for your workflow
The core team is receptive to well-motivated feature requests backed by real use cases.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3223
FEAT: Create the canvas from a URL
I've been playing with GrapesJS and trying to integrate it into a Symfony 5 project. In particular I want to be able to edit templates in t...
Issue #3939
Disabled drag and drop in preview
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? v95Reproducible demo link https://codesandbo...
Issue #3496
FEAT: Mark Component as Dirty
What are you trying to add to GrapesJS? Component should be able to mark themselves as dirty, triggering the onbeforeunload warning message...
Issue #4654
Custom component for text node including special characters
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v105 Reproducible demo link https:/...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.