Simulating Check boxes and Radio buttons



I have a client that needs a quick way to create very similar form-like pages. I immediately thought of using Surreal CMS. Rather than creating a complex word or pdf form, I thought it would be easiest to create a template web page they can duplicate with editable regions they can fill out. For this purpose it’s working great.

However, I’ve just run across a problem. Their old form that no longer suits their needs had check boxes and radio buttons. I could insert check boxes in an html form in the page, but the status of those check boxes wouldn’t be saved when they were done editing in surreal - also, I don’t want the check boxes to be changed by someone just viewing the page.

My current solution is just to have a small editable div and have them type an X in it. This kind of works for check boxes, but not radios buttons.

Any idea of a solution?


You can detect the CMS with using window.isCMS, so you may be able to target the editor and handle things like that with JavaScript.

Not sure how much help that’s going to be, but I’m having a hard time understanding exactly how this is being used.


Sorry if I was unclear. Basically, they want an online system that works like a pad of paper form. Fill it out, rip it off the pad and put it in a file, and move on to the next. I need something that works without a big database, just flat HTML files that can be taken offline and made standalone. The issue with that is that HTML checkboxes and radioboxes aren’t persistent, so every time you reload a page they’d be in the default state.

I think with “window.isCMS” I can make something work. I can set up images of checkboxes and radio buttons that when clicked while “window.isCMS” == true, will get switched out with javascript to be a “filled in” version of the object. That is, assuming the state of the entire page gets saved by Surreal CMS when it saves a page.


The state of the content regions will be saved. There is a cleanup process, so the HTML needs to be valid.

If you use the checked attribute those should be saved as well. We don’t officially support form editing in the editor, but I can’t think of any reason why it wouldn’t work :slight_smile:


I got it working. Thanks!

I made images for checkboxes. I set up an event listener so when an image is clicked it first checks to see if we’re in CMS, if so it then checks the image source, if the image source is a checkbox image it swaps the source to the checked checkbox image (and to the unchecked image if it was already checked), and also swaps the data-mce-src too, so the cms will save it.

$(document).click(function(event) {
console.log("clicked " + $('id'));
if (window.isCMS == true){
	console.log("In CMS!");
	if ($("src") == "images/unchecked.png"){
		$("src", "images/checked.png");
		$("data-mce-src", "images/checked.png");
		console.log("Box checked!");
	} else if ($("src") == "images/checked.png") {
		console.log("Box unchecked!");