Error: ng:area Bad Argument in angularjs - javascript

Here I am trying to insert data from form attendance-form.blade.php in table attendance on button click using angularJS.
Now the problem when I click button data is not inserted in table instead it gives
Argument 'AttendanceFormController' is not a function, got undefined.
Below are my form and AttendanceController.js.
In attendance-form.blade.php
<div ui-view="attendanceForm">
<div class="mdl-grid demo-content" ng-controller='AttendanceFormController'>
<div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<form>
<div class="form-group label-static is-empty">
<h3>Create Attendance</h3>
<div class="form-group label-static is-empty">
<input type="text" name="user_id" class="signup form-control"
id="i2" placeholder="user_id" ng-model="attendance.user_id">
</div>
<div class="form-group label-static is-empty">
<input type="text" name="in_or_out" class="signup form-control"
id="i2" placeholder="in_or_out" ng-model="attendance.in_or_out">
</div>
<div class="form-group label-static is-empty">
<input type="text" name="comment" class="signup form-control"
id="i2" placeholder="comment" ng-model="attendance.comment">
</div>
<div class="signup form-group label-static is-empty ripple-container signup">
<input type="button" value="Create Attendance" class="btn btn-raised btn-primary" ng-click="createattendance()">
</div>
</div>
</form>
</div>
</div>
</div>
In AttendanceController.js
app.controller('AttendanceFormController', function ($scope, AttendanceService) {
$scope.attendance = {};
$scope.attendance.user_id;
$scope.attendance.in_or_out;
$scope.attendance.comment;
$scope.loadAttendance = function () {
$scope.attendance = AttendanceService.get({id:$scope.params.id});
}
$scope.createattendance = function () {
attendance = {user_id:$scope.attendance.user_id,
in_or_out:$scope.attendance.in_or_out,
comment:$scope.attendance.comment
}
AttendanceService.post(attendance).then(function(response){
alert('User successfully added in the system.'+'\n'+'Check console.log for response.');
console.log(response.data);
});
}
});

Related

How to get values from input boxes and save to database with button click angular

