vendredi 27 février 2015

AngularJS: Form submission not returning the values in JSON

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();

});
};

Aucun commentaire:

Enregistrer un commentaire