In our CMS, we will use AJAX to submit the edited content, but for now, let’s see how to use GridlessBuilder.js with a simple HTML form to submit the content.

<form id="frmContent" method="post" enctype="multipart/form-data">
	<input id="hidId" name="hidId" type="hidden" value="<?php echo $id; ?>" />
	<input id="hidContent" name="hidContent" type="hidden" />
	<input id="hidCss" name="hidCss" type="hidden" />
	<input id="hidJs" name="hidJs" type="hidden" />
</form>

Here we prepare a form that has 4 hidden fields. The edited content, css and js will be transfered to these fields so that the values can be submitted to the server. The page id ($id) value is also submitted to tell which page record should be updated.

Now we initialize GridlessBuilder.js for editing the content inside <div class=”is-wrapper”>.

<script>
    var obj = new GridlessBuilder({
        wrapper: '.is-wrapper', 
        onSave: function() {
            var html = obj.html();
            var css = obj.styles();
            var js = obj.js();
            document.querySelector('#hidContent').value = html;
            document.querySelector('#hidCss').value = css;
            document.querySelector('#hidJs').value = js;            
            document.querySelector('#frmContent').submit();
        }
    });
</script>

Inside the onSave function, we get the edited content, css and js using html(), css() and js() methods. Then we set our form fields with the values and submit the form.

On the server side, an sql update is performed using the submitted data.

<?php
...
$id = $_POST['hidId'];
$content = $_POST['hidContent'];
$css = $_POST['hidCss'];
$js = $_POST['hidJs'];

$sql = 'UPDATE pages set content= :content, css= :css, js= :js where id= :id';	
$s = $pdo->prepare($sql);
$s->bindValue(':content', $content);
$s->bindValue(':css', $css);
$s->bindValue(':js', $js);
$s->bindValue(':id', $id);		
$s->execute(); 
...
?>

For the complete code and to try the example, please open example2.php.

http://localhost/mysite/example2.php

The builder with blank section will be shown.

To save the content, click the Save button as shown in the screenshot below. It will trigger the onSave event.