I'm still learning to programme on AngularJS.
I want to get values from the input box and then click on the button I want to save them in the database.
My database table is called "user". I have columns like id, username, password, name.
I have two checkbox.When I click on first checkbox(Edit) it displaying "div myVar",when i click on second checkbox(Add new user) it displaying "div myVar1".
I want to activate this button "Add" to add input box values to database MySQL. Please help me.
I have this html code:
<label><input type="checkbox" ng-model="myVar">Edit</label>
<label><input type="checkbox" ng-model="myVar1">Add new user</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form><form ng-submit="createUser(userForm.$valid)" name="userForm1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control1" ng-model="usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control1" ng-model="passwordd"required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control1" ng-model="namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="createUser();" type="submit">Add user</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And Angular code:
$scope.createUser=function()
{
//console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.usernamee,
password: $scope.passwordd,
name: $scope.namee,
id: $scope.id
};
{
defaultAdapter.query('INSERT INTO users(username,password,name,id) VALUES(username = :usernamee, password = :passwordd,name = :namee WHERE id =:id)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
}

I have to give some dependent fields in html,php,javascript

I need to give some dependency in the fields. Ex:
first i have two option that is Branch/Staff so, if i am selecting branch it should display the branches to select if he is selecting staff then i should be able to select the employee id and if am selecting employee id employee name should display and more over all these things user needs to feed the data. That is main category branch/staff should be standard but there after branches,employee number and name al these things user needs to feed
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function updatePrice() {
// Get the ex-GST price from its form element
var exPrice = document.getElementById("product_price").value;
var gstPrice = document.getElementById("cgst").value;
// Get the GST price
gstPrice = exPrice * 0.09;
var TPrice = parseInt(gstPrice) + parseInt(exPrice) + parseInt(gstPrice);
// Set the GST price in its form element
document.getElementById("cgst").value = gstPrice;
document.getElementById("igst").value = gstPrice;
document.getElementById("sgst").value = 0;
document.getElementById("total").value = TPrice;
}
</script>
</head>
<body>
<?php
public function addProduct($pro_name,$price,$stock,$date,$loc,$in_no,$gst_no,$cgst,$sgst,$igst,$total,$depre,$pur_from){
$pre_stmt = $this->con->prepare("INSERT INTO `products`( `product_name`, `product_price`, `product_stock`, `added_date`, `p_status`, `loc`, `in_no`, `gst_no`, `cgst`, `sgst`, `igst`, `total`, `depre`, `pur_from`)
VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)");
$status = 1;
$pre_stmt->bind_param("sdisisiiddddis",$cid,$bid,$pro_name,$price,$stock,$date,$status,$loc,$in_no,$gst_no,$cgst,$sgst,$igst,$total,$depre,$pur_from);
$result = $pre_stmt->execute() or die($this->con->error);
if ($result) {
return "NEW_PRODUCT_ADDED";
}else{
return 0;
}
}
if (isset($_POST["added_date"]) AND isset($_POST["product_name"]) ) {
$obj = new DBOperation();
$result = $obj->addProduct($_POST["select_cat"],
$_POST["select_brand"],
$_POST["product_name"],
$_POST["product_price"],
$_POST["product_qty"],
$_POST["added_date"],
$_POST["loc"],
$_POST["in_no"],
$_POST["gst_no"],
$_POST["cgst"],
$_POST["sgst"],
$_POST["igst"],
$_POST["total"],
$_POST["depre"],
$_POST["pur_from"]);
echo $result;
exit();
}
?>
<div class="modal fade" id="form_products" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add new products</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="product_form" onsubmit="return false">
<div class="form-group">
<label>Category</label>
<select class="form-control" id="select_cat" name="select_cat" required/>
</select>
</div>
<div class="form-group">
<label>Brand</label>
<select class="form-control" id="select_brand" name="select_brand" required/>
</select>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>RHFL ID</label>
<input type="text" class="form-control" name="product_name" id="product_name" placeholder="Enter RHFL ID" required>
</div>
<div class="form-group col-md-6">
<label>Invoice No</label>
<input type="text" class="form-control" name="in_no" id="in_no" placeholder="Enter Invoice No" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Location</label>
<input type="text" class="form-control" id="loc" name="loc" placeholder="Enter Location" required/>
</div>
<div class="form-group col-md-6">
<label>Purchase Date</label>
<input type="text" class="form-control" id="added_date" name="added_date" value="<?php echo date("Y-m-d"); ?>" readonly/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Product Price</label>
<input type="text" class="form-control" id="product_price" name="product_price" onChange="updatePrice()" />
</div>
<div class="form-group col-md-6">
<label>GST No</label>
<input type="text" class="form-control" id="gst_no" name="gst_no" placeholder="Enter GST No" required/>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Purchased From</label>
<input type="text" class="form-control" id="pur_from" name="pur_from" placeholder="Enter From Where you purchased" required/>
</div>
<div class="form-group col-md-6">
<label>IGST</label>
<input type="text" class="form-control" id="igst" name="igst" onChange="updatePrice()" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="cgst">CGST</label>
<input type="text" class="form-control" id="cgst" name="cgst" readonly name="cgst" onChange="updatePrice()" />
</div>
<div class="form-group col-md-6">
<label>SGST</label>
<input type="text" class="form-control" id="sgst" name="sgst" onChange="updatePrice()" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Quantity</label>
<input type="text" class="form-control" id="product_qty" name="product_qty" placeholder="Enter Quantity" required/>
</div>
<div class="form-group col-md-6">
<label>Depreciation</label>
<input type="text" class="form-control" id="depre" name="depre" placeholder="Enter Price of SGST" required/>
</div>
</div>
<div class="form-group">
<label>Total</label>
<input type="text" class="form-control" id="total" name="total" onChange="updatePrice(this.form)" />
</div>
<button type="submit" class="btn btn-success">Add Product</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
//add product
$("#product_form").on("submit",function(){
$.ajax({
url : DOMAIN+"/includes/process.php",
method : "POST",
data : $("#product_form").serialize(),
success : function(data){
if (data == "NEW_PRODUCT_ADDED") {
alert("New Product Added Successfully..!");
$("#product_name").val("");
$("#select_cat").val("");
$("#select_brand").val("");
$("#product_price").val("");
$("#product_qty").val("");
calculate();
}else{
console.log(data);
alert(data);
}
}
})
})

Dynamic multiselect feature

I am creating the fields dynamically in HTML using this JS, and in multiselect I'm using bootstrap multiselect here is the code https://bootsnipp.com/snippets/Ekd8P when I click on the add more button it creates the form dynamically.
js code for creating a form dynamically :
$(function() {
// Remove button
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="remove"]',
function(e) {
e.preventDefault();
$(this).closest('.form-horizontal').remove();
}
);
// Add button
var i = 1;
$(document).on(
'click',
'[data-role="dynamic-fields"] > .form-horizontal [data-role="add"]',
function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-horizontal:first-child').clone();
new_field_group.find('input').each(function() {
if (this.name == 'tags[0]') {
$(this).tagsinput('destroy');
$(this).tagsinput('removeAll');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="form-group"]');
new_container.find(".bootstrap-tagsinput:first").remove();
} else {
$(this).val('');
}
});
new_field_group.find('select').each(function() {
if (this.name == 'addons[0]') {
$(this).multiselect('rebuild');
this.name = this.name.replace('[0]', '[' + i + ']');
var new_container = $(this).closest('[class="multiselect-native-select"]');
new_container.find(".multiselect-native-select > .multi").remove();
} else {
$(this).val('');
}
});
i += 1;
container.append(new_field_group);
}
);
});
and html code for form elements:
<form action="" method="post" novalidate="novalidate" enctype="multipart/form-data">
{{ csrf_field() }}
<div data-role="dynamic-fields">
<div class="form-horizontal">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Name1" name="Name[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Dish Price</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="Price" name="Price[]" required data-rule-minlength="2">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Select Food Type</label>
<div class="col-sm-8">
<select id="select1" class="form-control" name="select[]" required>
#foreach($types as $type)
<option value="{{$loop->iteration}}">{{$type->food_type_name}}</option>
#endforeach
</select>
<p class="help-block" data-toggle="tooltip" data-placement="bottom" title="xyz"><i class="md md-info"></i></p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Dish Description</label>
<div class="col-sm-8">
<textarea name="Description[]" id="field-value" class="form-control" rows="1"></textarea>
</div>
</div>
</div>
<div class="col-sm-4 contacts">
<div class="form-group">
<label class="col-sm-3" for="rolename">Add Addons</label>
<div class="col-sm-8">
<select id="dates-field2" class="multiselect-ak form-control" name="addons[0]" id="trigger3" data-role="multiselect" multiple="multiple">
#foreach($addons as $addon)
<option value="{{$addon->addonid}}">{{$addon->addon_name}}</option>
#endforeach
</select>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="Firstname5" class="col-sm-3">Enter Tags</label>
<div class="col-sm-8">
<input type="text" value="" name="tags[0]" class="form-control" data-role="tagsinput" placeholder="e.g. spicy, healthy" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="col-sm-4">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" class="trigger2" id="trigger2" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="Price2[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-5">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" class="trigger" id="trigger" name="question">
</label>
</div>
</div>
<div class="col-sm-4">
<div id="hidden_fields" class="hidden_fields" style="display:none;">
<input type="text" id="hidden_field" name="Price3[]" placeholder="Please Enter" class="form-control">
</div>
</div>
</div>
</div>
<br>
<button class="btn btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove">
Delete Item
</button>
<button class="btn ink-reaction btn-raised btn-primary" data-toggle="tooltip" data-placement="bottom" title="Add More Field" data-role="add">
Add More Items
</button>
</div>
<!-- /div.form-inline -->
</div>
<!-- /div[data-role="dynamic-fields"] -->
<div class="form-group">
<button type="submit" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary" style="margin-top: -62px;margin-left: 160px;">Submit Items</button>
</div>
<!--end .form-group -->
</form>
The issue is that when I click on the add more item it reflects the multiselect dropdown twice as you see in this image.
I want that if I click on the add more item button it restates the multiselect dropdown as in the first state.
see this jsfiddle.net/akshaycic/svv742r7/7 it will clear all your doubt. on click plus button it is not reflect to "none selected" state it will remain in its initial state.
Any leads would be helpful. Thank you in advance.

Form validation is not working in MEAN Stack using angular js and node js

Hello I am working with MEAN Stack application.When I add record data stored
Successfully. But When I don't fill any field and click add button which is
Calling function for store record My function working properly But I used the
Validation field is required but function working and redirect my given path.
new data is not storing but why function is working.
function in controller
$scope.adduser = function()
{
$http({
method:"POST",
url:'api/adduser',
data:{name:$scope.name, email:$scope.email,password:$scope.password}
}).then(function successCallback(response) {
if(response.data.error){
$scope.error = response.data.error;
}else{
$scope.Blog=response.data;
$localStorage.dd=$scope.Blog;
$location.path('/allusers');
}
//console.log(response);
}, function errorCallback(response) {
alert("data is not comming here");
});
}
message show field is required but not stay there go to the given path when
response success. how to resolved this problem
view file is
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Advanced Datatables <small>advanced datatable samples</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
All Users
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
New User
</div>
</div>
<div class="portlet-body form">
<form id = "expensesCreate" class="form-horizontal">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Name</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="first_name" name="name" ng-model="name" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Email</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="email" name="email" ng-model="email" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Password</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="phone_no" name="company_name" ng-model="password" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button ng-click="adduser()" class="btn blue-hoki">Add</button>
<a ng-href="#/allusers">
<button type="button" class="btn default" id="cancel">Cancel</button>
</a>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
<!-- END VALIDATION STATES-->
</div>
</div>
<style>
.form-horizontal .form-group {
margin-right: -15px;
margin-left: 0px;
}
</style>

Add disabled attribute on your button validation while the form is invalid
<button ng-click="adduser()" class="btn blue-hoki" ng-disabled="expensesCreate.$invalid">Add</button>

Create Repeated Fields in jQuery

$(documnet).ready(function(){
$('#more_finance').click(function(){
var add_new ='<div class="form-group finance-contact" id="finance_3"><div class="col-sm-9"><label for="firstName" class="control-label">Finance Contact#</label></div><div class="col-sm-9"><input type="text" id="finance" name="finance[]"placeholder="Finance Contact" class="form-control" autofocus></div>\n\
<img src="/img/deleted-box.png"></div>';
$(add_new).insertAfter( "#finance_1");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group finance-contact" id="finance_1">
<div class="col-sm-12">
<label for="firstName" class="control-label">Finance Contact</label>
</div>
<div class="col-sm-12">
<input type="text" id="finance1" name="finance[]" placeholder="Finance Contact" class="form-control" autofocus>
</div>
</div>
<div class="col-sm-12">
<input type="button" id="more_finance" value="Add More">
</div>
I want This Code insert multiple when click Add More Button And Also remove repeated fields

I Find Answer
jQuery(document).ready(function(){
jQuery('#more_senior').click(function(){
var finance_cont1=jQuery('.senior-contact').length;
var finance_cont=finance_cont1+1;
var add_new ='<div class="form-group senior-contact" id="senior_'+finance_cont+'"><div class="col-sm-9"><label for="firstName" class="control-label">Senior Mgmt. Contact#</label></div><div class="col-sm-9"><input type="text" id="seniormgmt'+finance_cont+'" name="seniormgmt[]"placeholder="Senior Mgmt. Contact" class="form-control" autofocus></div>\n\
Remove</div>';
jQuery(add_new).insertAfter( "#senior_"+finance_cont1 );
delete_fields();
});
function delete_fields(){
$('.delete_png').on("click",function(){
var class_name=jQuery(this).parent().attr('class');
class_name=class_name.split(' ');
var id_name=jQuery(this).parent().attr('id');
var finance_cont2=jQuery('.'+class_name[1]).length;
var finance_cont3=finance_cont2-1;
var id_first=id_name.split('_');
$('#'+id_name).remove();
delete_fields();
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4">
<h4><strong>Senior Mgmt. Contacts</strong></h4>
<div class="form-group senior-contact" id="senior_1">
<div class="col-sm-12">
<label for="firstName" class="control-label">Senior Mgmt. Contact</label>
</div>
<div class="col-sm-12">
<input type="text" id="seniormgmt1" value="" name="seniormgm[]" placeholder="Senior Mgmt. Contact" class="form-control" autofocus>
</div>
</div>
<div class="col-sm-12">
<input type="button" id="more_senior" value="Add More">
</div>
</div>

Categories

Resources