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

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 :

but I don’t know how to track the submit button click. I tried writing OnSubmit() in a Script and added to the modal content, its not working.

`const domc = editor.DomComponents;
  const defaultType = domc.getType('default');
domc.addType("test-type", {
    model: defaultModel.extend(
      {
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          type      : "test-type",
          id:"popup",
          droppable : false,
          resizable : true,
          tagName:"popup",
        }),
        getAttrToHTML: function() {
          var attr = defaultType.model.prototype.getAttrToHTML.apply(this, arguments);
          delete attr.onmousedown;
          var testmarker = this.get("testmarker");
          if(testmarker)
            attr.testmarker = testmarker;
          return attr;
        }
      }),
    view: defaultType.view.extend({
      tagName: "button",
      events: {
        "dblclick": "openModal",
      },
      initialize: function(o) {
        defaultType.view.prototype.initialize.apply(this, arguments);
        this.listenTo(this.model, "change:testmarker", this.updateMarker);
        this.listenTo(this.model, "dblclick active", this.openModal);
      },
      
      updateMarker: function() {
        var testmarker = this.model.get("testmarker");
        this.$el.attr("testmarker", testmarker);
      },

      openModal: function(e) {
        const modal = editor.Modal;
        modal.open({
          title: '<br>Create Identity<br>',
          content: `
          <div class="container"> 
          <br>
              <form onsubmit="formSubmit()">
              <div class="form-group">
              <label>URL</label>
               <input type="text" class="form-control" id="url" placeholder="http://test-data/" name="url">
              </div>
              <br>
              <div class="form-group">
              <label>Identity </label>
               <input type="text" class="form-control" id="address" placeholder="Enter Identity Address" name="address">
              </div>
              <br>
              <button type="submit" class="btn btn-danger">Submit</button>
              </form>
              <br>
              </div>`,
        });
      },
    })
  });`

Is my approach correct? Should I do it in a different way ?

[giorgiosjames]

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:

function openModal() {
  const pfx = editor.getConfig().stylePrefix;
  const modal = editor.Modal;

  const container = document.createElement('div');

  const inputHtml = `<div class="form-group">
  <label>URL</label>
   <input type="text" class="form-control" placeholder="http://test-data/" name="url" id="urlInput">
  </div>
  <br>
  <div class="form-group">
  <label>Identity </label>
   <input type="text" class="form-control" placeholder="Enter Identity Address" name="address" id="idInput">
  </div>`;

  const btnEdit = document.createElement('button');
  btnEdit.innerHTML = 'Submit';
  btnEdit.className = pfx + 'btn-prim ' + pfx + 'btn-import';
  btnEdit.onclick = function() {
    const urlInputElement = document.getElementById('urlInput');
    const idInputElement = document.getElementById('idInput');

    const urlVal = urlInputElement.value;
    const idVal = idInputElement.value;

    // here is where you put your ajax logic
    myAjaxCallFunction(urlVal, idVal);

    modal.close();
  };

  modal.setTitle('Create Identity');
  container.innerHTML = inputHtml;
  container.appendChild(btnEdit);
  modal.setContent(container);
  modal.open();
};

[AkibDeraiya123]

@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 😃