submit only checked value from form in angularjs

Question

As in the image above, the form contains 10 input field and 10 check boxes.I want to send text box values only when check box is checked. If the value contains value and check box is unchecked , this should skip corresponding text box value. This is my login form code.

<form id="valueForm" ng-submit="saveValues(values,success)">
<div class="small-input list padding" style="padding-top:4px;">

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

  <label class="item item-input" ng-show="success.first" ng-class="{'animated-custom slideInLeft':success.first}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.second" >
    <ion-checkbox class="checkbox-royal" ng-model="success.second" ng-false-value="true" ng-disabled="!values.second" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.second" ng-class="{'animated-custom slideInLeft':success.second}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.third">
    <ion-checkbox class="checkbox-royal" ng-model="success.third" ng-false-value="true" ng-disabled="!values.third" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.third" ng-class="{'animated-custom slideInLeft':success.third}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.four">
    <ion-checkbox class="checkbox-royal" ng-model="success.four" ng-false-value="true" ng-disabled="!values.four" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.four" ng-class="{'animated-custom slideInLeft':success.four}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.five">
    <ion-checkbox class="checkbox-royal" ng-model="success.five" ng-false-value="true" ng-disabled="!values.five" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.five" ng-class="{'animated-custom slideInLeft':success.five}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.six">
    <ion-checkbox class="checkbox-royal" ng-model="success.six"  ng-false-value="true"ng-disabled="!values.six" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.six" ng-class="{'animated-custom slideInLeft':success.six}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.seven">
    <ion-checkbox class="checkbox-royal" ng-false-value="true" ng-model="success.seven" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.seven" ng-class="{'animated-custom slideInLeft':success.seven}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.eight">
    <ion-checkbox  class="checkbox-royal" ng-model="success.eight" ng-false-value="true" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.eight" ng-class="{'animated-custom slideInLeft':success.eight}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.nine">
    <ion-checkbox class="checkbox-royal" ng-false-value="true" ng-model="success.nine" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

  <label class="item item-input" ng-show="success.nine" ng-class="{'animated-custom slideInLeft':success.nine}">
    <input type="text" placeholder="What else is important to you?" ng-model="values.ten">
    <ion-checkbox class="checkbox-royal"  ng-model="success.ten" style="border: none;padding-left: 30px;"></ion-checkbox>
  </label>

        <button type="submit" ng-show="success.first" class="button button-dark button-shadow pull-right" style="" ><i class="ion-ios-arrow-forward"></i></button>
</div>
</form>

can you share code in you saveValues(values,success) function — Chetan
– Chetan, Commented Nov 14, 2016 at 10:31
i am using localstorage('Values',values) to save value.@Chetan — Suraz Khanal
– Suraz Khanal, Commented Nov 14, 2016 at 10:33

davidxxx · Accepted Answer · 2016-11-16 10:55:56Z

1

Update

Here a version with processing in controller-side when form is submitted. I did the job only for two first cases as it is still awkward in this way. Here a modified version of the pen : pen I used an array to avoid using var (first, second, ...) for each input as you had used. The solution addresses your problem but it is still improvable. The idea would be to render dynamically each input with a function and a ng-repeat directive. Sorry, I cannot take the time now to do that.
Anyway, it gives you a first step to go on :)

HTML :

<html ng-app="myIonic">

  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Multiple input</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

  </head>

  <body ng-controller="appCtrl">
    <form id="valueForm" ng-submit="saveValues()">
    <div class="small-input list padding" style="padding-top:4px;">

      <label class="item item-input">
        <input type="text" placeholder=" what is important to you?" ng-model="values[0].text" >
        <ion-checkbox  ng-change="show2='true'" ng-model="values[0].isChecked"  
               ng-disabled="!values[0].text" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
      </label>

      <label class="item item-input" ng-show="show2">
        <input type="text" placeholder="What else is important to you?" ng-model="values[1].text" >    
        <ion-checkbox class="checkbox-royal" ng-model="values[1].isChecked"  ng-change="show3='true'" ng-disabled="!values[1].text" style="border: none;padding-left: 30px;"></ion-checkbox>
      </label>   

      <button type="submit" ng-show="show2"  class="button button-dark button-shadow pull-right" style="" ><i class="ion-ios-arrow-forward"></i></button>
    </div>
    </form>
  </body>

</html>

JS :

angular.module('myIonic',['ionic'])
.controller('appCtrl',function($scope){      
  $scope.values = [];

  $scope.saveValues = function(){
     console.log("saveValues");        
     var valueTextsChecked=[];

     // keep only input with checkbox selected
     for (var i=0; i<$scope.values.length;i++){    
       var value = $scope.values[i];
       if (value.isChecked){
           valueTextsChecked.push(value.text);
       }
     }
    console.log("valueTextsChecked="+valueTextsChecked);
  }

});

edited Nov 16, 2016 at 10:55

answered Nov 14, 2016 at 12:32

davidxxx

132k23 gold badges231 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Suraz Khanal Over a year ago

Thanks @davidxxx but how to skip the value if the user entered a value but not checked the checkbox?

davidxxx Over a year ago

You are welcome. As I explained in my answer, I propose you rather to clear the text of the input as soon as the checkbox is unchecked by the user. The solution where you leave the text in the input even when the checkbox is unchecked and that after you ignore that in server side is misleading for the user.

Suraz Khanal Over a year ago

could you explain a little bit about how can i skip the unchecked checkbox value, i am experimenting and experimenting from 3 days but no idea how can i skip the unchecked value. And again thanks for your answer.

davidxxx Over a year ago

Re-read my answer. Normally, you should have all needed information to address your need. If something is not clear, don't hesitate to ask me. The idea is attaching a JS function to ng-click attribute. Here : toggleCheckBox(isChecked, value). In that function, you should set value.text to "" value if the checkbox is unchecked.

davidxxx Over a year ago

If you want, create a plnkr which runs with your existing code and I will modify it :)

|

Mikkel · Accepted Answer · 2016-11-14 10:34:51Z

1

Several options:

1) Clear the input fields.

2) Disable the input fields when checkbox not checked

3) Try and organise your markup so that the check boxes are in a separate form from the input fields.

4) Your back end code could ignore the text input field if there is no corresponding checkbox value

answered Nov 14, 2016 at 10:34

Mikkel

7,7773 gold badges20 silver badges32 bronze badges

2 Comments

Suraz Khanal Over a year ago

thanks @Mikkel . please could you explain the fourth point ?.I need to skip unchecked value at the time of form submit.

Mikkel Over a year ago

You have some kind of back end service that receives the data, right? Just modify that to ignore each text that doesn't come with a corresponding checked value

Collectives™ on Stack Overflow

submit only checked value from form in angularjs

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related