Bpmn-js-properties-panel inside a form-tag

Developers Modeler
1

hi,
for some reason my modeler lives inside a form tag. now every time the user pushes a modeler’s button, the form is submitted. is there a way to stop this from happening?

examples for “modeler’s buttons” are the “x” to clear the ID of a start event or the “+” to add a form field to a start event. the form is submitted (and index.html is reloaded) when the user presses one of these buttons.

to reproduce this just take bpmn-js-properties-panel and modify the index.html along the following lines. please note that the setup with the form-tag is (more or less) beyond my control.

<html>...<body>
  <form name="foo" onSubmit="alert('Submitted!')" />
    <div class="content with-diagram" id="js-drop-zone" style="height:600px">
    ...
    <script src="index.js"></script>
  </form>
</body></html>

thanks a lot for your help!

2

My solution is to switch the modeler’s buttons from type=“submit” to type=“button”:

var eventBus = bpmnModeler.get('eventBus');
var events = [
    'element.click'
  ];
  events.forEach(function(event) {
     eventBus.on(event, function(e) {
         $("#js-properties-panel").find(":button").each(function(_index, element){
             $(element).attr("type","button");
         });
    });
  });
3

You can actually listen on multiple event without a forEach loop. However, this is just syntactic sugar.

eventBus.on([ 'element.click' ], () => { });

4

thank you - trotzdem :slight_smile: