How to get data from forms in grapesjs

[himanshubudhlakoti]

Hello All, I am using Forms block in grapejs and using grapesjs with angular 6. but i am not getting that how can i get data from forms while clicking on submit button of form. i am using following code for forms

let bm = editor.BlockManager;
bm.add('form', {
      label: `
      <svg class="gjs-block-svg gjs-block-svg-form" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path class="gjs-block-svg-path" d="M22,5.5 C22,5.2 21.5,5 20.75,5 L3.25,5 C2.5,5 2,5.2 2,5.5 L2,8.5 C2,8.8 2.5,9 3.25,9 L20.75,9 C21.5,9 22,8.8 22,8.5 L22,5.5 Z M21,8 L3,8 L3,6 L21,6 L21,8 Z" fill-rule="nonzero"></path>
        <path class="gjs-block-svg-path" d="M22,10.5 C22,10.2 21.5,10 20.75,10 L3.25,10 C2.5,10 2,10.2 2,10.5 L2,13.5 C2,13.8 2.5,14 3.25,14 L20.75,14 C21.5,14 22,13.8 22,13.5 L22,10.5 Z M21,13 L3,13 L3,11 L21,11 L21,13 Z" fill-rule="nonzero"></path>
        <rect class="gjs-block-svg-path" x="2" y="15" width="10" height="3" rx="0.5"></rect>
      </svg>
      <div class="gjs-block-label">Form</div>`,
      category: 'Forms',
      content: `
        <form class="form" style="background: LightGray;height:220px;padding-top:20px">
          <div class="form-group">
            <label class="label">Name</label>
            <input id="username" value="himanshu"placeholder="Type here your name" class="input"/>
          </div>
          <div class="form-group"style="margin-top:10px">
            <label class="label">Email</label>
            <input type="email" placeholder="Type here your email" class="input"/>
          </div>
          <div class="form-group">
            <label class="label">Gender</label>
            <input type="checkbox" class="checkbox" value="M" name="opt">
            <label class="checkbox-label" >M</label>
            <input type="checkbox" class="checkbox" value="F" name="opt">
            <label class="checkbox-label">F</label>
          </div>
          <div class="form-group">
            <label class="label">Message</label>
            <textarea class="textarea"></textarea>
          </div>
          <div class="form-group" style="margin-top:10px">
            <button  id="buttonsubmit" type="submit"  class="button" style="background :MediumSeaGreen;width:200px">Send</button>
          </div>
        </form>
      `,
    });
    bm.add('input', {
      label: `
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="32px" viewBox="0 0 16 16">
<path fill="#FFFFFF" d="M16 5c0-0.6-0.4-1-1-1h-14c-0.6 0-1 0.4-1 1v6c0 0.6 0.4 1 1 1h14c0.6 0 1-0.4 1-1v-6zM15 11h-14v-6h14v6z"/>
<path fill="#FFFFFF" d="M2 6h1v4h-1v-4z"/>
</svg>
      <div class="gjs-block-label">Input</div>`,
      category: 'Forms',
      content: '<input class="input"/>',
    });
    bm.add('textarea', {
      label: `
      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path class="gjs-block-svg-path" d="M22,7.5 C22,6.6 21.5,6 20.75,6 L3.25,6 C2.5,6 2,6.6 2,7.5 L2,16.5 C2,17.4 2.5,18 3.25,18 L20.75,18 C21.5,18 22,17.4 22,16.5 L22,7.5 Z M21,17 L3,17 L3,7 L21,7 L21,17 Z"></path>
        <polygon class="gjs-block-svg-path" points="4 8 5 8 5 12 4 12"></polygon>
        <polygon class="gjs-block-svg-path" points="19 7 20 7 20 17 19 17"></polygon>
        <polygon class="gjs-block-svg-path" points="20 8 21 8 21 9 20 9"></polygon>
        <polygon class="gjs-block-svg-path" points="20 15 21 15 21 16 20 16"></polygon>
      </svg>
      <div class="gjs-block-label">TextareaName</div>`,
      category: 'Forms',
      content: '<textarea class="textarea"></textarea>',
    });

    bm.add('select', {
      label: `
      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" fill-rule="nonzero"></path>
        <polygon class="gjs-block-svg-path" transform="translate(18.500000, 12.000000) scale(1, -1) translate(-18.500000, -12.000000) " points="18.5 11 20 13 17 13"></polygon>
        <rect class="gjs-block-svg-path" x="4" y="11.5" width="11" height="1"></rect>
      </svg>
      <div class="gjs-block-label">1</div>`,
      category: 'Forms',
      content: `<select class="select">
      <option value="1">1</option>
        <option value="2"> 2</option>
        </select>`,
    });

    bm.add('button', {
      label: `
      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path class="gjs-block-svg-path" d="M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z" fill-rule="nonzero"></path>
        <rect class="gjs-block-svg-path" x="4" y="11.5" width="16" height="1"></rect>
      </svg>
      <div class="gjs-block-label">Button</div>`,
      category: 'Forms',
      content: '<button class="button">Send</button>',
    });

    bm.add('label', {
      label: `
      <svg class="gjs-block-svg" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path class="gjs-block-svg-path" d="M22,11.875 C22,11.35 21.5,11 20.75,11 L3.25,11 C2.5,11 2,11.35 2,11.875 L2,17.125 C2,17.65 2.5,18 3.25,18 L20.75,18 C21.5,18 22,17.65 22,17.125 L22,11.875 Z M21,17 L3,17 L3,12 L21,12 L21,17 Z" fill-rule="nonzero"></path>
        <rect class="gjs-block-svg-path" x="2" y="5" width="14" height="5" rx="0.5"></rect>
        <polygon class="gjs-block-svg-path" fill-rule="nonzero" points="4 13 5 13 5 16 4 16"></polygon>
      </svg>
      <div class="gjs-block-label">Label</div>`,
      category: 'Forms',
      content: '<label class="label">Label</label>',
    });

    bm.add('checkbox', {
      label: 'Checkbox',
      attributes: { class: 'fa fa-check-square' },
      category: 'Forms',
      content: '<input type="checkbox" class="checkbox"/>',
    });

    bm.add('radio', {
      label: 'Radio',
      attributes: { class: 'fa fa-dot-circle-o' },
      category: 'Forms',
      content: '<input type="radio" class="radio"/>',
    });

    //basic block
    bm.add('link', {
      label: '<b> Link</b>',
      attributes: { class: 'fa fa-link' },
      category: 'Basic',
      content: {
        content: `
        <div class="container"style= "">
          insert Link here         
        </div>`,
        style: {
          color: 'purple',
          border: 'solid dotted 1px'
        }
      }
    });

as displaying in above snapshot i have filled form and now when i click on send button forms data should be got whatever i filled. please let me know any link or docs from where i can get help

[artf]

In the editor you just specify the action of the form, the rest has nothing to do with it (you have to deal with some server endpoint)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.