schmunk42/button-callback.html

## button-callback.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Button Callbacks</title>
  <script src="../../dist/jsoneditor.js"></script>
</head>
<body>

<textarea class="value" cols="30" rows="10"></textarea>
<button class='get-value'>Get Value</button>
<div class='container'></div>

<script>
  var container = document.querySelector('.container');
  var value = document.querySelector('.value');

  JSONEditor.defaults.callbacks = {
    "button" : {
      "button1CB" : function(jseditor,e) {
        value.value = 'button1CB';
        let newval = {
          ...jseditor.jsoneditor.getValue(),
          ...{'textinput': Math.random()}
        };
        jseditor.jsoneditor.setValue(newval);
        console.log('button1CB', jseditor.jsoneditor.getValue());
      },
      "button2CB" : function(jseditor,e) {
        value.value = 'button2CB';
        console.log('button2CB', jseditor.jsoneditor.getValue());
      }
    }
  }

  var schema = {
    "type": "object",
    "title": "button2",
    "required": [
      "textinput"
    ],
    "properties": {
      "textinput": {
        "title": "Text input",
        "type": "string",
         "minLength": 2
      },
      "textinput2": {
        "title": "Text input 2",
        "type": "string",
        "minLength": 1
      },
      "button1": {
        "title": "Button 1",
        "format": "button",
        "options": {
          "button": {
            "action": "button1CB"
          }
        }
      },
      "button2": {
        "title": "Button 2",
        "format": "button",
        "options": {
          "button": {
            "action": "button2CB",
            "validated": true
          }
        }
      }
    }
  };

  var editor = new JSONEditor(container, {
    schema: schema
  });

  document.querySelector('.get-value').addEventListener('click', function () {
    value.value = JSON.stringify(editor.getValue());
    console.log(editor.getValue());
  });

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>Button Callbacks</title>
	<script src="../../dist/jsoneditor.js"></script>
	</head>
	<body>

	<textarea class="value" cols="30" rows="10"></textarea>
	<button class='get-value'>Get Value</button>
	<div class='container'></div>

	<script>
	var container = document.querySelector('.container');
	var value = document.querySelector('.value');

	JSONEditor.defaults.callbacks = {
	"button" : {
	"button1CB" : function(jseditor,e) {
	value.value = 'button1CB';
	let newval = {
	...jseditor.jsoneditor.getValue(),
	...{'textinput': Math.random()}
	};
	jseditor.jsoneditor.setValue(newval);
	console.log('button1CB', jseditor.jsoneditor.getValue());
	},
	"button2CB" : function(jseditor,e) {
	value.value = 'button2CB';
	console.log('button2CB', jseditor.jsoneditor.getValue());
	}
	}
	}

	var schema = {
	"type": "object",
	"title": "button2",
	"required": [
	"textinput"
	],
	"properties": {
	"textinput": {
	"title": "Text input",
	"type": "string",
	"minLength": 2
	},
	"textinput2": {
	"title": "Text input 2",
	"type": "string",
	"minLength": 1
	},
	"button1": {
	"title": "Button 1",
	"format": "button",
	"options": {
	"button": {
	"action": "button1CB"
	}
	}
	},
	"button2": {
	"title": "Button 2",
	"format": "button",
	"options": {
	"button": {
	"action": "button2CB",
	"validated": true
	}
	}
	}
	}
	};

	var editor = new JSONEditor(container, {
	schema: schema
	});

	document.querySelector('.get-value').addEventListener('click', function () {
	value.value = JSON.stringify(editor.getValue());
	console.log(editor.getValue());
	});

	</script>

	</body>
	</html>