Adding a Add Row button which then adds a new row for Amazon MTurk Form - task

I have a table set up in Amazon mturk with a single row which the user can fill in with the relevant details. However, sometimes the user will need to fill in two or three more rows of data. I want them to be able to click an "add new row" button and then a new row appears at the bottom of the table which is identical to the row above for them to fill in.
I tried looking at another task to see how they got the add row button to work but I can't figure out how they did it https://worker.mturk.com/projects/3PP5EK5QU1Q6PKONUENX4D1ESGSUNM/tasks?ref=w_pl_prvw
When I include their code of <input data-action ... it gives me an error saying the name is not defined
<!-- You must include this JavaScript file -->
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script
<!-- For the full list of available Crowd HTML Elements and their input/output documentation,
please refer to https://docs.aws.amazon.com/sagemaker/latest/dg/sms-ui-template-reference.html -->
<!-- You must include crowd-form so that your task submits answers to MTurk -->
<crowd-form answer-format="flatten-objects">
<div>
<strong>Instructions: </strong>
<span>XX</span>
<div>
<div>
<p>Link to the Website: URL </p>
<p>City: "${City}"</p>
</div>
<div>
<table>
<tr>
<th>Plan Name</th>
<th>Price</th>
<th>Internet Quota (GB)</th>
<th>Local Quota (GB)</th>
<th>Other Quota</th>
</tr>
<tr>
<td>
<form>
<crowd-input name="Plan" placeholder="e.g. InternetMAX 4.5GB" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Price (Rp)" placeholder="e.g. 42000" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Internet Quota GB" placeholder="e.g. 0.5" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Local Quota GB" placeholder="e.g. 2" required></crowd-input>
</form>
</td>
<td>
<form>
<crowd-input name="Other Quota GB" placeholder="e.g. 0.5" required></crowd-input>
</form>
</td>
<td>
<input data-action="more-items" type="button" value="Add Items">
</td>
</tr>
</table>
</div>
</div>
</div>
```
``

Related

Angular material form validation and error not correctly displayed

Form inputs error messages and form entries are not updated when the inputs are changed.
I tried to switch to form instead of ng-form, tried different kind of validations (required, email, pattern, ...) None seemed to change anything.
I am using
angular 1.7
angular-material 1.1.9
angualr-messages 1.7
This form is inside a table > tbody
<ng-form name="editedJiraForm">
<tr md-row ng-repeat="task in jira.tasks track by $index">
<td md-cell>
<md-input-container>
<label>Title</label>
<input name="title" ng-model="editedJira.title" required>
<div ng-messages="editedJiraForm.title.$error" md-auto-hide="false">
<div ng-message="required">Title required</div>
</div>
</md-input-container>
</td>
<td md-cell>
<md-input-container>
<label>Description</label>
<textarea name="description" ng-model="editedJira.description" md-maxlength="5000" rows="3" md-select-on-focus required></textarea>
<div ng-messages="editedJiraForm.description.$error" md-auto-hide="false">
<div ng-message="required">Description required</div>
</div>
</md-input-container>
</td>
<td md-cell>
<md-input-container>
<label>Priority</label>
<input name="priority" ng-model="editedJira.ubi_priority" ng-pattern="/^(01|02|03)$/"/>
<div ng-messages="editedJiraForm.priority.$error" md-auto-hide="false">
<div ng-message="pattern">Invalid priority</div>
</div>
</md-input-container>
</td>
<td md-cell>
<md-input-container>
<label>Estimation</label>
<input name="estimation" ng-model="editedJira.estimation" ng-pattern="/^\d+(.\d+)?$/">
<div ng-messages="editedJiraForm.estimation.$error" md-auto-hide="false">
<div ng-message="pattern">Invalid estimation, use int or float</div>
</div>
</md-input-container>
</td>
<td md-cell>
<md-button ng-disabled="editedJiraForm.$invalid" class="md-fab md-primary md-mini" aria-label="validate" ng-click="editJira(selection.feature, $index, true)">
<md-icon md-svg-src="static/images/validate.svg"></md-icon>
</md-button>
<md-button class="md-fab md-primary md-mini" aria-label="cancel" ng-click="editJira(selection.feature, $index)">
<md-icon md-svg-src="static/images/cancel.svg"></md-icon>
</md-button>
</td>
</tr>
</ng-form>
I expect to have
- The messages displayed when for instance the priority does not match the pattern.
- Similarly, when the form is invalid the validate button should be disabled.
Though in my case:
- The inputs fields do become red when the pattern or requirement is not respected but the messages do not show up.
- The validation button is always active.
When displaying the editedJiraForm in the html it is not updated as I edit the form, maybe a problem there ?
Ok if anybody got a similar problem, I found an answer from there
This was due because of the form being split into several breaking it.
The solution was to remove the actual element and replace it by using ng-form name="editedJiraForm" on the element.
This gives the following code:
<tr ng-form name="editedJiraForm">
<td md-cell>
<md-input-container>
<label>Title</label>
<input name="title" ng-model="editedJira.title" required>
<div ng-messages="editedJiraForm.title.$error" md-auto-hide="false">
<div ng-message="required">Title required</div>
</div>
</md-input-container>
</td>
<td md-cell>
....
</td>
</tr>

Dojo - Upload two files in one Form

I use Dojo and want to send two files and one String to a REST Service. The HTML for that is the following:
//...
<script>
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.CheckBox");
dojo.require("dojox.form.Uploader");
dojo.require("dojox.embed.Flash");
if(dojox.embed.Flash.available){
dojo.require("dojox.form.uploader.plugins.Flash");
}else{
dojo.require("dojox.form.uploader.plugins.IFrame");
}
</script>
//..
<form action="http://localhost:8080/service" enctype="multipart/form-data" method="POST" name="inputDataForm" id="inputDataForm">
<table border="1" cellpadding="1" cellspacing="1" height="88" width="925">
<tbody>
<tr>
<td>Dataset1</td>
<td><input name="train" type="file" value="Browse" data-dojo-type="dojox/form/Uploader"/></td>
</tr>
<tr>
<td>Dataset2</td>
<td><input name="test" type="file" value="Browse" data-dojo-type="dojox/form/Uploader"/></td>
</tr>
<tr>
<td>Number of Customers</td>
<td><input name="numberCustomers" size="40" type="text" data-dojo-type="dijit/form/TextBox" /></td>
</tr>
</tbody>
</table>
<p><input name="runButton" type="submit" value="Run" data-dojo-type="dijit/form/Button" id="submitButton" /></p>
</form>
However: If I press the submit button, I can see via Firebug that there are sent TWO POST-Requests. One with the first file and the "Number of Customers" field and one with the second file and the "Number of Customers" field. However, my REST Service wants to have both files and the "Number of Customers" fields in one POST Request. How can i do that? What am I doing wrong?
Thanks a lot in advance
Natan

How to clear all tha data each time the app is accessed?

I actually want to my database entries to be empty each time the app is accessed. But i am not getting any idea regarding this. Below is my code which takes 3 inputs from user and displays them in tabular form but each time I display the table old entries are also getting displayed. I want that once all the entries are displayed the database should get cleared.
<p>enter the name with registration number of students</p>
<form accept-charset="UTF-8" action="/pages/add" method="post">
<input id="nam" name="nam" type="text">
<input id="reg" name="reg" type="text">
<input id="cls" name="cls" type="text">
<input name="commit" type="submit" class="btn" value="Add todo">
</form>
<table width="100%">
<tr>
<th>NAME</th>
<th>REGISTRATION NUMBER</th>
<th>CLASSES ATTENDED</th>
</tr>
<tr>
<% #pages.each do |t| %>
<td><%= t.name_student %></td>
<td><%= t.reg_no %></td>
<td><%= t.classes_at %></td>
</tr>
<% end %>
</table>

URL found in auth.gsp - beginner

I need to know the following. I copied the following code from auth.gsp. I need to know what:
1.) I need to know what '${postUrl}' means?
2.) I did copy this code and paste it in another GSP called index.gsp, but the page didn't login successfully.
<form action='${postUrl}' method='POST' id="loginForm" name="loginForm" autocomplete='off'>
<div class="sign-in">
<h1><g:message code='spring.security.ui.login.signin'/></h1>
<table>
<tr>
<td><label for="username"><g:message code='spring.security.ui.login.username'/></label></td>
<td><input name="j_username" id="username" size="20" /></td>
</tr>
<tr>
<td><label for="password"><g:message code='spring.security.ui.login.password'/></label></td>
<td><input type="password" name="j_password" id="password" size="20" /></td>
</tr>
<tr>
<td colspan='2'>
<input type="checkbox" class="checkbox" name="${rememberMeParameter}" id="remember_me" checked="checked" />
<label for='remember_me'><g:message code='spring.security.ui.login.rememberme'/></label> |
<span class="forgot-link">
<g:link controller='register' action='forgotPassword'><g:message code='spring.security.ui.login.forgotPassword'/></g:link>
</span>
</td>
</tr>
<tr>
<td colspan='2'>
<s2ui:linkButton elementId='register' controller='register' messageCode='spring.security.ui.login.register'/>
<s2ui:submitButton elementId='loginButton' form='loginForm' messageCode='spring.security.ui.login.login'/>
</td>
</tr>
</table>
</div>
</form>
Spring security work on filters. If you print postUrl in your gsp file then it looks like /myApp/j_spring_security_check, only /j_spring_security_check URL is processed by Spring Security filter.
If you past auth.gap and not sending this url then cannot login. Change your gsp slightly to make this run, replace ${postUrl} with ${createLink(uri: '/j_spring_security_check')}.

How to define in Grails an uploadForm and 2 different actions?

I have a gsp view, with an , and 2 input text.
I have a button to save and submit.
Now I would like to add another button with a new action, in my case a button to schedule save.
Note : in my controller I have define : def save (corresponding to button action save) and def schedule (corresponding to button action schedule).
What is the best way to add Schedule in this gsp view :
<g:uploadForm action="save" method="post" >
<div class="dialog">
<table>
<tbody>
<tr class="prop">
<td valign="top" class="name">
<label for="payload">File:</label>
</td>
<td valign="top">
<input type="file" id="payload" name="payload"/>
</td>
<td valign="top">
<input type="file" id="payload2" name="payload2"/>
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="lvalue">Lvalue:</label>
</td>
<td valign="top" class="value ${hasErrors(bean:rmmInstance,field:'lvalue','errors')}">
<input type="text" id="lvalue" name="lvalue" value="${fieldValue(bean:rmmInstance,field:'lvalue')}" />
</td>
</tr>
<tr class="prop">
<td valign="top" class="name">
<label for="wvalue">Wvalue:</label>
</td>
<td valign="top" class="value ${hasErrors(bean:rmmInstance,field:'wvalue','errors')}">
<input type="text" id="wvalue" name="wvalue" value="${fieldValue(bean:rmmInstance,field:'wvalue')}" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="buttons">
<span class="button"><input class="save" type="submit" value="Run Now" /></span>
</div>
</g:uploadForm>
I have just one form, but 2 different actions.
Thanks !
With an actionSubmit:
Purpose
Creates a submit button that maps to a
specific action, which allows you to
have multiple submit buttons in a
single form. Javascript event handlers
can be added using the same parameter
names as in HTML.
From the Grails reference docs.

Resources