I have a form with a Select input using selectize.js where users can add more input elements.
But when a new select element was created the select option didn't show. Only the First select element shows the option.
First Select Element working properly
But the second Element didn't show the select option
here is my HTML:
<div id="list-item">
<div class="form-row item">
<div class="col-md-10">
<div class="position-relative form-group">
<select name="item-name[]" id="item-name" class="item-name form-control" required>
<option value="" selected>Ketikkan nama barang</option>
<option value="1">Pulpen (Pcs)</option>
<option value="2">Spidol (Pcs)</option>
<option value="3">Air Mineral Gelas (Dos)</option>
</select>
<div class="invalid-feedback">
Pilih minimal 1 Barang
</div>
</div>
</div>
<div class="col-md-2">
<input name="qty[]" id="qty" value="0" min="1" type="number" class="qty form-control" required>
<div class="invalid-feedback">
Masukkan Jumlah Barang
</div>
</div>
</div>
</div>
<div class="position-relative form-group">
<button type="button" id="btn-add-item" class="btn btn-primary mr-3">Add More</button>
<button type="button" id="btn-delete-item" class="btn btn-transition btn-outline-danger">Delete</button>
</div>
<button type="submit" class="mt-2 btn btn-success btn-block">Save</button>
Here is My JS:
$(document).ready(function() {
// $('.item-name').select2();
$('.item-name').selectize({
create: false
});
});
const btnAddItem = document.getElementById('btn-add-item');
const btnDeleteItem = document.getElementById('btn-delete-item');
const moreItemElement = document.getElementsByClassName('item')[0];
btnAddItem.addEventListener('click', function () {
const clone = moreItemElement.cloneNode(true);
let newItem = document.getElementById('list-item').appendChild(clone);
let itemSelect = newItem.getElementsByClassName(".item-name").value = '';
newItem.getElementsByClassName(".qty").value = 0
})
btnDeleteItem.addEventListener('click', function () {
let listItem = document.getElementsByClassName('item');
let lastItem = listItem[listItem.length - 1];
lastItem.parentNode.removeChild(lastItem);
})
Related
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.
I would like to enter two input fields and one button dynamically adding them from the button click function.
They should look like this:
https://i.stack.imgur.com/iRnDu.png
On click of the button add, I would like to disable the button, add a new row of items (2 input boxes and the clickable button again). I would also like to store the 2 values from the text-boxes in an array.
add() {
let row = document.createElement('div');
row.className = 'row';
row.innerHTML += `
<br>
<input type="text" id="text1"> <input type="text" id="text2"> <button id="button">ADD</button> `;
document.querySelector('.showInputField').appendChild(row);
document.getElementById("button").addEventListener('click',this.input,false);}input(){
let inputValue = (document.getElementById("text1") as HTMLInputElement).value;
console.log(inputValue);
this.user.push(inputValue);
this.users.push(this.user);
this.user = [];
}
And this is the HTML:
<div>
CLICK ON BUTTON TO ADD NEW FIELD
<div class="showInputField">
<button (click)="add()">ADD</button>
</div>
<!-- The add() function is called -->
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="panel panel-default">
<div class="panel-body">
<div id="education_fields">
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value=""
placeholder="School name">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<select class="form-control" id="educationDate" name="educationDate[]">
<option value="">Date</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
</select>
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="education_fields();"> <span
class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<script>
var room = 1;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + room);
var rdiv = 'removeclass' + room;
divtest.innerHTML = '<div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" id="Schoolname" name="Schoolname[]" value="" placeholder="School name"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <select class="form-control" id="educationDate" name="educationDate[]"><option value="">Date</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields(' + room + ');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_education_fields(rid) {
$('.removeclass' + rid).remove();
}
</script>
I have created a two javascript.
1.When i click the checkbox the input field is appeared and when i unchecked input field is disappeared.
2.Second is when i click the add more items the all fields are created one more time.
Now the problem is when is created a second and more items the checkbox is not working.
HTML Code:
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Food Name" name="Name1" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Name</label>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="field-value" placeholder="Description" style="width:120%;" required>
<label class="sr-only" for="field-value">Description</label>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<select id="select1" name="select1" style="width:130%;" class="form-control" required>
<option value=""></option>
<option value="1">Food Type 1</option>
<option value="2">Food Type 2</option>
<select>
<label for="select1">Food Type</label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="text" value="" class="form-control" data-role="tagsinput" placeholder="Tags" />
<label class="sr-only" for="field-tags">Tags</label>
</div>
</div>
</div>
<div class="row">
<div class="form-inline">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control" id="Name1" placeholder="Price" name="price" style="width:120%;" required data-rule-minlength="2">
<label class="sr-only" for="field-name">Price</label>
</div>
</div>
<div class="col-md-2">
<div class="checkbox checkbox-styled">
<label><em>Half Plate Price</em>
<input type="checkbox" value="" id="trigger2" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields2">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
<div class="col-md-3">
<div class="checkbox checkbox-styled">
<label><em>Quarter Plate Price</em>
<input type="checkbox" value="" id="trigger" name="question"> </label>
</div>
</div>
<div class="col-md-1">
<div id="hidden_fields">
<input type="text" id="hidden_field" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-100px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
</div>
</div>
<button class="btn btn-icon-toggle btn-delete" data-toggle="tooltip" data-placement="bottom" title="Delete Field" data-role="remove"> <span class="md md-delete"></span> </button>
<button class="btn 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>
<!-- /div.col-md-12 -->
</div>
<div class="form-group">
<button type="button" name="submit" href="#" class="btn ink-reaction btn-raised btn-primary">Submit Items</button>
</div>
<!--end .form-group -->
</div>
Checkbox Js:
<script type="text/javascript">
$(function() {
// Get the form fields and hidden div
var checkbox = $("#trigger");
var hidden = $("#hidden_fields");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
// Make sure that the hidden fields are indeed
// hidden.
hidden.hide();
$("#hidden_field").val("");
}
});
});
$(function() {
var checkbox = $("#trigger2");
var hidden = $("#hidden_fields2");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$("#hidden_field2").val("");
}
});
});
</script>
Add more items JS:
$(function() {
// Remove button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="remove"]', function(e) {
e.preventDefault();
$(this).closest('.form-inline').remove();
});
// Add button
$(document).on('click', '[data-role="dynamic-fields"] > .form-inline [data-role="add"]', function(e) {
e.preventDefault();
var container = $(this).closest('[data-role="dynamic-fields"]');
new_field_group = container.children().filter('.form-inline:first-child').clone();
new_field_group.find('input').each(function() {
$(this).val('');
});
container.append(new_field_group);
});
});
page Screenshot:
There are a couple of problems here:
You are cloning elements and then trying to access them via the same ID (you should use class)
Your functions don't target just clicked element but any element with the selector.
You are cloning elements so you need bind the click event to a non-cloned element: e.g. via $(document).on
I've updated some of your code to demonstrate what I'm talking about. In the html, I've added classes in the trigger2 and hidden_fields2 elements and display:none style to the hidden fields so they are hidden by default.:
<div class="col-md-2">
<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-md-1">
<div id="hidden_fields2" class="hidden_fields2" style="display:none;">
<input type="text" id="hidden_field2" name="hidden" placeholder="Price" class="form-control" style="width:140%;margin-left:-35px;height: 29px;margin-top: 24px;font-weight: 380;font-size: 16px;line-height: 1.5;"> </div>
</div>
In the javascript, I've changed the function to run from a $(document).on event bind and used the element class instead of the id. I've also changed the code so it only effects the checkbox you change and the closest hidden elements:
$(function() {
$(document).on('change', '.trigger2', function(){
var checkbox = $(this);
var parent = checkbox.closest('.form-inline');
var hidden = parent.find(".hidden_fields2");
hidden.hide();
if (checkbox.is(':checked')) {
// Show the hidden fields.
hidden.show();
} else {
hidden.hide();
$(".hidden_field2").val("");
}
});
});
You need to use the same logic on your other functions and inputs.
I have three cascading select lists. When I try to reset them with this code:
function resetSearch(advancedSearch){
document.getElementById("advancedSearch").reset();
submitQuery();
};
It resets the select lists, but because the select lists are cascading, so one depends on another to fill the select list with the correct values, it sets the values of the lists that are selected at that moment to the default.
So in my case I have three selectlists, one for the table names, one for the field names and one for the attributes. When I select a table it gives me the matching column names and attributes. If I than push teh reset button, it resets the table name to default, but the fieldnames and attribute select lists are set to the default of the other table.
Here is a picture to clarify my question:
This is my form with the select lists in it and the reset button;
<form action="javascript:submitQuery()" id="advancedSearch">
<!-- Search by name input field -->
<div class="form-group">
<div id= "selectListContent">
<div class="row">
<div id="content-a">
<div class='content-row'>
<div class="select_table col-md-6">
<label for="invoerTabelNaam">Select table:</label>
<span>
<select class="form-control" name="table_names" id="slctTable">
</select>
</span>
</div>
<div class="select_column col-md-6">
<label for="invoerColumnNaam">Select column:</label>
<span>
<select class="form-control" name="column_names" id="slctField">
</select>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="select_attribute col-md-9">
<label for="invoerAttribuutNaam">Select attribute:</label>
<span>
<select class="form-control" name="attribute_names" id="slctAttribute">
</select>
</span>
</div>
</div>
</div>
</div>
<!-- Buttons search en reset voor tab advanced search -->
<div class="form-group">
<div class="col-md-6">
<button type="reset" class="btn btn-block btn-primary" onclick="resetSearch()">
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>   Reset
</button>
</div>
</div>
</div>
I assume that you have some event which populates other selects when value in first select is chosen. In that case you need to trigger it after form is reset.
For e.g.:
function resetSearch() {
$('#slctTable').closest('form')[0].reset();
$('#slctTable').trigger('change');
}
To clarify: how reset could 'know' that for 'table 1' correct list of fields is 'field1' and 'field2' and for 'table 2' it is 'other1' and 'other2'? It can just set selection to first items of lists.
var data = {
'table1': {
'tab1_column1': ['tab1_col1_attr_1', 'tab1_col1_attr_2'],
'tab1_column2': ['tab1_col2_attr_1', 'tab1_col2_attr_2']
},
'table2': {
'tab2_column1': ['tab2_col1_attr_1', 'tab2_col1_attr_2'],
'tab2_column2': ['tab2_col2_attr_1', 'tab2_col2_attr_2']
}
}
function resetSearch() {
$('#slctTable').closest('form')[0].reset();
$('#slctTable').trigger('change');
}
$(function() {
var table = $('#slctTable'),
field = $('#slctField'),
attr = $('#slctAttribute');
table.on('change', function() {
field.html('').val('');
$.each(data[$(this).val()], function(k, v) {
field.append($("<option />").val(k).text(k))
});
field.trigger('change');
});
field.on('change', function() {
attr.html('').val('');
$.each(data[table.val()][$(this).val()], function(k, v) {
attr.append($("<option />").val(v).text(v))
});
});
$.each(data, function(k, val) {
table.append($("<option />").val(k).text(k))
});
//populate fields for the first time
table.trigger('change');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="javascript:submitQuery()" id="advancedSearch">
<!-- Search by name input field -->
<div class="form-group">
<div id="selectListContent">
<div class="row">
<div id="content-a">
<div class='content-row'>
<div class="select_table col-md-6">
<label for="invoerTabelNaam">Select table:</label>
<span>
<select class="form-control" name="table_names" id="slctTable">
</select>
</span>
</div>
<div class="select_column col-md-6">
<label for="invoerColumnNaam">Select column:</label>
<span>
<select class="form-control" name="column_names" id="slctField">
</select>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="select_attribute col-md-9">
<label for="invoerAttribuutNaam">Select attribute:</label>
<span>
<select class="form-control" name="attribute_names" id="slctAttribute">
</select>
</span>
</div>
</div>
</div>
</div>
<!-- Buttons search en reset voor tab advanced search -->
<div class="form-group">
<div class="col-md-6">
<button type="reset" class="btn btn-block btn-primary" onclick="resetSearch()">
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>   Reset
</button>
</div>
</div>
function resetSearch(advancedSearch){
change for this:
function resetSearch(){
I have create from your initial HTML and description this Codepen with cascading population of field. I do not see your problem. Could you provide more explaination or to say if this resolve your problem?
Codepen: http://codepen.io/anon/pen/ezmErd
HTML
<form class="container" action="javascript:submitQuery()" id="advancedSearch">
<div class="form-group">
<div id="selectListContent">
<div class="row">
<div id="content-a">
<div class='content-row'>
<div class="select_table col-md-6">
<label for="invoerTabelNaam">Select table:</label>
<span>
<select class="form-control" name="table_names" id="slctTable">
</select>
</span>
</div>
<div class="select_column col-md-6">
<label for="invoerColumnNaam">Select column:</label>
<span>
<select class="form-control" name="column_names" id="slctField">
</select>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="select_attribute col-md-9">
<label for="invoerAttribuutNaam">Select attribute:</label>
<span>
<select class="form-control" name="attribute_names" id="slctAttribute">
</select>
</span>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<button type="reset" class="btn btn-block btn-primary" onclick="resetSearch('advancedSearch')">
<span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>   Reset
</button>
</div>
</div>
</form>
JS
var table = document.getElementById("slctTable"),
field = document.getElementById("slctField"),
attrib = document.getElementById("slctAttribute"),
populate = function (dropdown, name) {
for (var i = 0, temp; i < 4; i++) {
temp = document.createElement("option")
temp.value = i + 1;
temp.textContent = name + " " + +(i + 1);
dropdown.appendChild(temp);
}
},
submitQuery = function () {
console.log("Submit !");
},
resetSearch = function (advancedSearch) {
document.getElementById(advancedSearch).reset();
submitQuery();
};
// Populate dynamicly the first Dropdown.
populate(table, "Table");
// When you select an item of first Dropdown...
table.addEventListener("change", function() {
field.innerHTML = "";
// ...populate dynamicly the second Dropdown.
populate(field, "Field");
});
// When you select an item of second Dropdown...
field.addEventListener("change", function() {
attrib.innerHTML = "";
// ...populate dynamicly the last Dropdown.
populate(attrib, "Attribute");
});
I have this code javascript to duplicate form , the problem that if I fill in the form and I click on button "Add More" , the form will be duplicated with the same values that I have just filled them in the first form.
How to fix it and get empty fields after duplication form ?
Javascript:
$(document).ready(function() {
var id = 1;
// get item
var item = $("#addparts");
var before = $('#div_button');
// initalize event click
$('#addMore').on('click', function() {
// clone addparts
var clone = item.clone(true);
// remove id
clone.attr('id', '');
// add class duplicate
clone.attr('class', 'duplicate');
// insert duplicate before button div
before.before(clone);
});
});
HTML:
<form action="" method="post" id="sign-up_area" role="form">
<div class="row" id="addparts">
<div class="col-md-6">
<div class="form-group">
<select class="form-control input-medium" name="name[]">
<option value="">select disabled>Select Parts</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Quantity</label>
<input type="text" name="email[]" id="partsquantity">
</div>
</div>
</div>
<div class="row" id="div_button">
<input type="button" name="addmore" value="Add More" id="addMore">
</div>
<!-- Button -->
<p>
<input type="submit" name="send" class="btn btn-primary">
</p>
</form>
You need to empty the value of input on your clone like this
$(document).ready(function() {
var id = 1;
// get item
var item = $("#addparts");
var before = $('#div_button');
// initalize event click
$('#addMore').on('click', function() {
// clone addparts
var clone = item.clone(true);
// remove id
clone.attr('id', '');
// add class duplicate
clone.attr('class', 'duplicate');
clone.find('input').val(""); // empty input value!
// insert duplicate before button div
before.before(clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" id="sign-up_area" role="form">
<div class="row" id="addparts">
<div class="col-md-6">
<div class="form-group">
<select class="form-control input-medium" name="name[]">
<option value="">select disabled>Select Parts</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Quantity</label>
<input type="text" name="email[]" id="partsquantity">
</div>
</div>
</div>
<div class="row" id="div_button">
<input type="button" name="addmore" value="Add More" id="addMore">
</div>
<!-- Button -->
<p>
<input type="submit" name="send" class="btn btn-primary">
</p>
</form>
You could clear the form after you've appended it:
$('#addMore').on('click', function() {
var clone = item.clone(); // no need for true here
clone.removeAttr('id'); // if you don't want an id attr on the form
clone.addClass('duplicate');
clone[0].reset(); // js method to clear form
before.before(clone);
});