Re: Proposal for Input Money element type in HTML5

On Wed, Mar 4, 2015 at 11:56 PM, Karl Dubost <karl@la-grange.net> wrote:
> Cameron,
>
> Le 4 mars 2015 à 23:46, Cameron Jones <cmhjones@gmail.com> a écrit :
>> There is possibly also a case for a new input type for a currency-code
>> which would be populated corresponding to currency code lists, with
>> integration with datalist as you suggest.
>
>
> Do you think about Web sites like airbnb which **displays** but does not send a value.
>


Sure, but to define a UI element which forces currency conversion
capabilities on server side code is too onerous. it would require
servers to have a foreign exchange rate mechanism which inevitably
requires further external service calls in order to remain up to date.

For each of the example sites, they would be able to use currency
inputs in order to manage formatting and symbol/code display while
still integrating with their back-end forex to provide their more
advanced service capabilities.

Cameron


>
> # AIRBNB
> ========
>
> Create a search and at the bottom right corner, you may select a different currency for displaying the prices.
> https://www.airbnb.com/s/paris?checkin=07%2F13%2F2015&checkout=07%2F20%2F2015&guests=2
>
>
> <select class="currency-selector">
>       <option value="AED">AED</option>
>       <option value="ARS">ARS</option>
> …
>       <option value="JPY" selected="">JPY</option>
> …
> </select>
>
> which in return does
>
>     changeCurrency: function (g, h) {
>       e.post('/users/change_currency', {
>         new_currency: g
>       }, h)
>
> The change rate is done server-side.
>
>
>
>
> # TripAdvisor
> =============
>
> <div id="GLOBAL_CURRENCY_PICKER">
>   <ul class="currency_list">
>     <li class="global_currency_item"
>         onclick="ta.util.currency.setCurrencyAndReload('JPY', '')">
>       <span class="global_currency_picker_item_code">JPY</span>
>       <span>円</span>
>     </li>
>
>     …
>
>   </ul>
> </div>
>
> tied to which set a cookie. Conversion done on the server side.
>
> ta.util.currency.setCurrencyAndReload = function(a, b) {
>     var c = "SetCurrency";
>     Cookie.write(c, a, {
>         time: 15
>     });
>     b = b ? b + "|" : "";
>     ta.trackEventOnPage("CurrencyPicker", "Select", b + a);
>     location.reload(true)
> };
>
>
>
> # Etsy
> ======
>
> has a more complicated UI, but use input.
>
> <form method="post" action="" onsubmit="return false">
>    <input name="_nnc" value="3:1425511452:UO8rwXN9hSXXPaCY2hrJTRvdC-9g:0f62cb94273823315952665fda1eae01ffeb9b6dacaffb2b8725e41ebd59cada" class="hidden csrf" type="hidden">
>    <input name="region_code" value="" type="hidden">
> […]
>
>
> <div id="currency-tab-content" class="overlay-tab-content active">
>   <h2>Choose your currency:</h2>
>   <div class="locale-selector currency-selector currencies">
>     <ul class="col major choose-one">
>       <li class="selected">
>         <input checked="checked"
>                name="currency_code" value="USD"
>                id="currency-code-uid-278-USD" type="radio">
>         <label for="currency-code-uid-278-USD" title="United States Dollar">
>           <span class="currency-symbol">$</span> United States Dollar
>           <span class="currency-code">USD</span>
>         </label>
>       </li>
>       <li class="">
>         <input name="currency_code"
>                value="CAD"
>                id="currency-code-uid-278-CAD" type="radio">
>         <label for="currency-code-uid-278-CAD" title="Canadian Dollar">
>           <span class="currency-symbol">$</span> Canadian Dollar
>           <span class="currency-code">CAD</span>
>         </label>
>       </li>
>
>     …
>
>    </ul>
>
>    <div class="minor-mobile">
>       <select id="other-currencies">
>         <option value="">-- Other Currencies --</option>
>         <option value="CZK">
>           Kč Czech Koruna CZK
>         </option>
>
>         …
>
>       </select>
>     </div>
>   </div>
> </div>
>
>
> tied to the POST form.
> https://www.etsy.com/api/v2/ajax/locale/preference-secure
>
> Request body
> _nnc=3%3A1425512471%3AigKVorMD-BNb5qeQ5yWgIeWiTytF%3A483fd678948fb9e14a1ef67653d74d6f2c56ade1e8731508464fcaa0e5c77405&region_code=&language_code=en-US&region_code=XX&currency_code=EUR&locale_url=https%3A%2F%2Fwww.etsy.com%2Flisting%2F212712866%2Fdaynight-mug-set%3Fref%3Dhp_trending
>
> Response body
> {"count":4,"results":{"action":"update","currency_code":"EUR","language_code":"en-US","region_code":"XX"},"params":{"suggested_currency_code":"","suggested_language_code":"","suggested_region_code":"","currency_code":"EUR","language_code":"en-US","region_code":"XX"},"type":"array","pagination":{}}
>
>
>
> # PAYPAL
> ========
>
> You can send money in the currency of your choice.
>
>
> <form class="transferPage send" name="sendMoney">
>     […]
>           <div class="textInput amount amount amount lap">
>             <label for="amount">Montant</label>
>             <input id="amount" name="amount" class="hasHelp validate" required="required" aria-required="true" value="" autocomplete="off" pattern="[^\d]{0,}(\d+)[\.|,]?(\d{0,})?" min="0" max="18069" data-decimal-separator="," type="text">
>
>             […]
>
>             </div>
>           </div>
>           <div class="currencies">
>             <div class="nativeDropdown lap enhanced">
>               <div class="selectDropdown icon-arrow-down-small">
>                 <label for="currencies">Currency</label>
>                 <select id="currencies"
>                         name="currencies"
>                         class="needsclick validate"
>                         required="required" aria-required="true">
>                   <option data-symbol="€" data-code="EUR">EUR</option>
>
>                   […]
>
>                 </select>
>                 <div class="custom-select" aria-hidden="true">EUR</div>
>               </div>
>             </div>
>           </div>
> </form>
>
>
>
>
>
> --
> Karl Dubost 🐄
> http://www.la-grange.net/karl/
>

Received on Thursday, 5 March 2015 12:23:38 UTC