Implement Confirm/alertbox for Submit button in Bonita 6.3.8

Question

I am trying to implement a confirm/alertbox to check before submitting a form. This button is a Bonita submit button. I have very little knowledge of JS/jquery but can understand and implement through trial and error.

Is there an existing out of the box solution for this ? Or if you have any pointers please let me know.

I have referred this : http://community.bonitasoft.com/groups/usage-operation-5x/resolved-confi... , but it is for an older version and is not working for me.

The html page looks like this : ...

<div id="Submit1"></div>

... Details of the auto generated button class in bonita:

div id="Submit1" class="bonita_form_button_entry"> <div class="bonita_form_button_entry"><button type="button" class="bonita_form_button">Submit Documents</button></div></div>

I tried this:

<div id="Submit1" onclick="confirm('Are you sure ?')"></div>

This shows a dialog but continues the operation without waiting for my response. Bonita portal lets me edit the html form. But it needs to be in the format. It automatically generates the button type elements when it loads the page. So I don't have access to button type class.If I did it would be simpler to add the onclick check there.

My problem is propogation of onclick to submit button type. So I can give onclick check only on the top most div type but it doesn't apply to submit button type which is auto generated. Thank you

Answer 1

The simplest onclick tag on Submit button doesn't work for bonita portal. So I had to work around and put these tags for it to work:

<button type="button" class="btn btn-primary" onclick="if(confirm('Are you sure you want
 to Submit ?')){document.getElementById('Submit')
.getElementsByTagName('button')[0].click()‌​;}">Submit</button> 

Here Submit is a bonitasoft submit type. I have to hide it on the webpage. A regular button calls the above script and indirectly triggers the submit button.

Answer 2

Give this a try.

  <script>
    window.addEventListener('load', function(ev) {

      document.getElementById('Submit1').addEventListener('click', function(ev) {
        if(!confirm('Are you sure ?')) {
          ev.stopImmediatePropagation();
        }
      }, true);

    }, true);
  </script>

Here's a working example: http://jsbin.com/mazequvuwi/1/edit?html,js,output