[Question] how to append a button inside default modal and catch it's click event

Question

I want a form inside a modal (using the default modal ), on click of the submit button make an ajax call. I have created a new component which pops a modal on drag and drop. I am able to insert the form in the modal It looks like this : <img width="1001" alt="Screen Shot 2019-07-11 at 10 22 17 AM" src="https://user-images.githubusercontent.com/36627122/61023023-cf1a4180-a3c5-11e9-8fcb-3da790ff9d61.png">but I don't know how to track the submit button click. I tried writing OnSubmit() in a Script...

giorgiosjames · Accepted Answer

Doing away with the form and just using javascript to create/interface with the modal contents works well. modal.setContent() for appending the button and myButton.onclick = () => {} to catch its click event. Here's some example code:

artf · Answer

The point here is that content accepts HTML nodes (not only HTML strings) so you can have any HTMLElement with any attached event (forms with submits, buttons with clicks, etc.) so the approach proposed is totally valid (thanks @giorgiosjames)

AkibDeraiya123 · Answer

@giorgiosjames Thanks, man this(https://github.com/artf/grapesjs/issues/2129#issuecomment-510734779) is work like a charm in my case. Your answer save a lot of my time :)

How to append a button inside default modal and catch it's click event

Question

Answers (3)

Related Questions and Answers

[Question] How to update attribute/properties dynamically from Component Script?

[Help Wanted] How to easily override existing component ?

How we can remove default text content from text component 'Insert your text here' ?

Modals close on mouseup event outside of modal rather than a full click

Paid Plugins That Match This Issue

Browse Plugin Categories