hi i want to clear the form values after successfull completion. Houw should i implemnt
<div ng-controller="employeelistController as listControl">
<div class="container form-group" ng-controller="addEmployee as addemp">
<form name="frmEmployee" ng-submit="Add(addemp.employee) && frmEmpbloyee.$valid">
<div class="col-lg-4 ctrmain">
<div class="row">
<div class="col-lg-6">
<strong>Employee No</strong>
</div>
<div class="col-lg-6">
<input type="number" id="txtEmpId" ng-model="addemp.employee.employeeid" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>FirstName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtfirstName" ng-model="addemp.employee.firstname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>LastName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtlastName" ng-model="addemp.employee.lastname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>Department</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtDept" ng-model="addemp.employee.department" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>DOB</strong>
</div>
<div class="col-lg-6">
<input type="date" id="DTdob" ng-model="addemp.employee.dateofbirth" required class="form-control" />
</div>
</div>
<div class="row">
<input type="submit" id="btnSubmit" class="btn btn-primary value=" save" />
</div>
</div>
which is the best way to implement this. I have tried many ways. please help.
$scope.Add = function (emp,$scope) {
this.EmployeeObject = angular.copy(emp);
employee.push(this.EmployeeObject);
$scope.emp = null;
}
which is the best way to implement this. I have tried many ways. please help.
First of all you don't need $scope in the argument of the Add function.
$scope.Add = function (emp) {
this.EmployeeObject = angular.copy(emp);
employees.push(this.EmployeeObject);
this.employee=null;
$scope.$setPristine(true);
}
update it with the demo
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $compile) {
'use strict';
$scope.empList = [];
$scope.addemp = {};
$scope.saveEmp = function(){
$scope.empList.push($scope.addemp);
$scope.reset();
};
$scope.reset = function() {
$scope.addemp = {};
$scope.form.$setPristine();
}
});
input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
input.ng-valid.ng-dirty {
background-color: #78FA89;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
<form name="form" id="form" novalidate ng-submit="saveEmp()">
<div class="row">
<div class="col-lg-6">
<strong>Employee No</strong>
</div>
<div class="col-lg-6">
<input type="number" id="txtEmpId" ng-model="addemp.employeeid" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>FirstName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtfirstName" ng-model="addemp.firstname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>LastName</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtlastName" ng-model="addemp.lastname" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>Department</strong>
</div>
<div class="col-lg-6">
<input type="text" id="txtDept" ng-model="addemp.department" required class="form-control" />
</div>
</div>
<div class="row">
<div class="col-lg-6">
<strong>DOB</strong>
</div>
<div class="col-lg-6">
<input type="date" id="DTdob" ng-model="addemp.dateofbirth" required class="form-control" />
</div>
</div>
<div class="row">
<button type="submit" ng-disabled="form.$invalid ">submit</button>
<button type="reset" ng-disabled="form.$pristine" ng-click="reset()">reset</button>
</div>
</form>
<p>form: {{addemp | json}}</p>
<p>empList: {{empList | json}}</p>
<p>Pristine: {{form.$pristine}}</p>
<p> <pre>Errors: {{form.$error | json}}</pre>
</p>
</div></div>
$scope.Add = function (emp) {
this.EmployeeObject = angular.copy(emp);
employee.push(this.EmployeeObject);
$scope.emp = {}; // initialize the form to empty object
$scope.frmEmployee.$setPristine(); // set it to as user has not interacted with the form.
}
I have cleared textbox with below code. e.g I have cleared FirstName textbox.
HTML SECTION
<td ng-show="a">
<input type="text" ng-model="e.FirstName" />
</td>
Controller SECTION
e.FirstName= "";
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $compile) {
'use strict';
function resetform() {
document.getElementById("frmEmployee").reset();
}
$scope.Add = function (emp,$scope) {
this.EmployeeObject = angular.copy(emp);
employee.push(this.EmployeeObject);
resetform();
}
});
Its pure JavaScript with simple one line code.
document.getElementById('yourFormId').reset()
Add this syntax at the end of the function in controller after submitting the form.
Related
I am trying to create a form that will be enabled and disable depending on the checkbox tick mark.
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input
type="checkbox"
name="is_user"
id="is_user"
onclick="enableCreateUser()"
/>
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
I am trying to make this javascript or jquery function that will allow me to disable or enable this portion with id="user_register".
Here is the code that I tried.
function enableCreateUser() {
if(document.getElementById("is_user").checked){
document.getElementById("user_register").disabled = true;
}
if(!document.getElementById("is_user").checked){
document.getElementById("user_register").disabled = flase;
}
}
Please help me complete this function. Thank you.
You can simply use classList with add and remove function to add custom class .disable_section to show disabled on your section.
Live Demo:
function enableCreateUser() {
if (document.getElementById("is_user").checked) {
document.getElementById("user_register").classList.add('disable_section')
} else {
document.getElementById("user_register").classList.remove('disable_section')
}
}
.disable_section {
pointer-events: none;
opacity: 0.4;
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" />
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
If you want to disable the inputs specifically then you can simply assign ids to your inputs and disable them individually.
Live Demo
function enableCreateUser() {
if (document.getElementById("is_user").checked) {
document.getElementById("user_res").disabled = true;
document.getElementById("pass").disabled = true;
} else {
document.getElementById("user_res").disabled = false;
document.getElementById("pass").disabled = false;
}
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" />
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="user_res" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="pass" />
</div>
</div>
</div>
function enableCreateUser() {
if (document.getElementById("is_user").checked) {
disableForm(true);
}
if (!document.getElementById("is_user").checked) {
disableForm(false);
}
}
function disableForm(flag) {
var elements = document.getElementsByClassName("form-control");
for (var i = 0, len = elements.length; i < len; ++i) {
elements[i].readOnly = flag;
elements[i].disabled = flag;
}
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input type="checkbox" name="is_user" id="is_user" onclick="enableCreateUser()" />
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
use .hidden() for control div
function enableCreateUser() {
var status = document.getElementById("is_user").checked;
document.getElementById("user_register").hidden = status;
}
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input
type="checkbox"
name="is_user"
id="is_user"
onclick="enableCreateUser()"
/>
</div>
</div>
<div class="row" id="user_register">
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</div>
You can do it like this :
NOTE : Remove onclick on checkbox.
<input type="checkbox" name="is_user" id="is_user" />
$('#is_user').on("change", function() {
if ($(this).is(":checked")) {
$('#user_register input').prop("disabled", true);
} else {
$('#user_register input').prop("disabled", false);
}
});
Check out this snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PURFECT MATCH</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,700;1,900&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script type="text/javascript">
function enableCreateUser() {
var form_elements = document.getElementById("myForm").elements;
if (document.getElementById("is_user").checked){
for (var i = 0; i < form_elements.length; ++i)
form_elements[i].readOnly = true;
} else {
for (var i = 0; i < form_elements.length; ++i)
form_elements[i].readOnly = false;
}
}
</script>
</head>
<body onload="enableCreateUser();">
<div class="row">
<div class="col-md-12">
<p>Is this client user</p>
<input
type="checkbox"
name="is_user"
id="is_user"
onclick="enableCreateUser()"
/>
</div>
</div>
<div class="row" id="user_register">
<form id="myForm" >
<div class="form-group row">
<div class="col-md-6">
<label class="" for="username">Username:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="text" name="username" id="" />
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="" for="password">Password:</label>
</div>
<div class="col-md-6">
<input class="form-control" type="password" name="password" id="" />
</div>
</div>
</form>
</div>
</body>
</html>
I have added form having id myForm. In the JavaScript section, using this id function enableCreateUser() access the form and we iterates over the elements of the form, setting their read-only status based on the value of checkbox is_user.
To initialize form elements we calling function enableCreateUser() just after the loading of document is done using onload in <body>.
I know that this might be an old question, but you can also use an event listener for the checkbox, and simply toggle the attribute disabled on and off for the desired input. Like this:
yourCheckbox.addEventListener('change', () => {
yourInput.toggleAttribute('disabled');
});
Using the code you posted, it might look like this:
const yourCheckbox = document.querySelector('#is_user');
yourCheckbox.addEventListener('change', () => {
const yourInput = document.querySelector('#user_register');
yourInput.toggleAttribute('disabled');
});
I'm trying to build a User interface of an application where user could add ul and li element when clicking on add question, I successfully managed to develop the front end part here's a preview:
but the problem is when saving this to the database which is so overwhelming I'm stuck at this, is there any way to save the data to an array so I can display them with php, any idea is welcomed.
here's the jquery code:
wrapper.on("click", "button", function(e){
e.preventDefault();
var parent = $(this).parent().parent().parent().parent().parent().parent();
var parentID = $(this).attr('element-id');
var elementID = 1000000000000000000*Math.random();
parentIDs.push(elementID);
if($(this).attr('class') == "add_field_button btn btn-success"){
if(parent.find('ul').length){
parent.find('ul').first().append(`
<li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li>`);
}else{
$(this).closest('li').append(`
<ul><li>
<div class="panelcb white-box">
<div class="form-horizontal form-material">
<div class="form-group">
<label class="col-md-12">Question</label>
<div class="col-md-12">
<input type="text" placeholder="Your Question" value="testqst" class="question question`+parentID+` form-control form-control-line" parent-question="`+parentID+`" element-question="`+elementID+`"> </div>
</div>
<div class="form-group">
<label class="col-md-12">Response</label>
<div class="col-md-12">
<input type="text" placeholder="Your Response" value="testqst" class="response response`+parentID+` form-control form-control-line" parent-response="`+parentID+`" element-response="`+elementID+`"> </div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<button class="add_field_button btn btn-success" element-id="`+elementID+`">Add Question</button>
</div>
<div class="col-sm-4">
<button class="delete_field_button btn btn-error" >Delete</button>
</div>
</div>
</div>
</div>
</div>
</li></ul>`);
}
}else if($(this).attr('class') == "delete_field_button btn btn-error"){
parent.remove();
}
Thanks is advance.
Well...
If the whole user-interative-area, I'd call a playground, can be put inside a container:
<div id='playground'>
.. all the ul's and li's..
</div>
And if you've got a form or something else:
<form action='/' id='form-playground' method='post'>
<textarea id='playground-container' name='playground' class='hidden'>
</textarea>
<input type='submit' value='Save My Playground'>
</form>
Then on submit you can copy the contents of the the playground to a hidden textarea:
$(document).ready(function () {
$('#form-playground').on('submit', function () {
$('#playground-container').html($('#playground').html());
return true;
});
});
Or perhaps an AJAX post:
$.post( PostUrl, { playground: $('#playground').html() } );
How to validate a input text box as number,I use ng-pattern for validate number but my input name is array of name like "item[priceFrom]" so how will i validate this field.This validation is working fine if input name is "priceFrom".
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//$scope.name = "John Doe";
});
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" class="form-horizontal" method="get" action="">
<div class="input-field">
<p class="heading">Price</p>
<div class="gutter6">
<div class="col-6">
<div class="input-wrapper has-float-label">
<input ng-pattern="/^[0-9]*$/" ng-model="search.priceFrom" type="text" id="price" name="item[priceFrom]" class="form-field">
<label class="form-control-placeholder ">From</label>
</div>
<span ng-show="myForm.item[priceFrom].$error.pattern">Not a valid number!</span>
</div>
<div class="col-6">
<div class="input-wrapper">
<input ng-pattern="/^[0-9]*$/" ng-model="search.priceTo" type="text" id="price" name="item[priceTo]" class="form-field" value="">
<label class="form-control-placeholder">To</label>
</div>
<span ng-show="myForm.item[priceTo].$error.pattern">Not a valid number!</span>
</div>
</div>
</div>
<div class="form-group text-center" style="margin-top: 5%;">
<input class="button submit esein5" value="Apply" type="submit">
<button type="Reset" class="button submit esein5">Reset</button>
</div>
</form>
</body>
Answer courtesy :Aleksey Solovey
https://stackoverflow.com/users/8495123/aleksey-solovey
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
//$scope.name = "John Doe";
});
.error{
color:red;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<form name="myForm" class="form-horizontal" method="get" action="">
<div class="input-field">
<p class="heading">Price</p>
<div class="gutter6">
<div class="col-6">
<div class="input-wrapper has-float-label">
<input ng-pattern="/^[0-9]*$/" ng-model="search.priceFrom" type="text" id="price" name="item[priceFrom]" class="form-field">
<label class="form-control-placeholder ">From</label>
</div>
<span class="error" ng-show="myForm['item[priceFrom]'].$error.pattern">Not a valid number!</span>
</div>
<div class="col-6">
<div class="input-wrapper">
<input ng-pattern="/^[0-9]*$/" ng-model="search.priceTo" type="text" id="price" name="item[priceTo]" class="form-field" value="">
<label class="form-control-placeholder">To</label>
</div>
<span class="error" ng-show="myForm['item[priceTo]'].$error.pattern">Not a valid number!</span>
</div>
</div>
</div>
<div class="form-group text-center" style="margin-top: 5%;">
<input class="button submit esein5" value="Apply" type="submit">
<button type="Reset" class="button submit esein5">Reset</button>
</div>
</form>
</body>
I'm trying to create a edit profile section in angularjs. For that i create in my users controller a section to make a rest api call to get info to inject on the page and later i will do the parte of changePassword also.
At the moment i'm getting the error "Error: [ng:areq] Argument 'UsersSettingsController' is not a function, got undefined" and I cant undestand why.
editAccount view:
<div class="row" ng-controller="UsersSettingsController as usersSettingsCtrl" >
{{userInfo}}
<!-- edit form column -->
<div class="col-md-9 personal-info">
<h3>Personal info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-3 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Organization:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.organization_name}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Permission Group:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.permission_group_name}}" readonly>
</div>
</div>
<div class="form-group" nf-ig="user.organization_permission_group_id=='df0417e3-ce36-41ca-9f13-f58c1a3a96f5'">
<label class="col-lg-3 control-label">Root:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.data.root}}" readonly>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" type="text" style="background-color: #fff" value="{{userInfo.username}}" readonly>
</div>
</div>
<hr>
<h4>Change Password</h4>
<br>
<form name="newPasswordForm" role="form" ng-submit="newPasswordForm.$valid && ok()" novalidate>
<div class="form-group">
<label class="col-md-3 control-label">Change Password:</label>
<div class="col-md-8">
<input type="password" name="newPassword" ng-model="password.new"
ng-minlength="6" required />
<span class="help-block"
ng-show="newPasswordForm.newPassword.$dirty && newPasswordForm.newPassword.$invalid">
Please enter a new password, it must be at least 6 characters long.
</span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password:</label>
<div class="col-md-8">
<input type="password" name="newPasswordConfirm"
ng-model="password.confirm" ng-minlength="6"
value-matches="password.new" required />
<span class="help-block"
ng-show="newPasswordForm.newPasswordConfirm.$dirty && newPasswordForm.newPasswordConfirm.$invalid">
Please enter the same password again to confirm.
</span>
</div>
</div>
</form>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="button" class="btn btn-primary" style="float:right" value="Save Changes">
<div ng-messages="registrationForm.confirmPassword.$error" ng-messages-include="messages.html"></div>
</div>
</div>
</form>
</div>
</div>
usersController:
app.controller('UsersSettingsController',['$scope', 'user', function ($scope, user) {
$http.get('/api/users/userInfo/'+user.id).success(function (data) {
console.log("user info ",data);
$scope.userInfo = data;
});
//changePassword call to rest api
}]);
usersDirective:
(function() {
var app = angular.module('userSettings', []);
app.directive('valueMatches', ['$parse', function ($parse) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ngModel) {
var originalModel = $parse(attrs.valueMatches),
secondModel = $parse(attrs.ngModel);
// Watch for changes to this input
scope.$watch(attrs.ngModel, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === originalModel(scope));
});
// Watch for changes to the value-matches model's value
scope.$watch(attrs.valueMatches, function (newValue) {
ngModel.$setValidity(attrs.name, newValue === secondModel(scope));
});
}
};
}]);
})();
Learning Angular by redoing an app I've built. I am trying to post some data from a collection of text boxes to my production api. When I click the submit button, I get no response. No flicker, no error message, nothing. I'm curious if I don't have my Angular wired up properly. If anyone could help me figure this one out, I'd greatly appreciate it.
MainController.js
(function () {
var app = angular.module("app", [])
app.controller('MainController', function($scope, $http) {
var onUpdatesComplete = function (response) {
$scope.updates = response.data;
};
$http.get("productionApiAddress")
.then(onUpdatesComplete);
$scope.demoInquiry = function(){
var data = $.param({
json: JSON.stringify({
firstName : $scope.firstName,
lastName : $scope.lastName,
companyName : $scope.companyName,
email : $scope.email,
phone : $scope.phone
})
});
$http.post("http://productionApiAddress", data).success(function() {
$.('#demoSuccessResult').removeClass('hidden');
})
};
});
}());
index.html
<html ng-app="app">
...
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.3/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/MainController.js"></script>
...
<body ng-controller="MainController">
...
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>First Name*</label>
<input type="text" id="txtFirstName" ng-model="firstName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Last Name*</label>
<input type="text" id="txtLastName" ng-model="lastName" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Company Name*</label>
<input type="text" id="txtCompanyName" ng-model="companyName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Your Work Email*</label>
<input type="text" id="txtEmail" ng-model="email" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<label>Office Phone Number*</label>
<input type="text" id="txtPhone" ng-model="phone" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<input type="submit" id="btnDemoSubmit" ng-click="demoInquiry()" class="btn btn-default form-control"
style="background-color: #053A54; color: #ffffff;"
value="Submit For Trial"/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-lg-offset-3 col-xs-12">
<p>* - required</p>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-lg-offset-3 col-xs-12 hidden">
<span id="demoSuccessResult" style="color: blue;">Thank you for registering!</span>
</div>
</div>
Please see below. You don't have to use jquery to show/hide dive elements ng-show hide will do this same work for you.
var app = angular.module('app', []);
app.controller('firstCtrl', function($scope, $http) {
$scope.demoInquiry = function() {
var data = {
firstName: $scope.firstName,
lastName: $scope.lastName,
companyName: $scope.companyName,
email: $scope.email,
phone: $scope.phone
};
console.log(data);
$http.post("http://productionApiAddress", data).success(function() {
$scope.postSucess = true
}).error(function() {
$scope.postError = true;
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>First Name*</label>
<input type="text" id="txtFirstName" ng-model="firstName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Last Name*</label>
<input type="text" id="txtLastName" ng-model="lastName" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Company Name*</label>
<input type="text" id="txtCompanyName" ng-model="companyName" class="form-control" required/>
</div>
</div>
<div class="col-lg-6 col-xs-12">
<div class="form-group">
<label>Your Work Email*</label>
<input type="text" id="txtEmail" ng-model="email" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<label>Office Phone Number*</label>
<input type="text" id="txtPhone" ng-model="phone" class="form-control" required/>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-12">
<div class="form-group">
<input type="submit" id="btnDemoSubmit" ng-click="demoInquiry()" class="btn btn-default form-control" style="background-color: #053A54; color: #ffffff;" value="Submit For Trial" />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-lg-offset-3 col-xs-12">
<p>* - required</p>
</div>
</div>
<div class="row" ng-show="postSucess">
<div class="col-lg-9 col-lg-offset-3 col-xs-12 ">
<span id="demoSuccessResult" style="color: blue;">Thank you for registering!</span>
</div>
</div>
<div class="row" ng-show="postError">
<div class="col-lg-9 col-lg-offset-3 col-xs-12 ">
<span id="demoErrorResult" style="color: red;">Wooowa can't post </span>
</div>
</div>
</div>
</body>