I am using a simple form to send an email but on my device the click is not firing anything.
Here is my code:
<form class="form-inline" action="mailto:user#gmail.com?subject=oggetto" method="post" enctype="text/plain">
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label for="name" class="sr-only">Nome e Cognome</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Nome e Cognome">
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="form-group">
<label for="bambini" class="sr-only">Numero bambini</label>
<input type="name" name="bambini" class="form-control" id="numBambini" placeholder="Numero di bambini">
</div>
</div>
<div class="col-md-4 col-sm-4">
<input type="submit" class="btn btn-default btn-block">
</input>
</div>
</form>
I tried also with
the tag button type="submit"
with no luck.
My code is working fine on Chrome desktop but on my samsung device works only with Samsung Internet and not with Chrome (I also got the same with a samsung p20).
Any idea on how to fix it?
Thanks
Related
I have a web app that's doing a mailto action on a click action. It seems to work on all platforms, except for android in chrome. It even works in the developer console (desktop) with android devices. The button is clickable, but no actions occur on android devices. Thoughts? Thanks!
<form role="form" action="MAILTO:info#somewebsite.com" method="post" enctype="text/plain">
<div class="col-lg-6 col-xs-2">
<div class="form-group">
<label for="InputName">Your Name</label>
<div class="input-group">
<input type="text" class="form-control" name="Name" id="InputName" placeholder="Enter Name" required>
<span class="input-group-addon"><i class="form-control-feedback"></i></span></div>
</div>
<div class="form-group">
<label for="InputEmail">Your Email</label>
<div class="input-group">
<input type="email" class="form-control" id="InputEmail" name="Email" placeholder="Enter Email" required >
<span class="input-group-addon"><i class="form-control-feedback"></i></span></div>
</div>
<div class="form-group">
<label for="InputMessage">Message</label>
<div class="input-group"
>
<textarea name="Message" id="InputMessage" class="form-control" rows="5" required></textarea>
<span class="input-group-addon"><i class="form-control-feedback"></i></span></div>
</div>
<input type="submit" id="submit" value="Submit" class="btn btn-info pull-right">
</div>
</form>
I have started work on Phonegap and it is very hard for Native App developer to go for Hybrid.
Just want to know that how I can show configuration screen only once in Phonegap. Below is the screenshot. I just want to show it only when user runs an app first time, and not again and again whenever user launches an app and saves IP address.
The problem here is that, whenever I press back button of device, this screen gets display.
Here is my HTML:
<body>
<div data-role="page" id="pageConfig"> // This Div needs to show only first time
<div class="ui-content" data-role="main">
<h3>Configurations</h3>
<label for="ipText">IP Address:</label>
<input type="url" id="ipText" name="ipText" />
Save
</div>
</div>
<div data-role="page" id="pgLgn">
<div data-role="main" class="ui-content">
<form id="form1" class="validate">
<div class="ui-field-contain">
<label for="usrNme">Username:</label>
<input type="text" name="usrNme" id="usrNme" placeholder="Username" data-clear-btn="true" data-theme="d" class="required" />
</div>
<div class="ui-field-contain">
<label for="pswrd">Password:</label>
<input type="password" name="pswrd" id="pswrd" placeholder="Password" data-clear-btn="true" data-theme="d" class="required" />
</div>
<div class="ui-field-contain">
<input type="checkbox" id="chbx-0" class="custom" data-inline="true" />
<label for="chbx-0">Remember me</label>
</div>
<input type="submit" data-inline="true" value="Login" id="btnLogin" data-shadow="false" data-theme="a" onclick="OnLoginClick()"/>
<input type="reset" data-inline="true" value="Reset" data-shadow="false" />
</form>
</div>
</div>
</body>
What Cordova Plugin I need?
NOTE: I am using Jquery Mobile and Cordova SQLite Plugin for data storage. And my app is Single Page Architecture.
Thanks in Advance!
Please let me know if not clear.
You have to write this line in device ready function.
document.addEventListener("backbutton",onBackKeyDown,false);
function onBackKeyDown(){
if($.mobile.activePage.attr("id") == "pgLgn"){
navigator.app.exitApp();
}
else{
navigator.app.backHistory();
}
}
Use localStorage. Save a simple string with key and check whether there is a particular value against key or not in deviceready function.
I am testing a login view on a Samsung galaxy young pro duos which has its own physical keyboard and Android 2.3.6 version but I can't submit the form when I use $cordovaKeyboard in the controller. When I remove $cordovaKeyboard the input does not enter any text.
Here is the controller:
.controller('loginCtrl', function($scope, $http, $location, $ionicLoading, $cordovaKeyboard) {
$scope.enableBackButton = false;
$scope.loginData = {};
$scope.tryLogin = function(loginData) {
alert('Test OK');
};})
And the view:
<ion-view title="HKI-CI Projet Femmes Enceintes" hide-back-button="true">
<div class="bar bar-subheader bar-calm">
<h2 class="title">IDENTIFICATION</h2>
</div>
<ion-content class="padding has-header has-subheader">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Identifiant" ng-model="loginData.identifiant">
</label>
<label class="item item-input">
<input type="password" placeholder="Mot de passe" ng-model="loginData.motDePasse">
</label>
</div>
</ion-content>
<ion-footer-bar>
<div class="button-bar">
<button class="button button-royal ion-checkmark" ng-click="tryLogin(loginData)"> CONNEXION</button>
</div>
</ion-footer-bar></ion-view>
Maybe I miss something so please help me.
is there any known issue of bootstrap 3.0 (the latest one) on android phonegap. I am able to see the buttons nicely on firefox (and on same resolution as on phone) but when the binary is installed on the phone the buttons do not render....
is this a known issue ?
Following is my simple template:
<div id="mcontent">
<div id="swrapper">
<div id="islider">
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="#">Mrs</a>
<a class="btn btn-default" href="#">Ms.</a>
<a class="btn btn-default" href="#">Mr.</a>
</div>
<form>
<input type="text" name="firstname" placeholder="Firstname">
<input type="text" name="lastname" placeholder="Last Name">
<p><input type="text" name="email" placeholder="Email"></p>
<p>Must be at least 8 characters long</p>
<input type="password" placeholder="Password">
<input type="password" placeholder="Password repeat">
<p><button type="submit" class="btn btn-primary btn-large btn- block">Submit</button></p>
<p><span id="dclaimer">By registering you confirm that you accept our Terms of Use and Privacy Policy</span></p>
</form>
</div>
</div>
</div>
I know this is an old post but I have had the same issue. I believe this is down to jquery mobile. As when i removed it, it worked
Removing just the css of jquery mobile seems to keep jquery mobile functionality and allow bs to work
I'm working on phonegapp application. My application has a form which user should fill.I have used inline validation using Jquery. when user clicked some required field & didn't fill the field it will prompt the error or if he try to submit the form all the required fields will be given errors. It works as i want. My problem is when user clicked back-button without submitting the form, all the prompted errors are in the new page.How can i hide those prompted errors when user clicked back-button.
please help me.
I have attached screen shots to picasa-album. check it in here
https://picasaweb.google.com/103544813681982438507/PhonegapApp
Here goes my code..
<html>
<form id="formID" method="post" action="submit.action">
<ul data-role="listview" data-inset="true" data-theme="a">
<li ><div data-role="fieldcontain">
<label for="address">Address</label>
<input type="hidden" name="address" /></div>
<label for="street">Street:</label>
<input type="text" name="street" id="street" value="" class="validate[required] text-input" data-prompt-position="topLeft:50" data-prompt-position="top:60"/>
<label for="suburb">Suburb</label>
<input type="text" name="suburb" id="suburb" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/>
<label for="town">Town</label>
<input type="text" name="town" id="town" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/>
<label for="district">District</label>
<input type="text" name="district" id="district" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/></li>
<li>
<div data-role="fieldcontain">
<label for="date">Date</label>
<input value="" class="validate[required] text-input datepicker" type="text" name="date" id="date" data-prompt-position="topLeft:50" /></div></li>
<li>
<div data-role="fieldcontain">
<label for="owner_name">xxxxxxxx</label>
<input type="text" name="xxxxx" id="xxxxx" value="" class="validate[required] text-input" data-prompt-position="topLeft:50"/></div></li>
<li>
<div data-role="fieldcontain">
<label for="xxxxxx">xxxxxxxxxxxx</label>
<input type="text" name="xxxxxxxxxx" id="xxxxxxxxxxx" value=""/></div>
</li>
</ul>
<div data-role="fieldcontain">
<button type="submit" name="save" id="save" data-theme="a" value="Save" class="submit"/></div>
</form>
</div></div>
<script type="text/javascript">
//Form Validating.................................................
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery("#formID").validationEngine({autoHidePrompt:true});
$( ".datepicker" ).datepicker();
});
</script>
</html>
You can hide the form validation elements when a user navigates away from the current page:
$(document).on('pagehide', function () {
$('#formID').validationEngine('hideAll');
});
Source: https://github.com/posabsolute/jQuery-Validation-Engine
It doesn't look like you're quite following the jQuery Mobile page convention: http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html
Quick Example:
<body>
<div data-role="page">
<div data-role="header>...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</body>
Note that .on() is new as of jQuery 1.7 so if you're using 1.6.4 or older, change .on() to .bind().