Muhammad Umer Muhammad Umer - 5 months ago 9
Javascript Question

Angularjs, Modify/Remove data on form submit

I have an input field in form that I dont want to send. Even though i removed the name on input field it stills get sent probably due to angular magic.

To prevent this I thought if I could remove this item from post request it'd be the solution.

<input type='radio' ng-model='birthday' ng-value='true'>


when form submits POST has field called birthday despite input not having a name attribute. So how do i prevent it from showing up.

Form is html template, and controller is called on ng-submit

Answer

I think that you may be looking for the disabled property:

<input type='radio' ng-model='birthday' ng-value='true' disabled="true">

Edited

Here is an example of how you could use the disabled property for not sending undesired information with the form on submit:

<html>
    <body>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

        <script>

            var TestApp = angular.module("TestApp", []);        

            TestApp.controller('TestCtrl', function($scope) {
              $scope.needsBirthdayDisabled = false;
              $scope.needsBirthday = false;

              $scope.sendForm = function(form) {                
                $scope.needsBirthdayDisabled = true; //if you comment this line, the "yep"'s input value will be sent with the form
                form.$submitted = true;       
              };

            });

        </script>

        <div ng-app="TestApp" ng-controller="TestCtrl">

            <form action="" method="get" name="myForm" ng-submit="sendForm(this)">

                <div>
                    <label for="Description">Name</label>
                    <input type="text" name="name" ng-model="name"/> 
                </div>

                <div ng-show="needsBirthday">
                    <label for="birthday">Birthday</label>
                    <input type="text" name="birthday" ng-model="birthday"/> 
                </div>

                <div>
                    <label>Needs Birthday</label>               
                    Yep <input type='radio' name="yep" ng-model='needsBirthday' ng-value='true' ng-disabled="needsBirthdayDisabled">                                    
                </div>

                <input type="submit" value="Go!"/>
            </form>

        </div>

    </body>
</html>
Comments