There is three forms in same Html. In the first form there is a radio button. If one button got selected the second form will be appear. In the second form there is a button. If that button clicked third form will be appear, in this form i need to show the id and the name which was selected in first form. How can i do that?
Html
<form name="firstform">
<table class="table">
<tr>
<th>Select</th>
<th>Name</th></tr>
<tr ng:repeat="d in dList">
<td><input type="radio" ng-click="Selected(d.Id)" name="Selection" /></td>
<td>{{d.Name}}</td></tr>
</table>
</form>
<form name="secondform">
<table class="table">
<td>racename</td>
<td>race</td>
<tr><td><input type="submit" class="btn btn-default" value="Continue" ng-click="savedetails()" /></td>
</tr>
</table>
</form>
<form name="thirdform">
<table class="table">
<tr>
<td>id</td>
<td>name</td></tr>
<tr><td>{{Id}}</td>
<td>{{name}}</td></tr>
</table>
</form>
angular Controller
$scope.Selected = function (id, name) {
$scope.firstform= false;
$scope.secondform= true;
console.log(id);
}
$scope.savedetails= function () {
$scope.firstform= false;
$scope.secondform= false;
$scope.thirdform= false;
}
As you see we can use some condition in our HTML with ng-if or ng-show and ng-hide.
The different between ng-if and ng-hide is when you try to use ng-if you can't get the form name because the element not exist.
var app = angular.module("app", []);
app.controller("ctrl", ["$scope", function($scope) {
$scope.form = {}
$scope.options = [{
id: 01,
name: "option 1",
value: 1
},
{
id: 02,
name: "option 2",
value: 2
}
]
$scope.saveDetails = function() {
$scope.thirdformDisplay = true;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<form name="firstform">
<h1>form 1</h1>
<div ng-repeat="option in options">
<label>{{option.name}}</label>
<input type="radio" ng-model="form.optionFormValue" ng-value="option.value" ng-click="form.optionFormId = option.id" name="Selection" />
</div>
<button ng-click="form = {};thirdform = false;">clear form 1</button>
</form>
<form name="secondform" ng-show="form.optionFormValue">
<h1>form 2</h1>
<label>form 1 details:</label>
<ul>
<li>form name: {{firstform.$name}}</li>
<li>form option value: {{form.optionForm}}</li>
<li>form option value: {{form.optionFormId}}</li>
</ul>
<br />
<input type="submit" value="Continue" ng-click="saveDetails()" />
</form>
<form name="thirdform" ng-show="thirdformDisplay">
<h1>form 3</h1>
<ul>
<li>form 1 name: {{firstform.$name}}</li>
<li>form 2 name: {{secondform.$name}}</li>
</ul>
</form>
</div>
Since ngRepeat is isolated scope , you can use ControllerAs to set values in controller from inside ngRepeat.
<body ng-controller="MainCtrl as main">
<form name="firstform">
<table class="table">
<tr>
<th>Select</th>
<th>Name</th></tr>
<tr ng-repeat="d in main.dList">
<td><input type="radio" ng-click="main.selectItem(d)" name="Selection" >{{d.value}}</input></td>
<td>{{d.Name}}</td></tr>
</table>
</form>
<form name="secondform">
<table class="table">
<td>racename</td>
<td>race</td>
<tr><td><input type="submit" class="btn btn-default" value="Continue" ng-click="main.savedetails()" /></td>
</tr>
</table>
</form>
<form name="thirdform" ng-show="main.showForm">
<table class="table">
<tr>
<td>id</td>
<td>name</td></tr>
<tr><td>{{main.selected.id}}</td>
<td>{{main.selected.value}}</td></tr>
</table>
</form>
</body>
And Controller as below
app.controller('MainCtrl', function($scope) {
this.dList = [{
id: 1,
value: "a"
}, {
id: 2,
value: "b"
}, {
id: 3,
value: "c"
}];
this.savedetails=function(){
this.showForm=true;
};
this.selectItem=function(item){
this.selected=item
}
});
Please check this below plunker
https://plnkr.co/edit/WGgUeO76A2VzQNVnBicb?p=preview
You can find the selected Id value of the first form in the controller by using $scope.form.firstFormSelectedValue in the following way:
<form name="1st form">
<table class="table">
<tr>
<th>Select</th>
<th>Name</th></tr>
<tr ng:repeat="d in dList">
<td><input type="radio" ng-model="form.firstFormSelectedValue" ng-click="Selected(d.Id)" name="Selection" ng-attr-value="{{d.Id}}" /></td>
<td>{{d.Name}}</td></tr>
</table>
</form>
<form name="secondform" ng-show="form.optionFormValue">
<h1>form 2</h1>
<label>form 1 details:</label>
<ul>
<li>form name: {{firstform.$name}}</li>
<li>form option value: {{form.optionForm}}</li>
<li>form option value: {{form.optionFormId}}</li>
</ul>
<br />
<input type="submit" value="Continue" ng-click="saveDetails()" />
</form>
<form name="thirdform" ng-show="thirdformDisplay">
<h1>form 3</h1>
<ul>
<li>form 1 name: {{firstform.$name}}</li>
<li>form 2 name: {{secondform.$name}}</li>
<li>form 1 Id: {{form.firstFormSelectedValue}}</li>
</ul>
</form>
Related
My code is like this: when you check the 'hide' column, the whole row is hidden. I also have a 'Show All' checkbox. When I check it, all rows (including the hidden ones) are shown. But when I uncheck it, all rows disappear. How can I make it so only the hidden rows disappear when I uncheck 'Show All', and the other rows still remain visible?
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall" ng-hide="hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function ($scope, $window) {
$scope.fruitnameDetail = [
{
"fruitname": "Banana"
},
{
"fruitname": "Mango"
},
{
"fruitname": "Orange"
}
];
$scope.addnew = function () {
var fruitnameDetail = {
fruitname: $scope.mdfruitname
};
$scope.fruitnameDetail.push(fruitnameDetail);
$scope.mdfruitname = '';
};
$scope.removefruitname = function (index) {
var name = $scope.fruitnameDetail[index].fruitname;
if ($window.confirm("Do you want to delete " + name + " ?")) {
$scope.fruitnameDetail.splice(index, 1);
}
};
});
</script>
Do not use ng-show and ng-hide at the same time. Just change a little bit your condition for ng-repeat. Here the example that should work:
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall || !hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
I have a table in Angular 6, it has a checkbox in there? What I want to be able to do is select the table row, i.e checkbox, then hit a select button and that gets submitted. I was wondering does the table have to be wrapped in a <form>. The structure of my HTML so far is but it does not work:
<form [formGroup]="assetForm" (ngSubmit)="onSubmit()">
<table class="table table-striped table-hover mb-10">
<thead>
<tr>
<th>Number</th>
<th>Sev</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let incident of data">
<td>
<label class="form-radio">
<input type="radio" name="id_number" value="id_number">
<i class="form-icon"></i>{{incident.number}}
</label></td>
<td>{{incident.sev}}</td>
<td>{{incident.phone}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" [disabled]="!Form.valid" type="submit">Select</button>
</form>
Ts.file
onSubmit() {
if (this.assetForm.invalid) {
this.assetForm.setErrors({ ...this.assetForm.errors, 'required': true });
return;
}
this.uploading = true;
this.service.post(this.assetForm.value).subscribe((response: any) => {
console.log(response);//On success response
}, (errorResponse: any) => {
console.log(errorResponse); //On unsuccessful response
this.error = true;
this.uploading = false;
});
}
<tr *ngFor="let incident of data">
<td>
<label class="form-radio">
<input type="radio" name="id_number" value="id_number" [(ngModel)]="incident.checked">
<i class="form-icon"></i>{{incident.number}}
</label>
</td>
<td>{{incident.sev}}</td>
<td>{{incident.phone}}</td>
</tr>
Try like, hope it will work.
I am using HTML webapp form and the fields are selected as a mandatory (required) but I am able to submit the data without updating required fields.
Below are my detailed HTML and gs script, help me to fix the concern
<script>
function submitForm(btnClicked) {
$("button").attr("disabled", true);
var jsonObj = {};
jsonObj["Project Name"] = $("#ProjectName").val();
jsonObj["updateBtn"] = $(btnClicked).text();
google.script.run.withSuccessHandler(afterSaving).saveDate(jsonObj);
}
function afterSaving() {
alert("Thanks, Your response has been recorded");
$("button").attr("disabled", false);
}
</script>
<form action="" method="get">
<div class="container">
<table class="table table-bordered" width="" style="width:54%">
<thead>
<tr class="one">
<th width="33%">
Project Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="form-group txt">
<input name="" type="text" placeholder="" class="form-control input-md" id="ProjectName" required="required">
</div></td>
</tr>
</tbody>
</table>
</div>
<div class="container">
<div class="col-md-2 col-md-offset-5">
<div class="form-group">
<button style="display:block;width:100%" id="updateBtn" name="singlebutton" class="btn btn-success" type="submit" onclick="submitForm()" >Save</button>
</div>
</div>
</div>
You need to remove onclick="submitForm()" and instead add onsubmit="submitForm()" in the form tag.
<form onsubmit="return submitForm()">
Also, add return false; to submitForm function.
I am writing a small program in Vue.js, but I am getting stuck with an error.
I want the X button to remove each item in a list. I used splice(index,1), but the item isn't being removed. What am I missing?
My HTML:
<div id="app" class="container">
<div class="row">
<div class="col-md-4">
<h1>Add Student</h1>
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" v-model="newStudent.name" class = "form-control" placeholder="Student Name">
</div>
<div class="form-group">
<label for="address">Address</label>
<input type="text" id="address" v-model="newStudent.address" class = "form-control" placeholder="Address">
</div>
<button class="btn btn-success" v-on:click = "addStudent">Add</button>
</div>
<div class="col-md-8">
<h1>All Students</h1>
<table class="table table-striped">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr v-for = "student in students">
<td>{{student.name}}</td>
<td>{{student.address}}</td>
<td><button type="button" class="btn btn-danger" v-on:click="deleteStudent($index)">X</button></td>
</tr>
</tbody>
</table>
</div>
</div> <!--End of Row-->
<br>
<br>
<div class="row">
<div class="col-md-12">
<pre>{{ $data | json }}</pre>
</div>
</div>
</div>
My JS:
<script>
new Vue({
el: "#app",
data: {
newStudent: {name: "", address: ""},
students: []
},
methods: {
addStudent: function(){
var name = this.newStudent.name.trim();
var address = this.newStudent.address.trim();
if(name && address){
this.students.push({name: name, address: address});
this.newStudent = {name: "", address: ""};
$("#name").focus();
}
},
deleteStudent: function(index){
this.students.splice(index,1)
}
}
});
</script>
The $index variable was removed in Vue 2. So, you're not passing the index in correctly.
Specify the index variable in the v-for and pass that to the deleteStudent method instead:
<tr v-for="student, index in students">
<td>{{student.name}}</td>
<td>{{student.address}}</td>
<td>
<button
type="button"
class="btn btn-danger"
v-on:click="deleteStudent(index)"
>X</button>
</td>
</tr>
This is covered in the documentation on list rendering in Vue.
I have a simple nested json embedded in my html file to which I want to insert some data dynamically using form.
I am able to insert data to parent level but unable to insert to child level. What I am doing wrong?
Here is the code:
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<label>Enter Data</label>
<input ng-model="name" type="text">
<input ng-model="rollno" type="number">
<input ng-model="id" type="text">
<button ng-click="addData(data)">Enter Data</button>
<table class="table table-bordered">
<tr>
<th>Sr No</th>
<th>Name</th>
<th>Roll No</th>
<th>Subjects</th>
<th>Delete</th>
</tr>
<tr ng-repeat="data in myData">
<td>{{$index+1}}</td>
<td>{{data.name}}</td>
<td>{{data.rollno}}</td>
<td ng-repeat="subject in data.subjects">{{subject.id1}}, {{subject.id2}}</td>
<td>remove</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.myData =[{"name":"Jon","rollno":123,"subjects":[{"id1":"Maths","id2":"Hindi"}]},{"name":"Ron","rollno":234,"subjects":[{"id1":"English","id2":"Hindi"}]}];
$scope.addData = function(data){
$scope.myData.push({name:$scope.name,rollno:$scope.rollno,id1:$scope.id1});
}
$scope.removeData = function(index){
$scope.myData.splice(index, 1);
}
});
</script>
If you are trying to insert subjects as well using addData function you can do the below. In html add those ng-models
<input ng-model="name" type="text">
<input ng-model="rollno" type="number">
<input ng-model="id" type="text">
<input ng-model="subid1" type="text"/>
<input ng-model="subid2" type="text"/>
In js
$scope.addData = function(data){
var arrData = {name:$scope.name,rollno:$scope.rollno,subjects:[{id1:$scope.subid1,id2:$scope.subid2 }]};
$scope.myData.push(arrData);
}