Unable to call 'onSuccess' or 'onFailure' of adapter invocation - ibm-mobilefirst

Question

I have an adapter which retrieves a JSON object, but strangely everything works fine if the form uses only button, but if I put <input type="text"> then WL.Client.invokeProcedure's callbacks ('onSuccess' or 'onFailure') or not called...
Adapter Code:
intranetId="my-email-address";
var invocationData = {
adapter : 'RoleAdapter',
procedure : 'getRoles',
parameters : [intranetId,"role"]
};
WL.Client.invokeProcedure(invocationData, {
onSuccess : function(res){ console.log('win', res); },
onFailure : function(res){ console.log('fail', res); }
HTML Form:
<div id="welcome">
<form action="#welcome2" onsubmit="getRole()">
<input type="text" id="userId">
<br/>
<input type="password" name = "password">
<br/>
<input type="submit" value="Login">
</form>
</div>
I am able to get value of userId, and even if I hardcode it in getRole() same problem...
edit:
On changing the html form to this
<div id="welcome">
<form action="#welcome2" onsubmit="return getRole()">
<input type="submit" value="go">
</form>
</div>
I tried debugging, but cudnt get anything.
edit2:
I fixed it!
So basically, In html form you cannot add 'name' property to an input element when you are using with worklight. Don't know why it is so..

Answer 1

This worked for me...
Full example here: https://stackoverflow.com/a/17852974/1530814
index.html
<form onsubmit="submitName()">
First name: <input type="text" id="firstname"/><br>
Last name: <input type="text" id="lastname"/><br>
<input type="submit" value="Submit Name"/>
</form>
main.js
function wlCommonInit(){
}
function submitName() {
var invocationData = {
adapter : 'exampleAdapter',
procedure : "showParameters",
parameters : [$('#firstname').val(),$('#lastname').val()]
};
var options = {
onSuccess : success,
onFailure : failure
};
WL.Client.invokeProcedure(invocationData, options);
}
function success() {
alert ("success");
}
function failure(res) {
alert ("failure");
}