I am working on Angular forms. I created Index.html and efTemplate.html files. efTemplate.html is a form page which I am trying to get in Index.html. I am having Index.html page with all references of scripting languages which required. Still when I execute Index.html I am getting blank page.
Please suggest.
Code for
Index.html
<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EmployeeForm/efController.js"></script>
<script src="app/EmployeeForm/efDirective.js"></script>
<script src="app/EmployeeForm/efService.js"></script>
</head>
<body ng-controller="efController" class="container">
<employee-form />
</body>
</html>
Code for
AngularFormsApp.js
var angularFormsApp = angular.module('angularFormsApp', []);
Code for
efController.js
angularFormsApp.controller('efController',
function efController($scope, efService) {
$scope.employee = efService.employee;
});
Code for
efService.js
angularFormsApp.factory('efService',
function () {
return {
employee:{
fullName: "Ashok Karale",
Notes: "The Ideal employee. Just don't bother him",
department: "Admin",
perkCar: true,
PerkStock: false,
perkSixWeeks:true,
PayrollType:"none"
}
}
});
Code for
efDirective.js
angularFormsApp.directive('employeeForm',
function () {
return {
restrict: 'E',
templateUrl: 'app/EmployeeForms/efTemplate.html'
}
});
and code for
efTemplate.html
<form role="form">
<div class="form-group">
<label for="fullName">Name</label>
<input type="text" id="fullName" class="form-control" />
</div>
<div class="form-group">
<label for="notes">Notes</label>
<textarea name="notes" id="notes" class="form-control" rows="5"> </textarea>
</div>
<div class=" form-group">
<label for=" department">Department</label>
<select name="department" id="department" class="form-control">
<option>Engineering</option>
<option>Finance</option>
<option>Admin</option>
</select>
</div>
<br />
<span><b>Perks</b></span><br />
<div class="checkbox">
<label><input type="checkbox" value="perkCar"/>PerkCar</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perkStock" />PerkStock</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="perSixWeek" />Perk SixWeek</label>
</div>
<div class="radio">
<label><input type="radio" name="payrollType" value="w2" />W-2</label>
</div>
<div class="radio">
<label><input type="radio" name="payrollType" value="ten99" />W-2</label>
</div>
<div class="radio">
<label><input type="radio" name="payrollType" value="none" />W-2</label>
</div>
<br />
<input type="submit"class="btn btn-primary" value="Submit" />
</form>
I think the correct way to put a directive tag is:
<employee-form></employee-form>
https://docs.angularjs.org/guide/directive
Related
It worked and now it doesn't. I just can't find what i did wrong.
It should show a div with driving license categories when you select "Ja" in select box.
Following is the source code. It should be very simple to solve this i just can't see it :(
var nein = $('#nein'),
ja = $('#ja');
ja.click(function() {
if ($('#kfz').hasClass('in')) {
return false;
}
});
nein.click(function() {
if (!$('#kfz').hasClass('in')) {
return false;
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<label for="has_driverslicense">KFZ Führerschein:</label>
<select class="form-control" required="required" id="has_driverslicense" name="has_driverslicense">
<option value="0" id="nein" data-toggle="collapse" data-target="#kfz">Nein</option>
<option value="1" id="ja" data-toggle="collapse" data-target="#kfz">Ja</option>
</select>
<div id="kfz" class="collapse out">
<div>
<input id="checkbox-20" class="checkbox-style" name="work_as_service" type="checkbox">
<label for="checkbox-20" class="checkbox-style-3-label">B (Auto bis 3,49t)</label>
</div>
<div>
<input id="checkbox-21" class="checkbox-style" name="work_as_service_cashier" type="checkbox">
<label for="checkbox-21" class="checkbox-style-3-label">BE (Auto mit Anhänger)</label>
</div>
<div>
<input id="checkbox-22" class="checkbox-style" name="work_as_service_leader" type="checkbox">
<label for="checkbox-22" class="checkbox-style-3-label">C1 (LKW bis 7,49t)</label>
</div>
<div>
<input id="checkbox-23" class="checkbox-style" name="work_as_bar" type="checkbox">
<label for="checkbox-23" class="checkbox-style-3-label">C (LKW bis 40t)</label>
</div>
<div>
<input id="checkbox-24" class="checkbox-style" name="work_as_logistics" type="checkbox">
<label for="checkbox-24" class="checkbox-style-3-label">CE (LKW mit Anhänger)</label>
</div>
<div>
<input id="checkbox-25" class="checkbox-style" name="work_as_cook" type="checkbox">
<label for="checkbox-25" class="checkbox-style-3-label">Fahrerkarte</label>
</div>
<div>
<input id="checkbox-26" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-26" class="checkbox-style-3-label">Gabelstaplerführerschein</label>
</div>
<div>
<input id="checkbox-27" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-27" class="checkbox-style-3-label">Geländestaplerführerschein</label>
</div>
<div>
<input id="checkbox-28" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
<label for="checkbox-28" class="checkbox-style-3-label">IPAF – Arbeitsbühnen</label>
</div>
</div>
</body>
</html>
Get the value from select, and use addClass/remoceClass
$("#has_driverslicense").on("change", function(){
if($(this).val() === "1") {
$('#kfz').addClass("in");
} else {
$('#kfz').removeClass("in");
}
})
I've updated the fiddle:
https://jsfiddle.net/aq8pqbft/1/
I am working on the shopping cart where person needs to fill 2 similar form on the same page. First form is Billing Address and Second form is Shipping Address. Both the forms contains similar input elements for example:
a) Billing Address: Name, Address Line 1, Address Line 2, Country, Phone etc.
b) Shipping Address: Name, Address Line 1, Address Line 2, Country, Phone etc.
There is a checkbox which says "Check if billing address and shipping address is same". So, if only when checkbox is checked I need to copy the data from billing address to shipping address, even if user makes change in the billing address it should automatically copy the changes to shipping address.
I need to do this using Angular JS. Can some body please tell me how to do this?
(Edit: I am new to Angular Js and don't know where to start)
Here you go. I'm providing you a simplified solution.
// Code goes here
var myApp = angular.module('myApp', []);
myApp.controller('FooCtrl', function($scope) {
$scope.billing = {};
$scope.shipping = {};
$scope.copyAddresses = function() {
if ($scope.copyAddress) {
$scope.shipping = angular.copy($scope.billing);
}
}
$scope.$watch('billing', function(newValue) {
if (newValue) {
$scope.copyAddresses();
}
}, true);
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body class="container" ng-controller="FooCtrl">
<h1>Hello Plunker!</h1>
<div class="well well-sm">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-xs-3">Address 1</label>
<div class="col-xs-6">
<input type="text" ng-model="billing.address1" class="form-control input-sm"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Address 2</label>
<div class="col-xs-6">
<input type="text" ng-model="billing.address2" class="form-control input-sm"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">City</label>
<div class="col-xs-6">
<input type="text" ng-model="billing.city" class="form-control input-sm"/>
</div>
</div>
</form>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="copyAddress" ng-change="copyAddresses()"/>
Check if billing address and shipping address is same
</label>
</div>
<div class="well well-sm">
<form class="form-horizontal">
<fieldset ng-disabled="copyAddress">
<div class="form-group">
<label class="control-label col-xs-3">Address 1</label>
<div class="col-xs-6">
<input type="text" ng-model="shipping.address1" class="form-control input-sm"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">Address 2</label>
<div class="col-xs-6">
<input type="text" ng-model="shipping.address2" class="form-control input-sm"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3">City</label>
<div class="col-xs-6">
<input type="text" ng-model="shipping.city" class="form-control input-sm"/>
</div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
This will copy all the billing address to shipping address on the click of that checkbox and as you start typing, that will update the shipping address also if the checkbox is checked.
You can define two section in your form. One for shipping address and other for billing address. In the billing address add a checkbox for same address.
You then need to handle following cases
Copy shipping address to billing address object if checkbox is checked.
Disable editing of billing address if checkbox is checked.
If any field from shipping address is modified with checkbox checked copy it to billing address object.
Here is the example
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example32-production</title>
</head>
<body ng-app="formExample">
<div ng-controller="ExampleController">
<form novalidate class="simple-form">
<h3>Shipping Address</h3> Name:
<input type="text" ng-model="sa.name" ng-change="sameAddress && update()" />
<br /> Street:
<input type="text" ng-model="sa.street" ng-change="sameAddress && update()" />
<br /> City:
<input type="text" ng-model="sa.city" ng-change="sameAddress && update()" />
<br /> State:
<input type="text" ng-model="sa.state" ng-change="sameAddress && update()" />
<br /> Pin:
<input type="text" ng-model="sa.pin" ng-change="sameAddress && update()" />
<br /> Mobile:
<input type="text" ng-model="sa.mobile" ng-change="sameAddress && update()" />
<br />
<br />
<h3>Billing Address</h3> Name:
<input type="text" ng-model="ba.name" ng-disabled="sameAddress" />
<br /> Street:
<input type="text" ng-model="ba.street" ng-disabled="sameAddress" />
<br /> City:
<input type="text" ng-model="ba.city" ng-disabled="sameAddress" />
<br /> State:
<input type="text" ng-model="ba.state" ng-disabled="sameAddress" />
<br /> Pin:
<input type="text" ng-model="ba.pin" ng-disabled="sameAddress" />
<br /> Mobile:
<input type="text" ng-model="ba.mobile" ng-disabled="sameAddress" />
<br />
<input type="checkbox" ng-model="sameAddress" ng-change="sameAddress && update()" />Same as Shipping Address Address
<br />
</form>
</div>
<script>
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.sa = {};
$scope.ba = {};
$scope.update = function(sa) {
$scope.ba = angular.copy($scope.sa);
};
}]);
</script>
</body>
</html>
Here is the Plnkr
HTML:
<div ng-controller="MyCtrl">
<div>
Billing address
Address <input type="text" ng-model="billing.Address" />
</div>
<div>
Shipping address
Address <input type="text" ng-model="Shipping.Address" />
</div>
<div>
Shipping address is same as billing address
<input type="checkbox" ng-click="CheckClicked()" ng-model="SameAddress" />
</div>
</div>
Controller:
myApp.controller('MyCtrl', function($scope) {
$scope.CheckClicked = function(){
debugger;
if($scope.SameAddress){
$scope.Shipping = $scope.billing;
}
else{
$scope.Shipping = angular.copy($scope.Shipping);
}
};
});
Fiddle
The idea is like you can use two scope variables for your BillingAddress and ShippingAddress.
Then you can use 'ng-checked' attribute in your checkbox to fetch the checked event, if the model associated with the checkbox is true, you have to replace the ShippingAddress AddressLine2 with the BillingAddress AddressLine2
Try This:
<input type="text" ng-model="box1">
<input type="text" ng-model="box2">
<input type="checkbox" ng-model="active" ng-change="copyIt(active)">
JS:
function MyCtrl($scope) {
$scope.box1="";
$scope.copyIt = function (active) {
if(active){
$scope.box2 = $scope.box1;
} else {
$scope.box2="";
}
}
}
Fiddle
I'm trying to pass in the dropdown menu selection to a function in my Javascript File. This works, but as soon as I hit the submit button the dropdown menu choices get deleted, and I'm left with an empty dropdown menu. (This seems to only happen when it's an app in google scripts.)
Any thoughts why this is happening? Is there a better way to do this with apps script?
Any help would be greatly appreciated.
function doSomething(){
var x = document.getElementById("API_key").value;
document.getElementById("API_key").innerHTML = x;
var subdomain =document.getElementById("subdomain").value;
document.getElementById("subdomain").innerHTML = subdomain;
var state = document.getElementById("stateSelect").value;
document.getElementById("stateSelect").innerHTML = state;
google.script.run.getInfo(x,subdomain,state);
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<head>
<base target="_top">
</head>
<body>
<P ALIGN=Center>
<BLOCKQUOTE>
<P ALIGN=Left>
<div class="inline form-group">
<label for="API_key">API Key</label>
<input type="text" id="API_key" style="width: 150px;" value="Enter API key here!">
</div>
<P ALIGN=Left>
<div class="inline form-group">
<p>
<label for="Subdomain">Subdomain</label>
<input type="text" id="subdomain" style="width: 150px;">
</p>
</div>
<select id ="stateSelect">
<option value="">All</option>
<option value="&state=active">Active</option>
<option value="&state=past_due">Past Due</option>
<option value="&state=canceled">Canceled</option>
<option value="&state=expired">Expired</option>
<option value="&state=trialing">Trialing</option>
</select>
<div>
<input type="checkbox" id="Product Info" checked>
<label for="Product Info">Product Info</label>
</div>
<div>
<input type="checkbox" id="Shipping Info">
<label for="Shipping Info">Shipping Info</label>
</div>
<div>
<p>
<input class="action" type="button" onclick="doSomething()" value="Get Info!" />
</p>
</div>
</BLOCKQUOTE>
</body>
</html>
function doSomething(){
var x = document.getElementById("API_key").value;
var subdomain =document.getElementById("subdomain").value;
var state = document.getElementById("stateSelect").value;
google.script.run.getInfo(x,subdomain,state);
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<head>
<base target="_top">
</head>
<body>
<P ALIGN=Center>
<BLOCKQUOTE>
<P ALIGN=Left>
<div class="inline form-group">
<label for="API_key">API Key</label>
<input type="text" id="API_key" style="width: 150px;" value="Enter API key here!">
</div>
<P ALIGN=Left>
<div class="inline form-group">
<p>
<label for="Subdomain">Subdomain</label>
<input type="text" id="subdomain" style="width: 150px;">
</p>
</div>
<select id ="stateSelect">
<option value="">All</option>
<option value="&state=active">Active</option>
<option value="&state=past_due">Past Due</option>
<option value="&state=canceled">Canceled</option>
<option value="&state=expired">Expired</option>
<option value="&state=trialing">Trialing</option>
</select>
<div>
<input type="checkbox" id="Product Info" checked>
<label for="Product Info">Product Info</label>
</div>
<div>
<input type="checkbox" id="Shipping Info">
<label for="Shipping Info">Shipping Info</label>
</div>
<div>
<p>
<input class="action" type="button" onclick="doSomething()" value="Get Info!" />
</p>
</div>
</BLOCKQUOTE>
</body>
</html>
This is not necessary .just comment and check it
function doSomething(){
var x = document.getElementById("API_key").value;
document.getElementById("API_key").innerHTML = x;
var subdomain =document.getElementById("subdomain").value;
document.getElementById("subdomain").innerHTML = subdomain;
var state = document.getElementById("stateSelect").value;
//document.getElementById("stateSelect").innerHTML = state;
google.script.run.getInfo(x,subdomain,state);
}
This is my code
<!DOCTYPE html>
<html>
<head>
<title>Certificate Generator</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
#main .my-form form .text-box .add-box strong {
font-size: 36px;
}
-->
</style>
</head>
<body>
<div id="main">
<h1 align="center">Certificate Generator</h1>
<div class="type">
<form name="class" action="generate.php" method="post">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
<label for="text">Date <span class="box-number"</span></label>
<input type="text" name="date" /></p>
<p class="text-box">
<label for="box1">Student <span class="box-number">1</span></label>
<input type="text" name="students[]" value="" id="box1" />
<a class="add-box" href="#"><strong>Add More Students</strong></a>
</p>
<p>
<input type="submit" value="Generate Certificates" />
</p>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 250 < n ) {
alert('Maximum Amount of Students');
return false;
}
var box_html = $('<p class="text-box"><label for="box' + n + '">Student <span class="box-number">' + n + '</span></label> <input type="text" name="students[]" value="" id="box' + n + '" /> Remove</p>');
box_html.hide();
$('.my-form p.text-box:last').after(box_html);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
When I hit submit, the php only gets the first value of the array
$students = ($_POST["students"]);
this is my php for that form, I don't know why it is only returning the first value of the array, this is my first time using forms with JavaScript so it might just be a simple error, I'm not sure
This is your problem:
<form name="class" action="generate.php" method="post">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
You are closing your form prematurely because of the closing </div> and then opening a new form.
Your html is invalid and the browser tries to make sense of it, causing your students[] elements to be outside of your form so they never get posted.
The results may vary per browser (tested in Firefox), but validating your html should solve your problem.
Ok, I found the error. I have this working. You are not adding the new elements inside of your form. I rearranged the HTML as the following.
<form name="class" action="generate.php" method="post">
<div id="main">
<h1 align="center">Certificate Generator</h1>
<div class="type">
<input type="checkbox" name="class" value="i">IL<br>
<input type="checkbox" name="class" value="u">UT</br>
</div>
<div class="my-form">
<form action ="generate.php"role="form" method="post">
<label for="text">Date <span class="box-number"</span></label>
<input type="text" name="date" />
</p>
<p class="text-box">
<label for="box1">Student <span class="box-number">1</span></label>
<input type="text" name="students[]" value="" id="box1" />
<a class="add-box" href="#"><strong>Add More Students</strong></a> </p>
<p>
<input type="submit" value="Generate Certificates" />
</p>
</div>
</div>
</form>
Just to clarify, I moved the opening tag of the form outside of your "main" div, and then I closed the form after the "main" div's closing tag. No other changes.
I have problem when using my ajax form inside the lightbox div .
the form worked outside the lightbox .
after submit the form , I cannot recieve the variable from the form , I see it empty .
I am using lightbox from here:
http://www.aerowebstudio.net/codecanyon/jquery.lightbox/
the html example "
<html>
<head>
<script type="text/javascript">
function send_ajax_data() {
var reg_user = document.getElementById('reg_user').value;
reg_user2 = document.getElementById('reg_user2').value;
reg_pass = document.getElementById('reg_pass').value;
reg_pass2 = document.getElementById('reg_pass2').value;
reg_email = document.getElementById('reg_email').value;
alert(reg_user);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('div.lightbox').lightbox();
});
</script>
</head>
<body>
<div id="signup" style="width:756px; margin-right:auto;margin-left:auto;">
<div class="light-box">
<div class="center">
<div class="welcome">
<h1>Hello</h1>
</div>
<div id="reg_stats"></div>
<div class="login-form">
<div class="form-container">
<label class="label">xxx</label>
<input id="reg_user" type="text" />
<label class="label">xxx</label>
<input id="reg_user2" type="text" />
<label class="label">xxx</label>
<input id="reg_email" type="text" />
<label class="label">xxx</label>
<input id="reg_pass" type="text" />
<label class="label">xxx</label>
<input id="reg_pass2" type="text" />
<input type="submit" onclick="send_ajax_data();" class="login-btn" value="Done" />
</div>
</div>
</div>
</div>
</div>
new user
</body>
</html>
Try adding in a form tag?
Without a form wrapping the inputs, there is nothing to submit.