AngularJS: Form submission not returning the values in JSON

Question

I am using the way on other pages and form works fine. But with the following HTML and AngularJS code, the form returns empty values against each key in JSON.

JSON return on form submission:

{
    "name":"",
    "description":"",
    "daystart":"",
    "dayend":"",
    "sendbusytone":"",
    "divertto":"",
    "extension":"",
    "password":"",
    "registrar":"",
    "secregistrar":"",
    "port":"",
    "realem":"",
    "maxcalls":"",
    "busytone":"",
    "diverttofor":"",
    "divertbusytune":"",
    "diverttoqns":""
}

HTML:

<div class="content">
    <form method="post" id="queue_form" name="queue_form1" ng-submit="addqueue()">
        <div class="scrollable">
            <div class="section1">
                <div class="content_left">
                    <div id="content_left_header">
                        <div class="header_left_side">
                            <img src="Images/queue_info.png" />
                            <span class="header_text_info">Queue Information</span>
                        </div>
                        <div class="header_right_side">
                            <img src="images/minus_icon.png" />
                        </div>
                    </div>

                    <div id="content_name" class="w-330 m-t22">
                        <label class="input_text">Name</label>
                        <input type="text" name="name" ng-model="name" placeholder="name" class="w_140 text-field" required />
                    </div>
                    <div id="content_select" class="w-330">
                        <label class="input_text">Site</label>
                        <select class="select_width">
                            <option name="Type1">Type 1</option>
                            <option name="Type2">Type 2</option>
                            <option name="Type3">Type 3</option>
                        </select>
                    </div>
                    <div id="content_textarea" class="w-330">
                        <label class="input_text">Description</label>
                        <textarea class="textarea_h_w" name="description" ng-model="description" required></textarea>
                    </div>

                </div>
                <div class="qns">
                    <div id="content_right_header">
                        <div class="header_left_side">
                            <img src="Images/queuenservice.png" />
                            <span class="header_text_ser">Queue Night Service</span>
                        </div>
                        <div class="header_right_side">
                            <img src="images/minus_icon.png" />
                        </div>
                    </div>
                    <div class="content_extension w-330 m-t22">
                        <label class="input_text">Day Start</label>
                        <input type="text" name="daystart" ng-model="daystart" class="w_140 text-field" required />
                    </div>
                    <div class="content_extension w-330">
                        <label class="input_text">Day End</label>
                        <input type="text" name="dayend" ng-model="dayend" class="w_140 text-field" required />
                    </div>
                    <div class="max-calls">
                        <label class="maxcall-lbl">Divert Settings</label>
                        <div class="content_extension w-330">
                            <input type="radio" class="radio-option" name="sendbusytone" ng-model="sendbusytone" />
                            <span class="input_name">Send busy tone</span>
                        </div>
                        <div class="content_divert w-330">
                            <input type="radio" class="radio-option m-l20" />
                            <span class="radio_txt">Divert to</span>
                            <input type="text" name="text" class="divert-text" ng-model="diverttoqns" required />
                        </div>
                    </div>
                </div>
            </div>
            <div class="section2">
                <div class="content_right">
                    <div id="Div1">
                        <div class="header_left_side">
                            <img src="Images/profile.png" />
                            <span class="header_text_agent">Profile</span>
                        </div>
                        <div class="header_right_side">
                            <img src="Images/minus_icon.png" />
                        </div>
                    </div>
                    <div class="content_right_left">
                        <div class="content_extension w-330 m-t22">
                            <label class="input_text">Extension</label>
                            <input class="w_140 text-field" type="text" name="extension" ng-model="extension" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Password</label>
                            <input class="w_140 text-field" type="password" name="password" ng-model="password" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Registrar</label>
                            <input class="w_140 text-field" type="text" name="registrar" ng-model="registrar" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Sec.Registrar</label>
                            <input class="w_140 text-field" type="text" name="secregistrar" ng-model="secregistrar" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Transport Meidum</label>
                            <select class="option_width">
                                <option name="UDP">UDP</option>
                                <option name="EDP">EDP</option>
                                <option name="CSS">CSS</option>
                            </select>
                        </div>


                        <div class="content_extension w-330">
                            <label class="input_text">Port</label>
                            <input type="text" name="port" class="w_140 text-field" ng-model="port" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">proxy</label>
                            <input type="text" name="proxy" class="w_140 text-field" ng-model="proxy" required />
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Category</label>
                            <select class="select_width">
                                <option name="Internal" value="1">Internal</option>
                                <option name="External" value="2">External</option>
                            </select>
                        </div>
                        <div class="content_extension w-330">
                            <label class="input_text">Realm</label>
                            <input type="text" name="realem" class="w_140 text-field" ng-model="realem" required />
                        </div>
                    </div>
                </div>
            </div>
            <div class="section3">
                <div class="content_thersholds">
                    <div id="Div2">
                        <div class="header_left_side">
                            <img src="Images/queue_threshold.png" />
                            <span class="header_text_ext">Thersholds</span>
                        </div>
                        <div class="header_right_side">
                            <img src="images/minus_icon.png" />
                        </div>
                    </div>
                    <div class="max-calls m-t22">
                        <label class="maxcall-lbl">Maximum Calls - Divert Settings</label>
                        <div class="content_extension w-330">
                            <label class="max_calls">Maximum Calls</label>
                            <input type="text" name="maxcalls" class="w_140 text-field" ng-model="maxcalls" required />
                        </div>
                        <div class="content_extension w-330">
                            <input type="radio" class="radio-option" name="busytone" ng-model="busytone" required />
                            <span class="input_name">Send busy tone</span>
                        </div>
                        <div class="content_divert w-330">

                            <span class="radio_txt">Divert to</span>
                            <input type="text" class="divert-text" name="diverttofor" ng-model="diverttofor" required />
                        </div>
                    </div>
                    <div class="max-calls">
                        <label class="maxcall-lbl">NO Operators-Divert Settings</label>
                        <div class="content_extension w-330">
                            <input type="radio" class="radio-option" name="divertbusytune" ng-model="divertbusytune" />
                            <span class="input_name">Send busy tone</span>
                        </div>
                        <div class="content_divert w-330">
                            <input type="radio" class="radio-option m-l20" />
                            <span class="radio_txt">Divert to</span>
                            <input type="text" name="text" class="divert-text" name="diverttoqns" ng-model="diverttoqns" required />
                        </div>
                    </div>
                </div>
            </div>
            <div class="action-btns">
                <input type="submit" value="Update" class="btnStyle" />
                <input type="button" value="Cancel" class="btnStyle" />
            </div>
        </div>
    </form>
