I am submitting form using html and now i have to create a form in android that will send message from textbox same as the website.
I don't want to use webview.
here is my html code:
<form action="http://example.com/form/" method="post">
<input type="text" name="name"/>
<input type="text" name="email" placeholder="Email Address" />
<textarea name="message" placeholder="Type your Message"></textarea>
<input type="submit" value="Send" />
</form>
Thanks
Related
I have an Ionic/Cordova app on both Android and iOS that has a signup form. In an effort to streamline the signup form I am trying to add autocomplete='auto-fill-field' to each of the input fields but so far I have not been able to get them to work.
My app is using all of the latest webviews supplied by Cordova.
Is it possible to get standard web input autocomplete fields to work on a bundled cordova app? If so, how? My hunch is that it won't work because the webviews don't have access to the standard chrome/safari browser. I see lots of posts about it but none of the ones I have reviewed have been able to get it to work for me.
This is my current signup form:
<div style="width:95%;margin-left:2.5%;">
<div style="height:25px;">
<input type="text" placeholder="First Name" class="registerFields" id="user_fName" autocomplete="given-name" ng-model="regObj.user_fName" ng-blur="setInfo('user_fName')" />
<input type="text" placeholder="Last Name" class="registerFields" id="user_lName" autocomplete="family-name" ng-model="regObj.user_lName" ng-blur="setInfo('user_lName')" />
</div>
<div style="height:25px;margin-top:10px;"><input type="email" placeholder="Email" class="registerFields" id="user_email" autocomplete="email" ng-model="regObj.user_email" ng-blur="setInfo('user_email')" /></div>
<div style="height:25px;margin-top:10px;">
<select class="registerFields" id="user_phoneCountry" ng-change="selectPhone();" autocomplete="country" ng-model="regObj.user_phoneCountry">
<option ng-value="" ng-if="false"></option>
<option ng-selected="pKey==regObj.user_phoneCountry" ng-repeat="pKey in notSorted(countries)" ng-value="pKey">{{pKey}}</option>
</select>
<input type="number" placeholder="Mobile Number" class="registerFields" inputmode="numeric" pattern="[0-9]*" id="user_phone" autocomplete="tel-national" ng-model="regObj.user_phone" ng-keypress="monitorLength($event,'user_phone',phoneNumLengths,1)" ng-blur="verifyLength('user_phone',phoneNumLengths,regObj.countryCode+' phone number')" />
</div>
<div style="height:25px;margin-top:10px;">
<select class="registerFields" id="user_zipCountry" autocomplete="country" ng-change="selectCountry();" ng-model="regObj.user_zipCountry">
<option value="" ng-if="false"></option>
<option ng-selected="cKey==regObj.user_zipCountry" ng-repeat="cKey in notSorted(countries)" value="{{cKey}}">{{cKey}}</option>
</select>
<input type="text" ng-if="regObj.postalInput=='text'" placeholder="Home PostalCode" style="width:70%;float:right;" autocomplete="postal-code" class="registerFields" pattern="[a-zA-Z0-9 -]*" id="user_RegZip" ng-model="regObj.user_RegZip" ng-keypress="monitorLength($event,'user_RegZip',postalCodeLengths,2)" ng-blur="verifyLength('user_RegZip',postalCodeLengths,regObj.countryCode+' postal code')" />
<input type="tel" ng-if="regObj.postalInput=='tel'" placeholder="Home Postal Code" autocomplete="postal-code" class="registerFields" inputmode="numeric" pattern="[0-9 -]*" id="user_RegZip" ng-model="regObj.user_RegZip" ng-keypress="monitorLength($event,'user_RegZip',postalCodeLengths,2)" ng-blur="verifyLength('user_RegZip',postalCodeLengths,regObj.countryCode+' postal code')" />
</div>
</div>
Try to attach name attribute to each and every field.
After attaching name attribute the keyboard started to give suggestion to autocomplete the field
<input type="email" autocomplete="email" name="email"/>
<input type="tel" autocomplete="mobile" name="phone" pattern="[0-9]*"/>
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've got a simple form that uploads some basic info and an image to my formtools database. It works perfectly on desktop but not on mobile. On my Android phone when I test it it asks me to select the camera or file browser I have tried both camera and file browser and I take a picure / upload an image which it seems to do then loads the thank you page, but when I go the the form tools database the image has not been uploaded.
Anyone know why this isn't working?
here's the form
<form enctype="multipart/form-data" id="competitionform" class="uniForm cmxform" name="competitionform" method="post" action="/formtools/process.php">
<input type="hidden" name="form_tools_form_id" value="110" />
<header>
<h2>Upload your image</h2>
</header>
<label>Your Name </label>
<input width="100px;" type="text" placeholder=" " name="name" />
<label>Your Email </label>
<input type="text" placeholder=" " name="email" /> <
<label for="file">Upload Selfie</label>
<input type="file" name="uploadselfie"/>
<input type="submit" id="submit" value="Upload Selfie" />
</form>
I've also tried adding
accept="image/*" capture="camera"
to the input which opens the camera lets you take a picture then loads the thank you page but again no image is uploaded to the formtools database.
Thanks
<form> with enctype="multipart/form-data" can only upload pic/files and so on .It can't send other input which type is text to the database.
This point, you must set two forms, one for input type=text, another for input type=file.
I have the below HTML code which basically sends mail on click of submit button
<form action="mailto:xxx#gmail.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="Name"><br>
E-mail:<br>
<input type="text" name="mail" value="E-Mail"><br>
Comment:<br>
<input type="text" name="comment" value="Comments" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
when I hit the submit button in the phonegap application I get the below in the logcat.
DroidGap: GapViewClient.onReceivedError: Error code=-10 Description=net::ERR_UNKNOWN_URL_SCHEME URL=mailto:xxx#gmail.com?body=name%3Dyour%20name%0D%0Amail%3Dxxx%40gmail.com%0D%0Acomment%3Dyour%20comment%0D%0A
I am not able to resolve this issue. Any suggestions or help would be appreciated.
I think you should use email composer Plugins to send email.
SMSComposer plugin
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().