Update value of textfield by clicking on button

Ember Data
1

Not sure if a am in the correct category, but here goes, in the tutorial I have added some funtionality of my own to play around with and learn Ember.

In the controller actions section i added:

  increase:function() {
     $("#qnty-bulk").val += 1;
      console.log($("#qnty-bulk").val);
 },

in the index view within the {{#each itemController=“todo”}} i added:

 <div id="qnty-bulk" >{{view Ember.TextField value=qnty type="number" min="1" max="9999999" disabled=true }}</div>
 <button id="increase" {{action "increase" }}>
      Up
 </button>

how can I by clicking on up increase the value of the textfield by 1 every time i click up button?

thanks

2

If the input you want to change is bound to something, you don’t want to update the text input value directly in the DOM. Instead, you should update the data property associated to that field (the model prop).

But I guess the problem with your code is jQuery.val() usage. Change your increase function to something similar to the following:

increase: function() {
    var inputField = $("#qnty-bulk");
    var inputValue = inputField.val();
    inputValue = (inputValue != null && inputValue != '' ? (isNaN(inputValue) ? 0 : inputValue) : 0); inputValue++;
    inputField.val(inputValue);
},

Note that when you read the value of something you call the .val() function with no parameters (e.g. $('.selector').val()) When you want to write the value into something, you pass the value as the parameter of that function (e.g. $('.selector').val(1)).

3

thank you I changed the code a bit so i can see the value and have it like this now:

i understand the .val part of your answer thanks

  var inputField = $("#qnty-bulk");
  var inputValue = inputField.val();
  //inputValue = (inputValue != null && inputValue != '' ? (isNaN(inputValue) ? 0 : inputValue) : 0);
  inputValue++;
  console.log(inputField.val());  // i see this value go up each time on the click
  inputField.val(inputField.val()); //but no value shows in {{ qnty }}

in my controller i just have:

  <div id="qnty-bulk" >{{ qnty }}</div>
  <button id="increase" {{action "increase" }}>
      Up
 </button>