tick checkbox on pressing enter key ionic

Question

I have a form with 10 fields and the form looks like in the image i have mentioned here

As you can see in the image, one there are input fields and checkboxes. Here i want to tick the each check box after entering value to input with the mobile's enter key on the keyboard . I have tried with the directive from this stackoverflow ans.

I would like to add my code here , please suggest me if i am doing anything wrong in the code or logic.

Here is my html code :

<label class="item item-input">
        <input type="text" next placeholder="In a word, what is important to you?" ng-model="values.first" ng-disabled="success.first">
        <ion-checkbox ng-click="toggleCheckBox(success.first,values.first,0)"  ng-change="show2='true'" ng-model="success.first"  
               ng-disabled="!values.first" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
      </label>

      <label class="item item-input" ng-show="show2" ng-class="{'animated-custom slideInLeft':success.first}">
        <input type="text" next placeholder="What else is important to you?" ng-model="values.second"  ng-disabled="success.second">

        <ion-checkbox class="checkbox-royal" ng-model="success.second" ng-click="toggleCheckBox(success.second,values.second,1)" ng-change="show3='true'" ng-disabled="!values.second" style="border: none;padding-left: 30px;"></ion-checkbox>
      </label>

And here is the controller snippet:

var values = [],obj={};
   $scope.toggleCheckBox = function(isChecked, value) {
      values = []; // Clean the values
      obj[value] = (isChecked) ? true : false;
      Object.keys(obj).forEach(function(k) {
        obj[k] && values.push(k); // Fill the ordered values
      });
    };

You can handle the enter key like this http://stackoverflow.com/questions/17470790/how-to-use-a-keypress-event-in-angularjs than make the model of the checkbox true. — Bünyamin Sarıgül, Dec 07 '16 at 08:53
How can i trigger the next checkbox function togglecheckbox() from the ng-keydown — Suraz Khanal, Dec 07 '16 at 09:05
You can call it in the `ng-change` of the checkboxes or the handler function you call in `my-enter="handlerFunction()"` — Bünyamin Sarıgül, Dec 07 '16 at 11:06

score 0 · Answer 1 · answered Dec 07 '16 at 08:47

0

<label>
    <input type="text" onkeyup="validateInput(this)">
    <input type="checkbox">
</label><br>
<label>
    <input type="text" onkeyup="validateInput(this)">
    <input type="checkbox">
</label><br>
<label>
    <input type="text" onkeyup="validateInput(this)">
    <input type="checkbox">
</label><br>
<label>
    <input type="text" onkeyup="validateInput(this)">
    <input type="checkbox">
</label><br>
<script>

function validateInput(elmnt){
     if(elmnt.value!==""){
       elmnt.parentNode.childNodes[3].checked = true;
     }

 }
</script>

This is working example of the code you want hope this will help

answered Dec 07 '16 at 08:47

Vikas Kandari

1,612
18
23

Thanks @Vikas Kandari for your solution , not working for me. – Suraz Khanal Dec 07 '16 at 08:58
can i trigger the togglecheckbox() function on keyup event? – Suraz Khanal Dec 07 '16 at 08:59
it is on keyup event – Vikas Kandari Dec 07 '16 at 09:03

score 0 · Answer 2 · answered Dec 07 '16 at 09:13

0

You can try ngEnter directive in the link:

https://gist.github.com/EpokK/5884263

Basically it catches the keydown event which maps to Enter. And you can use it like this:

<input ng-enter="toggleCheckbox()">

answered Dec 07 '16 at 09:13

Faruk Yazici

2,344
18
38

Thanks , but i want to tick the check box after pressing enter . So how could i trigger this toggleCheckBox(success.second,values.second,1) which is currently on the ion-checkbox ng-click event. – Suraz Khanal Dec 07 '16 at 09:26
This code works after pressing enter. Have you tried it on input element? – Faruk Yazici Dec 07 '16 at 09:28

tick checkbox on pressing enter key ionic

2 Answers2