Re: Proposal for Input Money element type in HTML5

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.


# 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 Wednesday, 4 March 2015 23:57:33 UTC