Re: Proposal for Input Money element type in HTML5

Hi Karl,

What Cameron just replied is exactly what we want and need. :-)


Kind Regards,



Buhake Sindi

Quoting Cameron Jones <cmhjones@gmail.com>:

> 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 Friday, 6 March 2015 04:24:27 UTC