</div>

AngularJS code:

$scope.addqueue = function () {
    AddQueue.save({ 'name': $sanitize($scope.name),
        'description': $sanitize($scope.description),
        'daystart': $sanitize($scope.daystart),
        'dayend': $sanitize($scope.dayend),
        'sendbusytone': $sanitize($scope.sendbusytone),
        'divertto': $sanitize($scope.divertto),
        'extension': $sanitize($scope.extension),
        'password': $sanitize($scope.password),
        'registrar': $sanitize($scope.registrar),
        'secregistrar': $sanitize($scope.secregistrar),
        'port': $sanitize($scope.port),
        'realem': $sanitize($scope.realem),
        'maxcalls': $sanitize($scope.maxcalls),
        'busytone': $sanitize($scope.busytone),
        'diverttofor': $sanitize($scope.diverttofor),
        'divertbusytune': $sanitize($scope.divertbusytune),
        'diverttoqns': $sanitize($scope.diverttoqns)
    },
    function (response) {
        alert($scope.name);
        console.log($scope.name);
        console.log(AddQueue);
        var path = '/layout';
        console.log(angular.fromJson(response));
        $scope.result_addqueue = response;
        if ($scope.result_addqueue.status == true) {


        } else {

            $scope.msg = $scope.result_addqueue.message;
        }
        $location.path(path);
        $scope.loadMenu();
        $scope.loadQueues();

    });
};

Answer 1

I would create a model called queue or queueItem and add the properties on that model instead of doing it directly on the scope. There has been numerous posts about the "dot" and the use of it in the scope. So first, put everything on an object you do not change directly.

Example in the HTML

<input type="text" class="divert-text" name="diverttofor" ng-model="queueItem.diverttofor" required />

And your save would also be a heck of lot easier:

$scope.addqueue = function () {
  AddQueue.save($scope.queueItem, function (response) {
    console.log(response); // If you use Chrome, you don't need to stringify this.
  });
};

A sidenote, consider (if you're the author) changing AddQueue.save to work with promises instead, so you can chain the result/response.

Another thing you could do, is change your code to be more modular. Instead of working directly on $scope.queueItem, you could have your $scope.addqueue pass a reference to the object. I see your page is actually submitting, which could be the cause of your problem, the submit will clear the page.

You would change your submit to this (don't use type="submit"):

<input type="button" value="Update" class="btnStyle" ng-click="addqueue(queueItem)" />

And change your addqueue to this:

$scope.addqueue = function (queueItem) {
  AddQueue.save(queueItem, ...