handle android go button using phonegap

Question

Am working in HTML5 and PhoneGap. Currently am facing an issue ; I couldn't handle the GO button of Android softkeyboad. My Functionality is that; I have a Login button and when i enter password and click on the GO button of the keyboard it will be process the same function of Submit Button in my page. like in the Screen shot

Is there any solution for this?? When Trying like my latest code event is working but jQUERY AJAX calling is not working. :(

.. HTML code ..

  <div data-role="page" id="page_login">
  <div data-role="header" id="header_login">
  <img src="images/loginheaderlogo.png" id="login_header_logo"><br/>
  <img src="images/loginheaderarrow.png" id="login_header_arrow">
  </div>
    <div data-role="content" id="content_login" class="max_width scrolling">
    <form onsubmit="userLogin()"> <!--form submit-->
    <div id="login_textbox_container">
    <span class="valid" id="username_valid"></span>
    <img src="images/loginusericon.png" id="login_text_icon">
    <label class="input">
    <span>Username</span>
    <input type="text" id="input_usersername">
    </label>
    </div>
    <div id="login_textbox_container"><span class="valid" id="password_valid"></span>
    <img src="images/loginpassicon.png" id="login_text_icon">
    <label class="input">
    <span>Password</span>
    <input type="number" id="input_password">
    </label>
    </div>
    <div style="text-align:center; margin-top:37px">
    <div class="main_button"  id="login_button">
    <div class="left"></div>
    <div class="center">LOGIN</div>
    <div class="right"></div>
    </div> 
    <input type="submit" value="Login" id="btnSubmit" data-role="none"/>                    
    </div>
    </form>
    </div>
    </div>         

.. JS code ..

    $("#login_button").on( 'click', function(event) {
    userLogin();
    });

.. Ajax Call ..

    function userLogin() {
  var varData = 'username='+$('#input_usersername').val()+'&password='+$('#input_password').val();
var Validation_result = UserLogin_Validation()
if(Validation_result == true) {
$(".pre_loader").show();
setTimeout (function(){
$.ajax({
    type: "POST",
    url: 'http://xxx.xx.net/authenticate.php',
    data: varData,
    dataType: "json",
    crossDomain: true,
    cache: false,
    async: false,
    success: function (data) {
        userToken=data.token;
        localStorage.removeItem("TOKEN");
        localStorage.setItem("TOKEN",userToken);
        if(userToken!=0)
        {
            var query=[$('#input_usersername').val(),$('#input_password').val(),userToken,timeStamp];

            obj.insertLogin(query);
        }
        else
        {
            alert('Invalid User')
            $(".pre_loader").hide();
        }
    },
    error: OnError
});
},1000);}
    }

Answer 1

I assume the 'go' button only works for submitting forms.

I do not see a form in your html.

<form onsubmit="userLogin()">
    <label>username</label>
    <input type="text" name="username" />
    <label>password</label>
    <input type="password" name="password" />
    <input type="submit" value= "submit">submit my form</form>
</form>

---

Edit

I have a working example: http://jsbin.com/IgeHUdEz/edit I have stripped the HTML somewhat, but please note at how you should use labels with the for attribute.

HTML

<div data-role="page" id="page_login">
    <form id="loginform" name="login"> <!--form submit-->
        <label class="input" for="input_usersername">
            <span>Username</span>
        </label>
        <input type="text" id="input_usersername">
        <label class="input" for="input_password">
            <span>Password</span>
        </label>
        <input type="number" id="input_password">
        <div style="text-align:center; margin-top:37px">
            <div class="main_button"  id="login_button"> 
                <input type="submit" value="Login" id="btnSubmit" data-role="none"/>
            </div>
        </div>
    </form>                   
</div>

Javascript

$("#loginform").on( 'submit', function(event) {
  userLogin();
});

function userLogin() {
  alert($('#input_usersername').val() + " - " + $('#input_password').val());
}

Answer 2

For future readers, alternate answer if you don't want to use forms.

document.addEventListener('deviceready', function () {
    document.getElementById('pwd').addEventListener('keypress',CheckKeyPress);
};

CheckKeyPress = function(e)
{
    if (e.keyCode == 13)
    {
        userLogin(); 
    }
}