AWS SageMaker - submit button is not working with custom template

When I create a new job on AWS SageMaker, using my custom template with crowd form (see attached sample) the SUBMIT button is not working and is not even clickable. Is there anyway to make this work? Haven`t see a good response on AWS support.

$('#submitButton').onclick = function() {
   $('crowd-form').submit(); 
};


 <body>
    <h2 id="hit">test</h2>
        <canvas id="canvas" width=1210 height=687></canvas>    
        <crowd-button id="submitButton3">Test button</crowd-button>

    <crowd-form>

        <input type="hidden" name="path0" id="input0123" value="{{task.input.metadata.images.path0}}" />
        <crowd-input label="Please input the character you see in the image" max-length="1" name="workerInput0"></crowd-input>

        <crowd-button id="submitButto3223n">Submit123</crowd-button>

    </div></div>

    <crowd-button id="submitButton">Submit123</crowd-button>

    </crowd-form>
    <crowd-button id="submitButton1">Submit1232</crowd-button>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 </body>

Solution

There are a few issues with your code snippet.

Here are the links to SageMaker's HTML Reference and Example for building custom Labeling template

First remove all those submit buttons (<crowd-button> elements) and the onClick event handler. From here you have two options, use the default SageMaker submit button or create your own in the template.

Use SageMaker's Submit Button

Leave out submit buttons (crowd-button) and SageMaker will automatically append one inside crowd-form. According to documentation here

Use custom Submit Button

In this case you need to:

Prevent SageMaker adding button by including crowd-button inside the crowd-form element and setting style="display: none;
Add your own Submit button elsewhere on the template and add onclick even handler that will execute form.submit()

Here is the working example of the template (taken from the Example mentioned above).

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<link rel="stylesheet" href="https://s3.amazonaws.com/smgtannotation/web/static/css/1.3fc3007b.chunk.css">
<link rel="stylesheet" href="https://s3.amazonaws.com/smgtannotation/web/static/css/main.9504782e.chunk.css">

<div id='document-text' style="display: none;">
  {{ task.input.text }}
</div>
<div id='document-image' style="display: none;">
        {{ task.input.taskObject | grant_read_access }}
</div>
<div id="metadata" style="display: none;">
  {{ task.input.metadata }}
</div>

<crowd-form>
    <input name="annotations" id="annotations" type="hidden">

     <!-- Prevent crowd-form from creating its own button -->
    <crowd-button form-action="submit" style="display: none;"></crowd-button>
</crowd-form>

<!-- Custom annotation user interface is rendered here -->
<div id="root"></div>

<crowd-button id="submitButton">Submit</crowd-button>

<script>
    document.querySelector('crowd-form').onsubmit = function() {
        document.getElementById('annotations').value = JSON.stringify(JSON.parse(document.querySelector('pre').innerText));
    };

    document.getElementById('submitButton').onclick = function() {
        document.querySelector('crowd-form').submit();
    };
</script>

<script src="https://s3.amazonaws.com/smgtannotation/web/static/js/1.3e5a6849.chunk.js"></script>
<script src="https://s3.amazonaws.com/smgtannotation/web/static/js/main.96e12312.chunk.js"></script>
<script src="https://s3.amazonaws.com/smgtannotation/web/static/js/runtime~main.229c360f.js"></script>

Code source