When I input data in text input and then click button "Save Task" data will show is list in bottom descend. Now i console.log I want to show data when after click button. I don't know how to get data show when after click button "Save Tasks" so I did console.log
app.html
<div class="form-group" *ngIf="saveTask">
<div class="form-row">
<div class="form-group col-md-12">
<label for="subjectTask" class="control-label">Subject Task</label>
<input formControlName="subjectTask" type="text" class="form-control" id="subjectTask"
placeholder="Subject Task">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="assignDev" class="control-label">Assign Dev</label>
<select formControlName="assignTasks" name="assignTasks" class="form-control" id="assignTasks">
<option value="">choose dev...</option>
<option *ngFor="let staff of Staff" [ngValue]="staff.fullName">
{{staff.firstName}} {{staff.lastName}}
</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="deadline" class="control-label">Deadline</label>
<input formControlName="deadlineDate" type="number" class="form-control" id="deadlineDate"
placeholder="Deadline">
</div>
</div>
<div class="form-row">
<div class="form-group mr-5">
<button type="button" class="btn btn-light btn-cancel">Cancel</button>
</div>
<div class="form-group">
<button type="button" class="btn btn-success" (click)="onTasksSubmit()">Save Tasks</button>
</div>
</div>
</div>
app.ts
onTasksSubmit() {
const subject = this.editTicket.controls.subjectTask.value
const assignTasks = this.editTicket.controls.assignTasks.value
const deadlineDate = this.editTicket.controls.deadlineDate.value
this.newTask = {
subject, assignTasks, deadlineDate
}
this.depositTasks.push(this.newTask)
this.clearTask()
console.log(this.newTask);
// this.saveTask = false;
}
clearTask() {
this.editTicket.patchValue({
subjectTask: '',
assignTasks: '',
deadlineDate: ''
})
}
saveTasks() {
if (this.depositTasks.length != 0) {
console.log('do');
for (let i = 0; this.depositTasks.length > i; i++) {
console.log(this.depositTasks);
this.ticketService.setAddTasks(
this.id,
this.depositTasks[i]
)
}
}
}
<p *ngFor="let task of depositTasks">{{task?.subject}}</p>
try to use the depositTasks array in template as shown above.
Related
I'm trying to submit a form. I have a binding dropdown list and an input field. The dropdown list has three input fields. 0 = pending, 1 = accepted, and 2 = denied. I want to store data if the dropdown value is not 0/pending. If the dropdown is changed/ not pending or the comment input field have not empty, then the Save button enables. Otherwise, the save button is disabled.
function success() {
if (document.getElementById("textsend").value === "") {
document.getElementById('button').disabled = true;
} else {
document.getElementById('button').disabled = false;
}
}
<div class="row border-top pt-2">
<div class="col-md-4">
<span>Decision</span><span asp-validation-for="Heating.Status"></span>
<select asp-for="Heating.Status" asp-items="Html.GetEnumSelectList<ApplicationDecision>()" class="form-control">
<option></option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Comments</span><span></span>
<textarea class="form-control " id="textsend" onkeyup="success()" style="height:100px" maxlength="2000"></textarea>
</div>
</div>
<div class="row border-top p-2">
<div class="col">
<input type="submit" id="button" value="Save" class="btn btn-blueTwo float-right" disabled />
</div>
</div>
But I can't use the dropdown list to add these conditions. Couldn't you please help me?
Finally, I solved this problem.
<script>
$(document).ready(function () {
$('.save-btn').attr('disabled', true);
$('#CommentResponse').change(function () {
let cmtData = $("#CommentResponse").val();
if (cmtData !=null ) {
$('.save-btn').attr('disabled', false);
}
if(cmtData == "")
{
$('.save-btn').attr('disabled', true);
}
})
$('#StatusResponse').change(function () {
let statusData= $(this).val();
if (statusData != 0) {
$('.save-btn').attr('disabled', false);
}
else
{
$('.save-btn').attr('disabled', true);
}
})
});
</script>
<div class="row border-top pt-2">
<div class="col-md-4">
<span>Decision</span><span asp-validation-for="BurnOut.Status"></span>
<select asp-for="BurnOut.Status" id="StatusResponse" asp-items="Html.GetEnumSelectList<ApplicationDecision>()" class="form-control ">
<option></option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Comments</span><span asp-validation-for="BurnOut.Remarks"></span>
<textarea class="form-control " id="CommentResponse" asp-for="BurnOut.Remarks" style="height:100px" maxlength="2000"></textarea>
</div>
</div>
<div class="row border-top p-2">
<div class="col">
<input type="submit" value="Save" class="btn btn-blueTwo float-right save-btn" />
</div>
</div>
I apply the CKEditor to textarea to my project but the form doesn't submit
like I didn't even press the button
though if I remove the required from textarea it does submit
but I need to check required
let elements = document.querySelectorAll('.editor')
for (let element of elements) {
ClassicEditor.create(element, {})
.then(editor => {
element.ckEditor = editor;
})
.catch(err => {
console.error(err.stack);
});
}
<form method="POST" action="../forms/add-services.php">
<div class="service-fields mb-3">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="h6">Title <span class="text-danger">*</span></label>
<input class="form-control" type="text" name="service_title" id="service_title" required>
</div>
</div>
</div>
</div>
<div class="service-fields mb-3">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label class="h6">details <span class="text-danger">*</span></label>
<textarea name="details" id="editor1" class="editor form-control " required></textarea>
</div>
</div>
</div>
</div>
<div class="submit-section d-flex justify-content-between">
<button class="btn btn-primary submit-btn" type="submit" name="save">Save</button>
</div>
</form>
I'm trying to push input value into an array based on input fields. But the problem I'm facing here is that the last input field will replace all the objects in my array like this:
[
{
"label":"4",
"type":"",
"process":"",
"name":"5",
"col":"6"
},
{
"label":"4",
"type":"",
"process":"",
"name":"5",
"col":"6"
}
]
What I'm expecting it to return is the value of each input in each field separately. This means that instead of seeing the object above, it should be label: 1, name: 2, col: 3 etc etc in the correct order. I'm not sure what I'm missing here because my code makes sense to me. What am I doing wrong?
$(document).ready(() => {
$('.add-field').click(e => {
e.preventDefault();
generateField();
});
$('.form-maker').submit(e => {
e.preventDefault();
const temp = {},
payload = [];
$('.dynamic-group').each((i, group) => {
$(group)
.find('input, select')
.each((ii, field) => {
temp[field.name] = field.value;
});
payload.push(temp);
});
console.log(payload);
});
const generateField = () => {
$('.dynamic-fields').append(
`
<div class="form-inline dynamic-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Label</div>
</div>
<input type="text" class="form-control" placeholder="Input Label" name="label">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Type</div>
</div>
<select name="type" name="type">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Process</div>
</div>
<select name="process" name="process">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Name</div>
</div>
<input type="text" class="form-control" placeholder="Input Name" name="name">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">DB. Col Name</div>
</div>
<input type="text" class="form-control" placeholder="DB. Col Name" name="col">
</div>
</div>
<hr />
`
);
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-fields"></div>
<button class="add-field">
Add Field
</button>
<button type="submit">
Make Form
</button>
It's because you're referencing the same object every time, so the last thing to get updated wins. You'd want a copy of the object pushed into the array:
$('.dynamic-group').each((i, group) => {
$(group)
.find('input, select')
.each((ii, field) => {
temp[field.name] = field.value;
});
payload.push($.extend(true,{},temp));
});
There are a number of ways to make object copies - in this case I'm using JQuery's extend method to make a true copy of the object, https://api.jquery.com/jquery.extend/
$.extend(true,{},temp)
The temp variable must be placed within the inner loop of each group:
$(document).ready(() => {
$(".add-field").click(e => {
e.preventDefault();
generateField();
});
$(".form-maker").click(e => {
e.preventDefault();
const payload = [];
$(".dynamic-group").each((i, group) => {
const temp = {};
$(group)
.find("input, select")
.each((ii, field) => {
temp[field.name] = field.value;
});
payload.push(temp);
});
console.log(payload);
});
const generateField = () => {
$(".dynamic-fields").append(
`
<div class="form-inline dynamic-group">
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Label</div>
</div>
<input type="text" class="form-control" placeholder="Input Label" name="label">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Type</div>
</div>
<select name="type" name="type">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Process</div>
</div>
<select name="process" name="process">
<option value="">Something in here</option>
</select>
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">Input Name</div>
</div>
<input type="text" class="form-control" placeholder="Input Name" name="name">
</div>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">DB. Col Name</div>
</div>
<input type="text" class="form-control" placeholder="DB. Col Name" name="col">
</div>
</div>
<hr />
`
);
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dynamic-fields"></div>
<button class="add-field">
Add Field
</button>
<button class="form-maker" type="submit">
Make Form
</button>
Getting a HTML select value and and input value from form submit ,
in here i get only undefined for the select value, and gives error on
Cannot read property 'target' of undefined
at RightcomponentComponent.push../src/app/rightcomponent/rightcomponent.component.ts.RightcomponentComponent.formSubmit
rightcomponent.component.html
<!--Form start-->
<form >
<div class="row">
<div class="form-group row">
<div style="margin-left: 60px;margin-right:50px ">
<select class="form-control" (ngModelChange)="onSelected($event)" id="sel1">
<option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="container set_buttons_div" >
<div class="form-group row">
<div class="col-xs-2">
<input class="form-control" id="ex1" type="text">
<br>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<a class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit(e)">
<i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
Buy
</a>
</div>
<br>
</form>
rightcomponent.component.ts
formSubmit(e){
var stock = this.onSelected(e);
console.log(stock);
var quantity = e.target.elements[0].value;
console.log(quantity);
}
onSelected(e){
var stock_company_name = e;
return stock_company_name;
}
I would have created component in this way, i dont know how to create a plunker / fiddler, but two way binding will work for you now. I created this way. :D
<!--Form start-->
<form #myForm="ngForm" novalidate>
<div class="row">
<div class="form-group row">
<div style="margin-left: 60px;margin-right:50px ">
<select class="form-control" (change)="onSelected($event)" id="sel1" name="stock" [(ngModel)]="Model.stockname">
<option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="container set_buttons_div" >
<div class="form-group row">
<div class="col-xs-2">
<input class="form-control" id="ex1" type="text" name="companyName" [(ngModel)]="Model.companyname">
<br>
</div>
</div>
</div>
</div>
<br>
<div class="row">
<a class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit()">
<i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
Buy
</a>
</div>
<br>
</form>
rightcomponent.component.ts
// create an Object model with form fields as key
Model = {
stockname: '',
companyname: ''
}
formSubmit(){
console.log(this.Model);
}
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.