how to display specific form after selecting item in dropdown using vuejs,i have given code below....
the below select option is in home.vue and the form is another page(Light.vue).
<div class="row">
<div class="col-md-12">
<h3>Select Device To Add</h3> <select :v-model="device" class="custSelect">
<option>CCTV </option>
<option>EV Charger</option>
<option>Light</option>
</select>
</div>
</div>
below is my form light.vue
<template>
<div>
<h1>Add Light Data</h1>
<form #submit="formSubmit">
<div class="row">
<div class="col-md-3 pr-md-1">
<va-input label="Pole Id"
placeholder=" "
type="text"
v-model="poleNewId"
required>
</va-input>
</div>
</div>
<div class="row">
<div class="col-md-14">
<va-input label="stid "
v-model="stid"
required>
</va-input>
</div>
</div>
</form>
</div>
</template>
You can use <component :is="selectedCponent"/>
https://v2.vuejs.org/v2/api/#component
So you need to create map between value of drop down and component which you want to render.
Related
I use a lib in npm Angular Multiselect Dropdown
How I can hide div alert depend on form dirty or not. My problem is when I load page and my selectedAuthors is put into ng multi select dropdown this makes form dirty.
<div class="col-8">
<div class="alert alert-warning" *ngIf="editForm.dirty">
<strong>Every thing not saved will be lost</strong>
</div>
</div>
<form #editForm='ngForm' id='editForm' (ngSubmit)="updateBook()">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" name="title" [(ngModel)]="book.title" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp" />
</div>
<div class="form-group row">
<div class="col-sm-2">Authors</div>
<div class="col-sm-6">
<div>
<ng-multiselect-dropdown [placeholder]="'Choose Author'" [settings]="dropdownAuthorSettings"
[data]="listAuthors" [(ngModel)]="selectedAuthors"
name="selectedAuthors"
(onSelect)="onItemSelectAuthor($event)"
(onSelectAll)="onSelectAllAuthor($event)" (onDeSelect)="onItemDeSelectAuthor($event)"
(onDeSelectAll)="onDeSelectAllAuthor($event)">
</ng-multiselect-dropdown>
</div>
</div>
</div>
<button class="btn btn-success" [disabled]=!editForm.dirty>Edit</button>
</form>
I have a form for searching items in table
<div class="container">
<h4>Search product</h4>
<form>
<div class="row">
<div class="form-group col-md-8">
<label for="productName">Product name:</label>
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" type="text" class="form-control search-box">
<div>
<div *ngFor="let product of products | async" (click)="gotoDetail(product)" class="search-result">
{{ product.name }}
</div>
</div>
</div>
</div>
</form>
</div>
And when I click the input then slides out the history of entered data and lower divs which I want to show.
How to hide the history of entered phrases?
I need only div with found products.
Turn off autocomplete in your input field.
autocomplete="off"
Turn off autocomplete
Try to add autocomplete="off" attribute to your input
i have a rather dumb issue but still, can not figure the way around it...The concept is to have a select value which prompts the user to select a subject. Upon selection i need to store that subject id in every form that i am using below in so i can retrieve that subject, and i dont want to use different select for every single form that i need. here is the code below:
<div class="input-field col s12">
<select>
<c:forEach var="subjectItem" items="${subjectList }">
<option value="${subjectItem.id }">${subjectItem.subjectName }</option>
</c:forEach>
</select> <label>For subject</label>
</div>
......
.....
<form method="POST" action="subject-add-school-deadline"
id="deadlineSchoolForm">
----! Here is should retrieve that data from select !-------
<div class="row">
<div class="input-field col s6">
<input id="schoolD_title" type="text" class="validate"
name="title""> <label
for="schoolD_title">Title</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 l12 ">
<textarea id="schoolD_desc" name="description"
class="materialize-textarea validate" form="deadlineSchoolForm"></textarea>
<label for="schoolD_desc">Description</label>
</div>
</div>
<div class="row">
<label class="col s2">Deadline date</label> <input type="date"
class="datepicker col s4" name="date">
</div>
<div class="row right-align">
<button class="waves-effect waves-teal btn-flat" type="submit"
name="action" >
Add <i class="material-icons right">input</i>
</button>
</div>
</form>
----MORE FORMS BELOW ------
.....
.....
Note that i do not need something like
<select form="form1>
because i need that select value for multiple forms. Any help would be greatly appreciated. Thanks!!
I used jQuery to set the value in all inputs named title. Would this solve your problem?
JS Fiddle
The important part:
<script type="application/javascript">
$("select#foo").change(function() {
$("input[name='title']").val($("select#foo").val());
});
</script>
I HAVE A FORM BUT NG SBMIT DOESNOT CALL THE FUNCTION
I dont understand why this form not submitting . i have check every thing but it not even call the alert button also
HTML
<form role="form" name="frmCashback" method="post" ng-submit="CashbackUser(frmCashback, Rates)">
<!-- Personal Details Start -->
<div class="well">
<legend> Cashback Details </legend>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="Store">Store:</label>
<select name="Store" class="form-control" ng-model="Rates.Store" ng-options="stores.StoreID as stores.StoreName for stores in StoreList" >
<option value="">Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Store">Category:</label>
<select name="Category" class="form-control" ng-model="Rates.Category" ng-options="Cate.CategoryID as Cate.CategoryName for Cate in CategoryList" >
<option value="">Select</option>
</select>
</div>
<!-- Modal -->
<!---------Model End-------->
</div>
<div class="col-md-4">
<div class="form-group">
<label for="usr">Cash Back Rate:</label>
<input type="text" class="form-control" name="Cashback" id="Cashback" ng-model="Rates.Cashback" required>
</div>
</div>
</div>
<!---------Model End-------->
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" type="submit">Add Cashback</button>
</div>
</div>
</div>
<!-- Personal Details End -->
</form>
Here is my controller
CONTROLLER
$scope.CashbackUser = function(frm, Rates) {
alert('Hi');
//query_params.Status = CheckStatus.Action;
//console.log(Rates);
}
I have check :
function is within the controller
I am figthing with this for 4 hr kindly help me.
Your template seems to be having error ,form submit will not work if your template having error think so
<!---------Model End-------->
</div>
</div>
In your form, you can use this:
ng-submit="CashbackUser()"
And in your controller:
$scope.CashbackUser = function(){
console.log($scope.frmCashback);
console.log($scope.Rates);
}
I have this following form
<form action="" class="form-horizontal">
<div id="wrapper">
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label"><?=$core->l("default_comm_type");?></label>
<div class="controls">
<select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
<?=combo_creator::render_default_comm_types()?>
</select>
</div>
</div>
</div>
<div class="span4 checkerAlign">
<div class="control-group">
<div class="controls">
<?=$core->l("is_active");?>
</div>
</div>
</div>
<div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
</div>
<div>Add Row</div>
</div>
The question is when user clicks Add Row button, I need to create a copy of this form elements inside
<div id="wrapper">
How can i do that?
EDIT: SOLVED
<form action="" class="form-horizontal" id="wrapper">
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label"><?=$core->l("default_comm_type");?></label>
<div class="controls">
<select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
<?=combo_creator::render_default_comm_types()?>
</select>
</div>
</div>
</div>
<div class="span4 checkerAlign">
<div class="control-group">
<div class="controls">
<?=$core->l("is_active");?>
</div>
</div>
</div>
<div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
</div>
add
</form>
In the Js part:
jQuery("#addMore").click(function(){
var contents = jQuery("form").html();
jQuery("#wrapper").append(contents);
});
When add is clicked it inserts form elements just as I wanted
and when delete is clicked it deletes elements. Thank you for the tips guys
Problem solved! Thanks guys.
I think you need to duplicate the contents of (row-fluid), not the whole (Wrapper) contents, this should let you add more rows of your original form template when clicking on AddMore link.
This is an edit to the suggested solution by #user2389688:
$("#addMore").click(function(){
$(".row-fluid:last").clone().appendTo(".wrapper");
});
JsFiddle Link:
http://jsfiddle.net/tCY8v/1/
Something like this ?
$("#addMore").click(function(){
var contents = $("form").html();
$("#wrapper").append(contents);
});
http://jsfiddle.net/tCY8v/
If I did understand your question correctly.
For example:
$('#addMore').click(function() {
$('.row-fluid').eq(0).clone().insertBefore(this);
});