2016-04-22 17 views
0

テキストフィールドに数値書式(wNumb)を使用しています。これは範囲スライダ(noUislider)によって更新され、正常に動作します。JavaScriptの書式設定を使用する際に初期値を送信

私が経験してる問題は、私は、フォームを提出する際には、保存された値を1000(桁区切りにおそらく)によって分割されていることです。

送信時にwNumbフォーマットを削除するにはどうすればよいですか?

... 
<%= f.text_field :salary, id: "how-much" %> 

<div id="slider-format"></div> 

    <div class="field"> 
    <%= f.label :comment %><br> 
    <%= f.text_area :comment %> 
    </div> 
    <div class="actions"> 
    <%= f.submit %> 
</div> 

次に、以下のスクリプト:

<script> 
var sliderFormat = document.getElementById('slider-format'); 

noUiSlider.create(sliderFormat, { 
    start: [ 200000 ], 
    step: 1000, 
    connect: 'upper', 
    range: { 
     'min': [ 10000 ], 
     'max': [ 250000 ], 
    }, 
    format: wNumb({ 
     decimals: 0, 
     thousand: '.', 
     postfix: ' (US $)', 
    }) 
}); 

var inputValue = document.getElementById('how-much'); 

sliderFormat.noUiSlider.on('update', function(values, handle) { 
    inputValue.value = values[handle]; 
}); 

inputValue.addEventListener('change', function(){ 
    sliderFormat.noUiSlider.set(this.value); 
}); 
</script> 

http://refreshless.com/wnumb/の指示は以下の通りですが...私は、これは私が使うべきものである場合は、その使用方法を理解していません。

Usage 
var moneyFormat = wNumb({ 
    mark: '.', 
    thousand: ',', 
    prefix: '$ ', 
    postfix: ' p.p.' 
}); 

// Format a number: 
moneyFormat.to(301980.62); 
=> '$ 301,980.62 p.p.' 

// Get a number back: 
moneyFormat.from('$ 301,980.62 p.p.'); 
    => 301980.62 
+0

疑問を明確にする - '$ 301,980.62 p.p.'ではなく' 301980.62'としてvaueを提出しますか?または、フォーマッタが正しく動作していない場合 – Bhumika107

+0

私は301980を設定したいと思いますが、これは$ 301.980と表示されますが、フォームのsubmitボタンをクリックすると301980が再び表示されます。今のところ私はデータベースに301を取得しています... コードの最後のブロックは私のものではなく、ドキュメントのものですが、私のコードでそれをどう使うのか分かりません。 – Sbe88

答えて

0

入力値を保存するときには、入力タグの属性に数値を追加する必要があります。

sliderFormat.noUiSlider.on('update', function(values, handle) { 
    inputValue.value = values[handle]; 
    $(inputValue).attr("actual", parseFloat(values[handle]).toString().replace('.','')); 
}); 

そして、formを送信している間に値をattractualに置き換えることができます。

$("form").on("submit",function() { 
    $("#how-much").val($("#how-much").attr("actual")); 
}); 

これはあなたの要件に応じて動作することを願っています。

+0

ありがとう!その間に私はループも作っています how-muchは現在隠されています。 スライダーの更新 - > how-much how-much updates - >新しいフィールド "displayed"と表示されました updated - > slider – Sbe88

0

私が推測するように、1000財産の問題は、あなたが提供しています。代わりに、

+0

あなたの答えをありがとうが、代わりに。問題に何も変わることはありません。 – Sbe88

関連する問題