Gridmanager save contents to hidden form field using external button

example.html

<!-- The Gridmanager canvas -->  
<div id="mycanvas" class="clearfix"></div>
 
<!-- The Form-->
    <form method="post" action="saveme" id="gridmanager-save">
<!-- hidden Field-->
      <input type="hidden" name="mycontent" id="mycontent" />
      <input type="submit" name="submit" class="submit" />
     </form>
  </div>
 
<!--================== JS ================-->
 
<script>
    $(document).ready(function(){
        var gm = jQuery("#mycanvas").gridmanager().data('gridmanager');
        $(".submit").on("click", function(e){
            canvas = gm.$el.find("#" + gm.options.canvasId);
            gm.deinitCanvas();  
            $("#mycontent").val(canvas.html());
            $(this).submit();
        });
    });
</script>  
</body>
</html>

Thank you so much :)

still don't understand, but i will keep trying this is a great script grid manager :D

neokoenig,

The above example is flawed. It works if I make new rows and content, but if I start the page with content in the gridmanager and do not edit it, the original information does not render into those hidden inputs. As I am trying to use this as an editor for new OR existing content, how do I get gridmanager to render everything (old or new) so I can collect it and pass it back in the form post?

Okay, not the best solution in my mind, but here is what I did to your code:

<script>
    $(document).ready(function(){
        $(".submit").on("click", function(e){
            var gm = jQuery("#mycanvas").gridmanager().data('gridmanager');
            var canvas = gm.$el.find("#" + gm.options.canvasId);
            gm.deinitCanvas(); 
            // get the data and remove all gm and timymce related markings
            var data = canvas.find('#gm-canvas').html().replace(/(<input name="mce_\d+"[^>]+>|<!--gm-editable-region--><div[^>]*>|<\/div><!--\/gm-editable-region-->)/ig, "");
            // convert <> to &lt; and &gt; in preparation of post.
            $("#mycontent").val($('<div/>').text(data).html());
            return true;
        });
    });
</script> 

There may be a way to do it with the gm functions, but I was not able to find one, so I just decided to code it thus. Of course if tinymce changes how it names the inputs OR gridmanager changes the html comments and positioning with the gm divs, it will break the code.

On a page with one row starting on the page and after adding one, your original code pulled this:
<div class="row"><div class="column col-md-6 col-sm-6 col-xs-6"><p>New Content1</p></div><div class="column col-md-6 col-sm-6 col-xs-6"><p>New Content2</p></div></div><div class="row"><div class="column col-md-12 col-sm-12 col-xs-12"><p>New section 1</p></div></div><div class="row"><div class="col-sm-12 col-md-12 col-xs-12 column">Not Yet Published</div></div>

My code pulls this:
<div class="row"><div class="column col-md-12 col-sm-12 col-xs-12"><p>New Content</p></div></div><div class="row"><div class="col-sm-12 col-md-12 col-xs-12 column">Not Yet Published</div></div>

I came upon a better method to do the above.
In my save function I get the gridmaster data this way now:

                // We need the canvas in edit more
                if ($('.gm-edit-mode.btn-danger').length == 0)
                    $('.gm-edit-mode').trigger('click');
                // now grab the content (use .html or .text) and store it where I can get it after the post.
                $('#mycontent').val($('#mycanvas').find('textarea').html().trim());
                // Get out of edit mode now (so the user does not see the source before the post)
                $('.gm-edit-mode').trigger('click');

That is far easier than my previous post. :)