I am trying dynamically add fields on button click and have several nested elements but only last nested element is visible.
var i = 1;
function add_new_recipient() {
var div_group = document.createElement("div");
div_group.setAttribute("class", "input-group");
var input = document.createElement("INPUT");
input.setAttribute("id", "txt_recipients" + i);
input.setAttribute("Name", "txt_recipients" + i);
input.setAttribute("type", "text");
input.setAttribute("class", "form-control required txt_recipients");
input.setAttribute("runat", "server");
var span = document.createElement("span");
span.setAttribute("class", "input-group-append");
var button_add = document.createElement("button");
button_add.setAttribute("id", "btn_add_new_recipients_field" + i);
button_add.setAttribute("type", "button");
button_add.setAttribute("class", "btn btn-primary btn_add_new_recipients_field fa fa-plus");
button_add.onclick = function () {
add_new_recipient();
}
var button_remove = document.createElement("button");
button_remove.setAttribute("id", "btn_remove_new_recipients_field" + i);
button_remove.setAttribute("type", "button");
button_remove.setAttribute("class", "btn btn-primary btn_remove_new_recipients_field fa fa-minus");
button_remove.onclick = function () {
remove_recipient();
}
span.appendChild(button_add);
span.appendChild(button_remove);
input.appendChild(span);
div_group.append(input);
document.getElementById("new_recipient_input").appendChild(div_group);
i++;
}
Only Input field is visible but not buttons.
Related
I have 1 function that creates a new checkbox with a delete button to remove it. However when using onclick for the delete button, it causes the it to be deleted when the create checkbox is activated so that nothing is there in the first place.
<script>
var list = document.getElementById("list");
var i = 0;
function add_client(form) {
var div = document.createElement("div");
div.setAttribute("id", "div"+i.toString())
var check = document.createElement("input")
check.setAttribute("type", "checkbox");
check.setAttribute("id", "check"+i.toString());
var label = document.createElement("label");
label.setAttribute("for", "check"+i.toString());
label.setAttribute("id", "label")
txtNode = document.createTextNode(form.value);
label.appendChild(txtNode);
var br = document.createElement("br");
div.appendChild(check);
div.appendChild(label);
list.appendChild(div)
i++;
var del = document.createElement("input");
del.setAttribute("type", "button");
del.setAttribute("value", "Delete");
del.setAttribute("id", "del")
div.appendChild(del);
del.onclick = del.remove();
div.appendChild(br);
}
</script>
i know this is a DOM issue but cannot get around it.... any ideas?
Add input per button click
function addInput() {
counter++;
// Create form inline div for product id
const div = document.createElement("div");
div.setAttribute('class', 'form-inline');
div.id = 'form-inline'+counter;
// Create column div for product id
const div1 = document.createElement("div");
div1.setAttribute('class', 'col-sm-3');
// Create form group div for product id
const div2 = document.createElement("div");
div2.setAttribute('class', 'form-group');
// Create label of Item ID for product id
const label = document.createElement("label");
label.htmlFor = 'ItemID' + counter;
label.innerHTML = "Item ID " + counter;
// Create input of Item ID for product id
const input = document.createElement("input");
input.id = 'ItemID' + counter;
input.type = 'text';
input.name = 'ItemID' + counter;
input.setAttribute('class', 'form-control');
input.placeholder = 'Enter product id';
// Create column div for product count
const div4 = document.createElement("div");
div4.setAttribute('class', 'col-sm-3');
div4.setAttribute('style', 'margin-left:10%;');
// Create form group div for product count
const div5 = document.createElement("div");
div5.setAttribute('class', 'form-group');
// Create label of Item Count for product id
const label2 = document.createElement("label");
label2.htmlFor = 'ItemCount' + counter;
label2.innerHTML = "Item Count " + counter;
// Create input of Item Count for product id
const input2 = document.createElement("input");
input2.id = 'ItemCount' + counter;
input2.type = 'text';
input2.name = 'ItemCount' + counter;
input2.setAttribute('class', 'form-control');
input2.placeholder = 'Enter product count';
// Append all items/divs
form.appendChild(div);
div.appendChild(div1);
div1.appendChild(div2);
div2.appendChild(label);
div2.appendChild(input);
div.appendChild(div4);
div4.appendChild(div5);
div5.appendChild(label2);
div5.appendChild(input2);
}
Remove input per button click
function removeInput() {
if (counter > 0) {
//document.getElementById("form-inline"+counter).remove();
//document.getElementById("form-inline"+counter).remove();
//document.getElementById("form-inline"+counter).removeChild(document.getElementById("form-inline"+counter).lastChild);
} else {
alert("error");
}
}
I basically want to be able to add as many inputs, and if needed to remove a couple, to remove them. at the end of the day you should be able to remove inputs until there are none left. The problem I'm having here is that the counter stops at the last added input and sets it to the last number so It will only remove the last input and I can't figure out how to go deeper than that. Thanks for any help.
I have a website that triggers an alert when items are added to the cart. I'm using javascript ES6, html5.
I'm dynamically creating bootstrap styled cards with menu items on the page and a add to cart button. when the add to cart button is pressed an alert is triggered.
The alert attempts to trigger on iOS 13.x.x safari but doesn't show. I attempted to set a timeout, but that didn't work. It has to be the way it's being called. I really don't know what to try next. I read that user navigation (back, forward) can break alerts. In the 'addEventListener' of the 'btn' towards the bottom of this horrific method is where the problem arises. Why is this not working on safari mobile?
createMenuCard(menu){
var heading = document.getElementById("concession-name");
heading.innerText = menu.menus.menu.concessionName;
var card = null;
var body = null;
var lsgroup = null;
for(var i = 0; i < menu.menus.menu.categories.length; i++){
for(var j = 0; j < menu.menus.menu.categories[i].menuItems.length; j++){
this.card = document.createElement('div');
this.card.className = 'card';
this.card.setAttribute('id', this.uuidv4());
this.card.setAttribute('style', 'width: 20rem;');
this.body = document.createElement('div');
this.body.className = 'card-body';
var title = document.createElement('div');
title.className = 'card-title';
title.innerText = menu.menus.menu.categories[i].menuItems[j].name;
this.body.appendChild(title);
this.lsgroup = document.createElement('div');
this.lsgroup.className = "list-group";
this.body.appendChild(this.lsgroup);
for(var k = 0; k < menu.menus.menu.categories[i].menuItems[j].subItems.length; k++){
if(menu.menus.menu.categories[i].menuItems[j].subItems[k].name === "")
{
var id = this.uuidv4();
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("name", "");
input.setAttribute("id", id);
input.setAttribute("value", menu.menus.menu.categories[i].menuItems[j].name);
input.setAttribute("price", menu.menus.menu.categories[i].menuItems[j].subItems[k].price);
this.lsgroup.appendChild(input);
// label
var label = document.createElement("label");
label.className = "list-group-item";
label.setAttribute("for", id);
label.innerText = menu.menus.menu.categories[i].menuItems[j].subItems[k].price + " " + menu.menus.menu.categories[i].menuItems[j].name;
this.lsgroup.appendChild(label);
}
else
{
var id = this.uuidv4();
// input
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("name", "");
input.setAttribute("id", id);
input.setAttribute("value", menu.menus.menu.categories[i].menuItems[j].subItems[k].name);
input.setAttribute("price", menu.menus.menu.categories[i].menuItems[j].subItems[k].price);
this.lsgroup.appendChild(input);
// label
var label = document.createElement("label");
label.className = "list-group-item";
label.setAttribute("for", id);
label.innerText = menu.menus.menu.categories[i].menuItems[j].subItems[k].price + " " +menu.menus.menu.categories[i].menuItems[j].subItems[k].name;
this.lsgroup.appendChild(label);
}
}
var btn = document.createElement('a');
btn.setAttribute("href", "#"); // javascript:toCart()
btn.addEventListener("click", (e)=> {
var inputs = e.path[2].querySelector("div > div.list-group").getElementsByTagName("input");
var description = e.path[2].querySelector("div > div.card-title").innerText;
for(var l = 0; l < inputs.length; l++){
if(inputs[l].checked === true){
var obj = {
option : inputs[l].value,
price : inputs[l].getAttribute("price")
};
setTimeout(function(){
window.alert("Added: " + description + " to cart");
}, 300);
//window.alert("Added: " + description + " to cart");
description += " " + obj.option;
var appItem = new AppItems(description, obj.price, 1);
cart.addItem(appItem);
}
}
});
btn.className = "btn btn-primary";
btn.innerText = "Add To Cart";
this.body.appendChild(btn);
this.card.appendChild(this.body);
var container = document.getElementById('cards');
container.appendChild(this.card);
}
}
var chk = document.getElementById("checkout");
chk.addEventListener("click", (e)=> {
cart.save();
window.open("./cart.html","_self");
});
}
I have one cell (columns), in which I want to add two buttons. This is what I created:
var editbtn = document.createElement('button');
editbtn.type= "button";
editbtn.className= "editbtn";
editbtn.id= "edit-button-"+(i+1);
editbtn.innerHTML= "Edit";
editbtn.onclick = editRow.bind(this, i + 1);
var savebtn = document.createElement('button');
savebtn.type= "button";
savebtn.className= "savebtn";
savebtn.id= "save-button-"+(i+1);
savebtn.innerHTML= "Save";
savebtn.onclick = saveRow.bind(this, i + 1);
cell3.appendChild(editbtn);
cell3.appendChild(savebtn);
However, only the savebtn appears. How to append two buttons or more in the same column?
You can easily do that with an array and a for loop:
var names = ['edit', 'save'];
var editRows = [editRow, saveRow];
for ( var i = 0; i < names.length; i++ )
{
var btn = document.createElement('button');
btn.type = "button";
btn.className = names[i] + "btn";
btn.id = names[i] + "-button-" + (i+1);
btn.innerHTML = names[i];
btn.onclick = editRows[i].(this, i + 1);
cell3.appendChild( editbtn );
}
You can add as many button as you want then just updating names and editRows accordingly, no need to touch the for loop.
I have a doubt in selecting and verify that the checkbox is checked in a div with id="div1" which in turn is added in another div with id = "box" and the result is checkbox -> div.id = div1 -> divbox.id = box
I have this base function to create checkbox and insert in div1 and add div1 to div box and it´s work and I don´t put the css code because don´t need
function createCheckBox() {
//count
var count = 0;
//create div1
var div1 = document.createElement('div');
div1.id = "div1";
div1.style.fontSize = "20px";
//div box
var divbox = document.createElement('div');
divbox.id = "box";
//checkbox
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "checkBox" + (count++);
checkbox.id = checkbox.name;
var label = document.createElement('label')
label.htmlFor = "id";
label.appendChild(document.createTextNode("checkBox" + (count++)));
var br = document.createElement('br');
div1.appendChild(checkbox);
div1.appendChild(label);
div1.appendChild(br);
divbox.appendChild(div1);
document.body.appendChild(divbox);
}
my doubt is select checkbox check and return if is checked or not
and in this function removeCheckBox I wanna get value of checked checkbox
in this way divbox.id = box -> div.id = div1 -> checkbox.checked and it´s not work
function removeCheckBox() {
//box
var divbox = document.getElementById("box");
//inside divbox select element with id = div1
var div1 = divbox.getElementById("div1");
for (var i = 0; div1.childNodes.length; i++) {
if (div1.childNodes[i].checked) {
alert("CheckBox is checked");
//remove from div1
div1.removeChild(div1.childNodes[i]);
} else {
alert("CheckBox is not checked");
}
}
}
any suggestion?
There is solution (description in code comment), based on all those comments :
function removeCheckBox() {
var box=document.getElementById('box');
//get all checked checkboxes inside box div
var chk=box.querySelectorAll('[type="checkbox"]:checked');
for(var i=0;i<chk.length;i++) {
box.removeChild(chk[i].parentNode); //remove complete div, who is parent of checked checkbox
}
}
function createCheckBox() {
//count
var count = 0;
var div = document.createElement('div');
div.id = "div1";
div.style.fontSize = "20px";
//div box
var box = document.getElementById('box');
//checkbox
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "checkBox" + (count++).toString();
checkbox.id = checkbox.name;
var label = document.createElement('label')
label.htmlFor = "id";
label.appendChild(document.createTextNode("checkBox" + (count++)));
var br = document.createElement('br');
div.appendChild(checkbox);
div.appendChild(label);
div.appendChild(br);
box.appendChild(div);
}
<input type="button" value="create" onclick="createCheckBox();" />
<input type="button" value="remove" onclick="removeCheckBox();" />
<br>
<div id="box">
</div>
You have many issues in the code. Your function should look something like this:
function selectCheckBox() {
//box
var box = document.getElementById("box");
//div1
var div1 = document.getElementById("div1"); //should be document not box
for (var i = 0; i < div1.childNodes.length; i++) {//should be condition i < div1.childNodes.length, also not spelling of length
if (div1.childNodes[i].type == 'checkbox') { //make sure it is a checkbox first
if (div1.childNodes[i].checked) {
alert("CheckBox is checked");
} else {
alert("CheckBox is not checked");
}
}
}
}