使用表单输入中的coffeescript编辑已保存的值

时间:2015-01-29 16:15:20

标签: javascript jquery html forms coffeescript

我尝试根据用户输入的内容编辑页面上的数字,但我无法让它完全正常工作。每当我得到它的一部分工作另一部分休息......

我有一个表单输入字段,如:

<input id="timecard_hours" type="number" placeholder="8"/>

在它下面,我有一些东西显示他们已经拥有的小时数(我在这里硬编码为5,但通常是从数据库中获取的数字):

<div class="row">
  <h1 class="center" id="new_timecard_hours">5</h1>
  <p class="center">hours so far this week</p>
</div>

我要做的是获取它,以便当用户在输入字段中键入数字时,该数字将被添加到已经显示在页面底部的小时数。我也想要它,以便如果他们决定改变主意(在提交表单之前)并返回输入字段以更改号码,新号码将被添加到旧的&#34; new_timecard_hours&# 34;而不是他们已经添加的新的。

我到目前为止的咖啡因是这样的:

 $ ->
   $('#timecard_hours').focus ->
     @previousHoursValue = +($('#timecard_hours').val())

   $('#timecard_hours').bind "keyup", ->
     newHours = +($('#timecard_hours').val())
     totalHours = +($('#new_timecard_hours').val()) + newHours - @previousHoursValue
     $('#new_timecard_hours').html(totalHours)

但这不是将它添加到&#34; new_timecard_hours&#34;,它只是替换它。关于如何做到这一点的任何想法?

虽然在这个问题上花了好几个小时,我发现了一些建议我以某种方式保存了&#34; new_timecard_hours&#34;用.data然后将它添加到输入字段值...我没有真正理解它并想出了类似的东西:

oldHours = $('#new_timecard_hours').data($('#new_timecard_hours').text())

但那似乎并没有做任何事......

非常感谢任何想法或帮助!

1 个答案:

答案 0 :(得分:0)

好的,如果其他人有类似的问题,我找到了解决方案......在coffeescript中,totolHours应该是;

totalHours = +($('#new_timecard_hours').text()) + newHours - @previousHours

因为new_timecard_hours是从数据库中获取的,所以不是.val(只有表格输入,如果我没有弄错的话)。