Want to save template name

Hi @artf @sonnylloyd @arthuralmeidap @cmcintosh

I am trying to store template name, but not sure how to pass the template name along with template data.

I mean I want to store template name and template data with the help of one single submit button.

Below is my code :

<form id="save-template" class="test-form" action="<?php echo base_url(); ?>dragdropeditor/dragdrop/add" method="POST" style="display:none">
      <div class="putsmail-c">
        <div class="gjs-sm-property" style="font-size: 10px">
          <span class="form-status" style="opacity: 0">
            <i class="fa fa-refresh anim-spin" aria-hidden="true"></i>
          </span>
        </div>
      </div>
      <div class="gjs-sm-property">
        <div class="gjs-field">
          <span id="gjs-sm-input-holder">
            <input type="text" name="templatename" placeholder="Template Name" required>
          </span>
        </div>
      </div>
      <input type="hidden" name="body">
      <button class="gjs-btn-prim gjs-btn-import" style="width: 100%">Save</button>
    </form>
</div>   

    <script type="text/javascript">
       var editor = grapesjs.init
           ({
              height: '100%',
              container : '#gjs',
              plugins: ['gjs-preset-newsletter'],
          storageManager: {
              id: '',
              type: 'remote',
              autosave: false,
              urlStore: '<?php base_url(); ?>/dragdropeditor/dragdrop/add',
              contentTypeJson: true,
              },
          });

         editor.Panels.addButton('options', [{
             id: 'save',
                  className: 'fa fa-floppy-o icon-blank',
                  command: function (editor, sender) {
                      if (sender)
                          sender.set('active', false);
                      editor.store();
                      alert('Template Saved Successfully !');
                  },
                  attributes: {title: 'save to database'}
              }]);




              // Let's add in this demo the possibility to test our newsletters
      var mdlClass = 'gjs-mdl-dialog-sm';
      var pnm = editor.Panels;
      var cmdm = editor.Commands;
      var testContainer = document.getElementById("save-template");
      var contentEl = testContainer.querySelector('input[name=body]');
      var md = editor.Modal;
      cmdm.add('send-test', {
        run(editor, sender) {
          sender.set('active', 0);
          var modalContent = md.getContentEl();
          var mdlDialog = document.querySelector('.gjs-mdl-dialog');
          var cmdGetCode = cmdm.get('gjs-get-inlined-html');
          contentEl.value = cmdGetCode && cmdGetCode.run(editor);
          mdlDialog.className += ' ' + mdlClass;
          testContainer.style.display = 'block';
          md.setTitle('Please enter template name');
          md.setContent('');
          md.setContent(testContainer);
          md.open();
          md.getModel().once('change:open', function() {
            mdlDialog.className = mdlDialog.className.replace(mdlClass, '');
            //clean status
          })
        }
      });
      pnm.addButton('options', {
        id: 'send-test',
        className: 'fa fa-paper-plane',
        command: 'send-test',
        attributes: {
          'title': 'Test Newsletter',
          'data-tooltip-pos': 'bottom',
        },
      });

      //fa fa-refresh
      var statusFormElC = document.querySelector('.form-status');
      var statusFormEl = document.querySelector('.form-status i');
      var ajaxTest = ajaxable(testContainer).
        onStart(function(){
          statusFormEl.className = 'fa fa-refresh anim-spin';
          statusFormElC.style.opacity = '1';
          statusFormElC.className = 'form-status';
        })
        .onResponse(function(res){
          if (res.data) {
            statusFormElC.style.opacity = '0';
            statusFormEl.removeAttribute('data-tooltip');
            md.close();
          } else if(res.errors){
            statusFormEl.className = 'fa fa-exclamation-circle';
            statusFormEl.setAttribute('data-tooltip', res.errors);
            statusFormElC.className = 'form-status text-danger';
          }
        });
    </script>