I currently have a html web application which contains a hidden form:
<form id="loginForm" action="" method="post">
<input id="login" name="login" type="hidden" placeholder="Login">
<input id="pwd" name="pwd" type="hidden" placeholder="Password">
</form>
I use Javascript to populate 2 inputs (login, pwd) programatically. Then i look up the address of the device i want to post the information to (dynamic IP address) and post using javascript:
$('#loginForm').attr('action', data.address + "/login");
$('form').submit();
This works well, the device is an embedded controller, and logs me in.
I'm developing an App using codename one to mimic my web application, can i acheive the same somehow using browser component?
Thanks
No need for a form.
If I understood the code correctly you can use something like this:
String address = Socket.getHostOrIP();
Rest.post("https://myurl")
.queryParam("action", address + "/login")
.fetchAsString(response -> {});
I'm not sure about the address line, it will return the local device IP which seems weird for this use case.
Related
I have a very simple form in my react application to fetch the user credit card information as follows.
<form autocomplete="on">
<input class="control" id="card_number" type="tel" name="card_number" autocompletetype="cc-number"/>
<input name="cc-exp-month"/>
<input name="cc-exp-year"/>
<input name="cc-exp"/>
</form>
I also tested in a "react-way"
I want the browser (safari in this case) to show the credit card options like the image below.
Interesting fact:
I can reproduce the expected behavior (in both of the forms mentioned above) when I start my application with npm start (as per the image above).
However, if I run npm run build and serve the ./build folder the credit card options don't show up.
That's what I still don't understand, why the same code works in one way but it doesn't work in another way?
PS1: I'm testing in both cases with HTTPS.
PS2: I tested different input names, autocomplete="cc-number" etc. But none of them worked. As the code works with npm start, I don't think is a code issue.
your HTML needs to be very properly setup for browser to pickup the UI flow and trigger auto fill functionality. It also depends upon browser support as well for example Opera didn't trigger for me, while chrome is working. Could you try following below:
https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/forms/order.html
https://greenido.github.io/Product-Site-101/form-cc-example.html
I have added many working examples below and also please check link of the other answers. This answer contains content from the below mentioned resources and SO answers.
If both of them is working for you then you please compare them with your html.
As i can see above you're html is not formatted properly and doesn't contain even <label> tags along <input>
An example of proper payment form
<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
just as a reminder i would like to add here
How to Enable AutoComplete on your HTML forms
Here are some key points on how to enable autocomplete:
Use a <label> for all your <input> fields
Add a autocomplete attribute to your <input> tags and fill it in using this guide.
Name your name and autocomplete attributes correctly for all <input> tags
Example:
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name#example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
How to name your tags
In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found at https://developers.google.com/web/fundamentals/design-and-ux/input/forms#recommended_input_name_and_autocomplete_attribute_values
For example for CC
Credit Card
Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
Use any of these for autocomplete:
cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
requestAutocomplete()
Read here:
https://developer.chrome.com/multidevice/requestautocomplete-faq
https://www.html5rocks.com/en/tutorials/forms/requestautocomplete/#toc-introduction
https://blog.alexmaccaw.com/requestautocomplete
Resources
Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
"Help Users Checkout Faster with Autofill" from Google in 2015.
For Autofill to work on iOS safari, the page has to be served over HTTPS and the certificate should not be a self-signed one. It has to be one given a valid CA.
Hope this helps
Faced the same issue, check safari preferences
Make sure you are not using private mode or any other visitor account!
i've been going from page to page all over the internet trying to find a simple and recommended way of uploading a single file in angularjs, so far i have found none, what i want is to be able to do something like this:
<input type="file" ng-model="file" id="form.file" />
<input type="text" ng-model="name" id="form.name" />
Then in my controller/service i have a function that posts all my form data:
SomeRandomService.save = function($scope.form) {
return $http
.post('/api/v1/some/random/url/', $scope.form)
};
Is this so difficult in angular? I am a newbie to angular so i can't even understand some of the solutions i have found online.
Is there something way more simpler? A plugin or service or directive that can do this for me?
This article about when to use directives, services and controllers, as awesome and helpful as it is... has me massively confused about everything I think I know about the ideal structure of an angular application and I just need a sanity check:
If you have two inputs:
<label><span>false</span>
<input type='radio' value='false' ng-value='false' ng-model='thing.exists' />
</label>
<label><span>true</span>
<input type='radio' value='true' ng-value='true' ng-model='thing.exists' />
</label>
that are part of a larger form, which will in turn submit to pull in another form... and that information will later be shown for review, is this the correct way to architect that:
TLDR: Flow of execution:
ng-model="thing.exist" ==> thing ==> ThingController ==> a service ==> ...details... ==> getDetails?
Right now I have:
<div ng-controller='ThingController as thing'>
<fieldset>
<label><span>Doesn't exist</span>
<input type='radio' value='false' name='checkExist'
ng-value='false' ng-model='thing.exists' />
</label>
<label><span>Does exist</span>
<input type='radio' value='true' name='checkExist'
ng-value='true' ng-model='thing.exists' />
</label>
</fieldset>
<!-- ... -->
</div>
When the input changes,
I should use ng-change on the inputs to trigger the behavior (like the addition of a directive)... right (via a controller)?
I should use then controller to add the result of the ng-change to a service? Like... passing the model value (thing.exists) to a service so I can use that value later?
As a complication factor- this application uses Require.js to manage dependencies.
(Actually, the article itself isn't the source of my confusion- it's the comments on the article that are killing me.)
That's pretty much it, you've got it right. The idea is the following:
Use directives for managing user interface interactions and -some- state changes
Use controllers for managing a shallow set of logic
Use services for sharing data, functionality and business logic.
Aka, just like on your server - try not to load too much into a controller.
My current code looks like this:
<form name="home.forms.modal">
...
<input ng-model="home.modal.data.text"></input>
<input ng-class="{error: home.forms.modal.name.$error}"
ng-model="home.modal.data.name"
name="name"
ng-minlength="5"
ng-required="true" />
...
</form>
<button ng-disabled="home.forms.modal.$invalid"
ng-click="home.modalSubmit(home.modal.data)">Submit</button>
I noticed there have been recent changes with messages for forms. What I would like to know is there anything at all in AngularJS that requires me to use the form element. If so then how could I change the above code so it would work with just a DIV ?
You can use the ng-form attribute on any element
<div ng-form name="home.forms.modal">
...
<input ng-model="home.modal.data.text"></input>
...
</div>
<button ng-click="home.modalSubmit(home.modal.data)">Submit</button>
validation on the client is way to hell, you should get the validation errors by server in .error callback of $http , and show them to client.
You may need to use forms with such directives, like ui-mask, to get the right value.
Using a form tag is syntactically correct, and some browsers (IE) do not display things correctly when you try to put form elements (input/button/textarea) into a page without them being surrounded by form tags.
I have a form that POST all data that is entered, when saving. But when I refresh the page, not all entries are bound to their respective input fields.
It is a bit strange because I am using ng-model on all the fields.
Here is an example of what doesn't bind:
<input name="full_name" ng-model="user.full_name" type="text" required></input>
and here is one that does bind:
<input name="address" ng-model="user.address" type="text" required></input>
Has anyone run into this issue, or notice something I may be missing?
It could be the browser remembering your last input in the forms. So after refreshing, the browser pre-populates the form and angular doesn't update the scope. There is a Google Groups thread about that. The best solution I found is to add autocomplete="off" in the inputs of the forms. Because after refreshing, there is no way angular could be remembering your last input in the form, unless you are using cookies for that wich you are obviously not.