pass Javascript array to PHP using AJAX - javascript

I have to pass Javascript array variable to PHP ,
so here php and javascript code both are in same page .
when i give console inside isset($_POST['kvcArray'])) -- > it is not printing . guess some problem with this . Can anyone help me in this
body {
color: #566787;
background: #f5f5f5;
font-family: 'Varela Round', sans-serif;
font-size: 13px;
}
.table-wrapper {
background: #fff;
padding: 20px 25px;
margin: 30px 0;
border-radius:1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.247);
}
.table-title {
padding-bottom: 15px;
background: linear-gradient(40deg, #2096ff, #05ffa3) !important;
color: #fff;
padding: 16px 30px;
margin: -20px -25px 10px;
border-radius: 1px 1px 0 0;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.247);
}
.table-title h2 {
margin: 5px 0 0;
font-size: 24px;
}
.table-title .btn-group {
float: right;
}
.table-title .btn {
color: #fff;
float: right;
font-size: 13px;
border: none;
min-width: 50px;
border-radius: 1px;
border: none;
outline: none !important;
margin-left: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.247);
}
.table-title .btn i {
float: left;
font-size: 21px;
margin-right: 5px;
}
.table-title .btn span {
float: left;
margin-top: 2px;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
padding: 12px 15px;
vertical-align: middle;
}
table.table tr th:first-child {
width: 60px;
}
table.table tr th:last-child {
width: 100px;
}
table.table-striped tbody tr:nth-of-type(odd) {
background-color: #fcfcfc;
}
table.table-striped.table-hover tbody tr:hover {
background: #f5f5f5;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table td:last-child i {
opacity: 0.9;
font-size: 22px;
margin: 0 5px;
}
table.table td a {
font-weight: bold;
color: #566787;
display: inline-block;
text-decoration: none;
outline: none !important;
}
table.table td a:hover {
color: #2196F3;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #F44336;
}
table.table td i {
font-size: 19px;
}
table.table .avatar {
border-radius: 1px;
vertical-align: middle;
margin-right: 10px;
}
.pagination {
float: right;
margin: 0 0 5px;
}
.pagination li a {
border: none;
font-size: 13px;
min-width: 30px;
min-height: 30px;
color: #999;
margin: 0 2px;
line-height: 30px;
border-radius: 1px !important;
text-align: center;
padding: 0 6px;
}
.pagination li a:hover {
color: #666;
}
.pagination li.active a, .pagination li.active a.page-link {
background: #03A9F4;
}
.pagination li.active a:hover {
background: #0397d6;
}
.pagination li.disabled i {
color: #ccc;
}
.pagination li i {
font-size: 16px;
padding-top: 6px
}
.hint-text {
float: left;
margin-top: 10px;
font-size: 13px;
}
/* Custom checkbox */
.custom-checkbox {
position: relative;
}
.custom-checkbox input[type="checkbox"] {
opacity: 0;
position: absolute;
margin: 5px 0 0 3px;
z-index: 9;
}
.custom-checkbox label:before{
width: 18px;
height: 18px;
}
.custom-checkbox label:before {
content: '';
margin-right: 10px;
display: inline-block;
vertical-align: text-top;
background: white;
border: 1px solid #bbb;
border-radius: 1px;
box-sizing: border-box;
z-index: 2;
}
.custom-checkbox input[type="checkbox"]:checked + label:after {
content: '';
position: absolute;
left: 6px;
top: 3px;
width: 6px;
height: 11px;
border: solid #000;
border-width: 0 3px 3px 0;
transform: inherit;
z-index: 3;
transform: rotateZ(45deg);
}
.custom-checkbox input[type="checkbox"]:checked + label:before {
border-color: #03A9F4;
background: #03A9F4;
}
.custom-checkbox input[type="checkbox"]:checked + label:after {
border-color: #fff;
}
.custom-checkbox input[type="checkbox"]:disabled + label:before {
color: #b8b8b8;
cursor: auto;
box-shadow: none;
background: #ddd;
}
/* Modal styles */
.modal .modal-dialog {
max-width: 400px;
}
.modal .modal-header, .modal .modal-body, .modal .modal-footer {
padding: 20px 30px;
}
.modal .modal-content {
border-radius: 1px;
}
.modal .modal-footer {
background: #ecf0f1;
border-radius: 0 0 1px 1px;
}
.modal .modal-title {
display: inline-block;
}
.modal .form-control {
border-radius: 1px;
box-shadow: none;
border-color: #dddddd;
}
.modal textarea.form-control {
resize: vertical;
}
.modal .btn {
border-radius: 1px;
min-width: 100px;
}
.modal form label {
font-weight: normal;
}
<script type="text/javascript">
$(document).ready(function(){
// Activate tooltip
$('[data-toggle="tooltip"]').tooltip();
// Select/Deselect checkboxes
var checkbox = $('table tbody input[type="checkbox"]');
$("#selectAll").click(function(){
if(this.checked){
checkbox.each(function(){
this.checked = true;
});
}else{
checkbox.each(function(){
this.checked = false;
});
}
});
checkbox.click(function(){
if(!this.checked){
$("#selectAll").prop("checked", false);
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>Manage <b>Instances</b></h2>
</div>
<div class="col-sm-6">
<i class="material-icons"></i> <span>Add New Employee</span>
<!-- <button id="Delete" onclick="Deleteall();" class="btn btn-danger" data-toggle="modal"><i class="material-icons"></i> <span>DELETe Existing User</span></a> -->
<input type="submit" class="button1" name="insert" value="insert" />
</div>
</div>
</div>
<div align="center">
<form method="post" id="theform">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</form>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
<div id="addEmployeeModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<form method="POST" action="Index.php">
<div class="modal-header">
<h4 class="modal-title">Add Employee</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Customer Name</label>
<input type="text" class="form-control" name="CName" required>
</div>
<div class="form-group">
<label>Environment</label>
<input type="text" class="form-control" name="Environment" required>
</div>
<div class="form-group">
<label>URL Value</label>
<textarea class="form-control" name = "URLValue"required></textarea>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" name="submit" class="btn btn-info" value="Insert">
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$( document ).ready(function() {
$( ".button1" ).click(function() {
var val = [];
$("input:checked").each(function (index,value) {
val[index] = this.value;
});
var myJSONText = JSON.stringify(val);
$.ajax({
data: {"myJSONText": myJSONText},
type: 'POST',
success: function(response) {
alert(response);
}
});
});
});
</script>
<?php
if (isset($_POST['myJSONText'])) {
echo "<script>console.log('Debug Objects' );</script>";
echo "<pre>";
var_dump(json_decode($_POST['kvcArray'], true));
echo "</pre>";
die();
}
?>
<?php
if(isset($_POST['submit'])){
//index.php
$file_open = fopen("FILES/employee.csv", "a");
$no_rows = count(file("FILES/employee.csv"));
if($no_rows > 1){
$no_rows = ($no_rows - 1) + 1;
}
$form_data = array(
'CustomerName' => $_POST['CName'],
'Environment' => $_POST['Environment'],
'URLValue' => $_POST['URLValue']
);
fputcsv($file_open, $form_data);
}
?>
</html>
<script>
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"FILES/employee.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = ' <table class="table table-striped table-hover"><thead> <tr><th><span class="custom-checkbox"><input type="checkbox" id="selectAll"><label for="selectAll"></label></span></th>';
table_data += '<tr><th></th>';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
// table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
if(cell_count == 4){
table_data += '<th></th><th></th>';
}
}
else
{
if(cell_count === 0 ){
table_data +='<tr><td><span class="custom-checkbox"><input type="checkbox" class="checkbox" id="checkbox"'+count+'" name="options[]" value="'+count+'"><label for="checkbox1"></label></span></td>';
table_data += '<td>'+cell_data[cell_count]+'</td>';
}else{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
So whole code is provided above , here adding instance works fine , but only problem is when i click on delete all the checkbox values selected should be passed to php , so that i can delete that particular row from csv file .


Based on your edit couple of notes about your code:
1st - put all you javascript function in 1 place, lets say just before the closing body tag - like this:
<script>
$(document).ready(function(){
// all your function here ! in 1 place
});
</script>
</body>
</html>
2nd - not so important but still, move all the php code at the top of your file:
<?php
// all the php here
?>
<!DOCTYPE html>
<html>
<head>
...
...
As far as I understand you're making request to the same page where you form with check boxes is. So you can have something like this:
<?php
if (isset($_POST['kvcArray'])) {
echo "<pre>";
echo "<b>".__FILE__."</b><br/>";
var_dump(json_decode($_POST['kvcArray'], true));
echo "</pre>";
die();
}
?>
<span class="custom-checkbox"><input type="checkbox" class="checkbox" id="checkbox1" name="options[]" value="1"><label for="checkbox1"></label></span><br />
<span class="custom-checkbox"><input type="checkbox" class="checkbox" id="checkbox2" name="options[]" value="2"><label for="checkbox2"></label></span><br />
<span class="custom-checkbox"><input type="checkbox" class="checkbox" id="checkbox3" name="options[]" value="3"><label for="checkbox3"></label></span><br />
<span class="custom-checkbox"><input type="checkbox" class="checkbox" id="checkbox4" name="options[]" value="4"><label for="checkbox4"></label></span><br />
<input type="submit" class="button" name="insert" value="insert" />
Note that I have edited your js code, the way you're constructing your array and also no need to use "url" inside ajax when posting to same page!
<script type="text/javascript">
$( document ).ready(function() {
$( ".button" ).click(function() {
var val = [];
$("input:checked").each(function (index,value) {
val[index] = this.value;
});
var myJSONText = JSON.stringify(val);
$.ajax({
data: {'kvcArray': myJSONText},
url: 'index.php',
type: 'POST',
success: function(result) {
//alert("Success");
}
});
});
});
</script>
This code has been tested and works on 100%

Related

How to show 1 form at a time on a page using JavaScript

I'm creating lists which contain cards that are created by the user via forms.
The issue that I'm having here is that I want to show only 1 add-item-form form * on the page at a time (Not 1 form in each list but 1 form on the page overall). So, If a user creates multiple lists, then opens a form by clicking on the Add a card button, and then goes and click on another Add a card button from another list on the page, the first form should disappear, and a new form should appear in the list that it was clicked. Right now, multiple forms are being shown in different lists when I click the Add a card button, especially whenever I create multiple lists.
So basically, whenever Add a card is clicked, if a form is already open somewhere else, it will be closed and a new form will be opened within the list that I clicked the Add a card button.
I hope my explanation is useful. A sample of the code is shown below.
Here's a link to the code on [Codepen][https://codepen.io/Joanc/pen/MZjJvy]1.
Your help will be appreciated.
ATTENTION: I only want to change the cards form with class add-item-form not the list form with id add-list-form. The (grey) lists are fine, my only issue is with the cards.
// *************** ADD LISTS ***************
// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);
function addList(e) {
e.preventDefault();
const input = document.getElementById("list-name");
const name = input.value;
input.value = '';
if ('' == name) {
return;
}
const list = document.createElement('div');
list.setAttribute('class', 'list');
list.innerHTML =
`<div class="list-container">
<div class="list-heading" >
<h3 contenteditable="true">` + name + `</h3>
<div class= "ellipsis">…</div>
</div>
<div>
<div class="link-wrapper">
<a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a card</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another card</span>
</a>
</div>
<form class="add-item-form">
<textarea placeholder="Enter a title for this card..."></textarea>
<div>
<input type="submit" value="Add Card">
<input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<div class= "ellipsis">…</div>
</div>
</form>
</div>
</div>`;
document.getElementById("list-wrapper").appendChild(list);
}
// add new item submit eventlistener
document.addEventListener('submit', function(e) {
if (e.target.matches('.add-item-form')) {
e.preventDefault();
const textarea = e.target.getElementsByTagName('textarea')[0];
const text = textarea.value;
textarea.value = '';
if ('' == text) {
return;
}
//create card
const cardItem = document.createElement('p');
const card = document.createElement('div');
card.setAttribute('class', 'card');
//create pen icon
const pen = document.createElement('a');
pen.innerHTML = '<i class="fas fa-pen"></i>';
cardItem.innerHTML = text;
card.appendChild(cardItem)
card.appendChild(pen);
e.target.parentElement.prepend(card);
}
});
let spans = document.getElementsByClassName("placeholder");
//toggle between 'add a list' and 'add another list' links
window.onload = function(){
spans[1].style.display='none';
document.forms[0].style.display='none';
};
let clicked = 0;
//toggle between links and 'add-list-form'
function toggleDiv(formId, linkId){
clicked++;
if(document.getElementById( formId ).style.display == 'block'){
document.getElementById( formId ).style.display = 'none';
document.getElementById( linkId ).style.display = 'block';
}else{
document.getElementById( linkId ).style.display = 'none';
document.getElementById( formId ).style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
//toggle between links and 'add-list-form'
function hideSHowForm(form, link){
// var getForm = document.getElementsByClassName("listContainer");
for (var i=0;i<document.getElementsByClassName(form).length;i++){
// getForm[i].style.display = 'block';
if(document.getElementsByClassName(form )[i].style.display == 'block'){
document.getElementsByClassName(form)[i].style.display = 'none';
document.getElementById(link).style.display = 'block';
}else{
document.getElementById(link).style.display = 'none';
document.getElementsByClassName(form)[i].style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
}
// function showTitleAndCardSection(){
// var showCardSection = document.getElementsByClassName("listContainer");
// for (var i=0;i<showCardSection.length;i+=1){
// showCardSection [i].style.display = 'block';
// }
//}
/*************** ADD LISTS ***************/
.work-board {
background-color: transparent;
border-radius: 5px;
display: flex;
flex-direction: row;
}
#list-wrapper {
margin: 8px 5px 10px 0px;
padding: 2px;
border-radius: 4px;
background: transparent;
border: none;
display: flex;
flex-direction: row;
}
.list {
background: transparent;
}
.list-container {
padding: 4px 8px;
border-radius: 4px;
width: 256px;
background-color: rgb(226,228,230);
border: none;
margin: 2px 5px;
}
.list-heading {
display: flex;
flex-direction: row;
padding-bottom: 3px;
margin-bottom: 5px;
}
.list .list-heading h3 {
margin: 2px 3px 0px 0px;
width: 82%;
border-radius: 4px;
outline:none;
font-size: 14px;
font-weight: 600;
padding: 5px;
}
.list .list-heading h3:focus{
border: solid 2px rgb(91,164,207);
background-color: rgb(255, 255, 255);
}
.ellipsis {
/* display: inline-block; */
width: 30px;
text-align: center;
border-radius: 4px;
margin: 0px 1px 0px 0px;
padding: 0px;
float: right;
}
.ellipsis:hover {
background-color: rgba(131, 140, 145, 0.2)
}
form.add-item-form .ellipsis{
margin-top: 5px;
padding-bottom: 5px;
}
a {
text-decoration: none;
color: rgb(131, 140, 145);
font-size: 19px;
vertical-align:middle;
/* line-height:3px; */
text-align:center;
}
form#add-list-form {
margin-top: 12px;
width: 270px;
}
.form-inner-container {
background-color: rgb(226,228,230);
padding: 5px 5px 0px 5px;
border-radius: 4px;
}
input[type=text] {
height: 32px;
display: block;
border-radius: 4px;
border: solid 1px rgb(91,164,207);
width: 247px;
font-size: 14px;
outline: none;
box-shadow: 0 0 0 1px rgb(91,164,207);
word-wrap: break-word;
overflow: hidden;
color: rgb(131, 140, 145);
padding-left: 10px;
}
input[type=submit] {
outline: none;
font-size: 14px;
font-weight: 700;
color: rgb(255, 255, 255);
padding: 8px 13px;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 0 0 rgb(63, 111, 33);
border: none;
border-radius: 4px;
margin: 10px 0;
}
input[type=submit]:hover {
background-color: rgb(71, 138, 53);
}
input[type=button]{
margin-right: -5px;
border: none;
background-color: transparent;
font-size: 18px;
font-weight: 500;
color: rgb(131, 140, 145);
}
input[type=button]:hover{
color: rgb(103,109,112);
}
form.add-item-form {
margin-top: 20px;
}
form.add-item-form textarea {
outline: none;
width: 92%;
height: 50px;
max-height: 120px;
padding: 10px;
font-size: 14px;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
display: block;
word-wrap: break-word;
resize: none;
margin-top: -5px;
}
.card {
width: 92%;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
background-color: rgb(255, 255, 255);
min-height: 18px;
word-wrap: break-word;
padding: 0px 10px;
margin-top: 9px;
display: flex;
flex-direction: row;
position: relative;
}
.card:hover {
background-color: rgba(248,249,249,0.7);
}
.card p{
position: relative;
padding: 0px;
margin: 6px 0;
font-size: 14px;
z-index: 1;
}
.card a{
position: absolute;
margin-left: 220px;
z-index: 2;
}
.fa-pen {
font-size: 10px;
margin: 0;
padding: 7px;
border-radius: 4px;
}
.fa-pen:hover {
background-color: rgb(226,228,230);
}
#add-list-form, .add-item-form {
display: none;
}
.link-wrapper {
display: inline-block;
margin-top: 20px;
}
a#show-list-form {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgba(1, 1, 1, 0.3);
padding: 10px 15px 10px 20px;
width: 242px;
text-align: left;
border-radius: 4px;
font-size: 14px;
height: 17px;
}
a#show-list-form:hover {
background-color: rgba(1, 1, 1, 0.4);
}
a#show-list-form span:first-child {
padding-right: 172px;
}
a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){
display: none; /* hides the 'Add another link' when window loads */
}
<div class="board-wrapper">
<div id="workBoard" class="work-board">
<div id="list-wrapper"></div>
<div class="link-wrapper">
<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a list</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another list</span>
</a>
</div>
<form id="add-list-form">
<div class="form-inner-container">
<input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off">
<input type="submit" value="Add List">
<!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> -->
<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X">
</div>
</form>
</div>
</div><!-- end of board-wrapper -->

It happens because you iterate with for loop over all add-item-form elements and add those styles. You add inline events listeners in addList() and you are not able to specify which of those elements were actually clicked, since you can't catch an event. I know how frustrating it may sound to you but I would recommend trying to write it all over again but keeping good practices. I advise you to use innerHTML as little you can, don't add inline styles to HTML in JS. Rather create classes that match your expectations like shown, hidden, style them and add them to events. Also use addEventListener instead of adding onclick() in HTML. You are really close to getting what you want, but its pretty messed up in this form.
Edit: The simplest workaround I can give you is this, but there is still much work to be done there:
// *************** ADD LISTS ***************
// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);
//Declaring index
var listIndex = 0
function addList(e) {
e.preventDefault();
const input = document.getElementById("list-name");
const name = input.value;
input.value = '';
if ('' == name) {
return;
}
const list = document.createElement('div');
list.setAttribute('class', 'list');
list.innerHTML =
`<div class="list-container">
<div class="list-heading" >
<h3 contenteditable="true">` + name + `</h3>
<div class= "ellipsis">…</div>
</div>
<div>
<div class="link-wrapper">
<a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form', ` + listIndex + `);">
<span class="placeholder"><i class="fas fa-plus"></i> Add a card</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another card</span>
</a>
</div>
<form class="add-item-form">
<textarea placeholder="Enter a title for this card..."></textarea>
<div>
<input type="submit" value="Add Card">
<input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<div class= "ellipsis">…</div>
</div>
</form>
</div>
</div>`;
//Increasing index
listIndex++
document.getElementById("list-wrapper").appendChild(list);
}
// add new item submit eventlistener
document.addEventListener('submit', function(e) {
if (e.target.matches('.add-item-form')) {
e.preventDefault();
const textarea = e.target.getElementsByTagName('textarea')[0];
const text = textarea.value;
textarea.value = '';
if ('' == text) {
return;
}
//create card
const cardItem = document.createElement('p');
const card = document.createElement('div');
card.setAttribute('class', 'card');
//create pen icon
const pen = document.createElement('a');
pen.innerHTML = '<i class="fas fa-pen"></i>';
cardItem.innerHTML = text;
card.appendChild(cardItem)
card.appendChild(pen);
e.target.parentElement.prepend(card);
}
});
let spans = document.getElementsByClassName("placeholder");
//toggle between 'add a list' and 'add another list' links
window.onload = function(){
spans[1].style.display='none';
document.forms[0].style.display='none';
};
let clicked = 0;
//toggle between links and 'add-list-form'
function toggleDiv(formId, linkId){
clicked++;
if(document.getElementById( formId ).style.display == 'block'){
document.getElementById( formId ).style.display = 'none';
document.getElementById( linkId ).style.display = 'block';
}else{
document.getElementById( linkId ).style.display = 'none';
document.getElementById( formId ).style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
document.getElementsByClassName('')
//toggle between links and 'add-list-form'
function hideSHowForm(form, link, id){
// var getForm = document.getElementsByClassName("listContainer");
// getForm[i].style.display = 'block';
if(document.getElementsByClassName(form)[id].style.display == 'block'){
document.getElementsByClassName(form)[id].style.display = 'none';
document.getElementById(link).style.display = 'block';
}else{
document.getElementById(link).style.display = 'none';
document.getElementsByClassName(form)[id].style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
// function showTitleAndCardSection(){
// var showCardSection = document.getElementsByClassName("listContainer");
// for (var i=0;i<showCardSection.length;i+=1){
// showCardSection [i].style.display = 'block';
// }
/*************** ADD LISTS ***************/
.work-board {
background-color: transparent;
border-radius: 5px;
display: flex;
flex-direction: row;
}
#list-wrapper {
margin: 8px 5px 10px 0px;
padding: 2px;
border-radius: 4px;
background: transparent;
border: none;
display: flex;
flex-direction: row;
}
.list {
background: transparent;
}
.list-container {
padding: 4px 8px;
border-radius: 4px;
width: 256px;
background-color: rgb(226,228,230);
border: none;
margin: 2px 5px;
}
.list-heading {
display: flex;
flex-direction: row;
padding-bottom: 3px;
margin-bottom: 5px;
}
.list .list-heading h3 {
margin: 2px 3px 0px 0px;
width: 82%;
border-radius: 4px;
outline:none;
font-size: 14px;
font-weight: 600;
padding: 5px;
}
.list .list-heading h3:focus{
border: solid 2px rgb(91,164,207);
background-color: rgb(255, 255, 255);
}
.ellipsis {
/* display: inline-block; */
width: 30px;
text-align: center;
border-radius: 4px;
margin: 0px 1px 0px 0px;
padding: 0px;
float: right;
}
.ellipsis:hover {
background-color: rgba(131, 140, 145, 0.2)
}
form.add-item-form .ellipsis{
margin-top: 5px;
padding-bottom: 5px;
}
a {
text-decoration: none;
color: rgb(131, 140, 145);
font-size: 19px;
vertical-align:middle;
/* line-height:3px; */
text-align:center;
}
form#add-list-form {
margin-top: 12px;
width: 270px;
}
.form-inner-container {
background-color: rgb(226,228,230);
padding: 5px 5px 0px 5px;
border-radius: 4px;
}
input[type=text] {
height: 32px;
display: block;
border-radius: 4px;
border: solid 1px rgb(91,164,207);
width: 247px;
font-size: 14px;
outline: none;
box-shadow: 0 0 0 1px rgb(91,164,207);
word-wrap: break-word;
overflow: hidden;
color: rgb(131, 140, 145);
padding-left: 10px;
}
input[type=submit] {
outline: none;
font-size: 14px;
font-weight: 700;
color: rgb(255, 255, 255);
padding: 8px 13px;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 0 0 rgb(63, 111, 33);
border: none;
border-radius: 4px;
margin: 10px 0;
}
input[type=submit]:hover {
background-color: rgb(71, 138, 53);
}
input[type=button]{
margin-right: -5px;
border: none;
background-color: transparent;
font-size: 18px;
font-weight: 500;
color: rgb(131, 140, 145);
}
input[type=button]:hover{
color: rgb(103,109,112);
}
form.add-item-form {
margin-top: 20px;
}
form.add-item-form textarea {
outline: none;
width: 92%;
height: 50px;
max-height: 120px;
padding: 10px;
font-size: 14px;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
display: block;
word-wrap: break-word;
resize: none;
margin-top: -5px;
}
.card {
width: 92%;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
background-color: rgb(255, 255, 255);
min-height: 18px;
word-wrap: break-word;
padding: 0px 10px;
margin-top: 9px;
display: flex;
flex-direction: row;
position: relative;
}
.card:hover {
background-color: rgba(248,249,249,0.7);
}
.card p{
position: relative;
padding: 0px;
margin: 6px 0;
font-size: 14px;
z-index: 1;
}
.card a{
position: absolute;
margin-left: 220px;
z-index: 2;
}
.fa-pen {
font-size: 10px;
margin: 0;
padding: 7px;
border-radius: 4px;
}
.fa-pen:hover {
background-color: rgb(226,228,230);
}
#add-list-form, .add-item-form {
display: none;
}
.link-wrapper {
display: inline-block;
margin-top: 20px;
}
a#show-list-form {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgba(1, 1, 1, 0.3);
padding: 10px 15px 10px 20px;
width: 242px;
text-align: left;
border-radius: 4px;
font-size: 14px;
height: 17px;
}
a#show-list-form:hover {
background-color: rgba(1, 1, 1, 0.4);
}
a#show-list-form span:first-child {
padding-right: 172px;
}
a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){
display: none; /* hides the 'Add another link' when window loads */
}
<div class="board-wrapper">
<div id="workBoard" class="work-board">
<div id="list-wrapper"></div>
<div class="link-wrapper">
<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a list</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another list</span>
</a>
</div>
<form id="add-list-form">
<div class="form-inner-container">
<input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off">
<input type="submit" value="Add List">
<!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> -->
<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X">
</div>
</form>
</div>
</div><!-- end of board-wrapper -->

Just add these two lines above your const list = document.createElement('div'); line inside your addList() function like this:
var listWrap = document.getElementById("list-wrapper");
listWrap.innerHTML = "";
What the above does is assign the list-wrapper div to a variable called listWrap and then reset the list-wrapper div to an empty div whenever someone tries to submit a new form. After emptying the list-wrapper div, the function then proceeds to add the new "add-item-form form" submitted to the empty list-wrapper div.
Run the Code Snippet below to see how the above two lines work:
// *************** ADD LISTS ***************
// add new list submit eventlistener
document.getElementById("add-list-form").addEventListener("submit", addList);
function addList(e) {
e.preventDefault();
const input = document.getElementById("list-name");
const name = input.value;
input.value = '';
if ('' == name) {
return;
}
var listWrap = document.getElementById("list-wrapper");
listWrap.innerHTML = "";
const list = document.createElement('div');
list.setAttribute('class', 'list');
list.innerHTML =
`<div class="list-container">
<div class="list-heading" >
<h3 contenteditable="true">` + name + `</h3>
<div class= "ellipsis">…</div>
</div>
<div>
<div class="link-wrapper">
<a href="#" id="show-card-form" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a card</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another card</span>
</a>
</div>
<form class="add-item-form">
<textarea placeholder="Enter a title for this card..."></textarea>
<div>
<input type="submit" value="Add Card">
<input type="button" value="X" onclick="hideSHowForm('add-item-form', 'show-card-form');">
<div class= "ellipsis">…</div>
</div>
</form>
</div>
</div>`;
document.getElementById("list-wrapper").appendChild(list);
}
// add new item submit eventlistener
document.addEventListener('submit', function(e) {
if (e.target.matches('.add-item-form')) {
e.preventDefault();
const textarea = e.target.getElementsByTagName('textarea')[0];
const text = textarea.value;
textarea.value = '';
if ('' == text) {
return;
}
//create card
const cardItem = document.createElement('p');
const card = document.createElement('div');
card.setAttribute('class', 'card');
//create pen icon
const pen = document.createElement('a');
pen.innerHTML = '<i class="fas fa-pen"></i>';
cardItem.innerHTML = text;
card.appendChild(cardItem)
card.appendChild(pen);
e.target.parentElement.prepend(card);
}
});
let spans = document.getElementsByClassName("placeholder");
//toggle between 'add a list' and 'add another list' links
window.onload = function(){
spans[1].style.display='none';
document.forms[0].style.display='none';
};
let clicked = 0;
//toggle between links and 'add-list-form'
function toggleDiv(formId, linkId){
clicked++;
if(document.getElementById( formId ).style.display == 'block'){
document.getElementById( formId ).style.display = 'none';
document.getElementById( linkId ).style.display = 'block';
}else{
document.getElementById( linkId ).style.display = 'none';
document.getElementById( formId ).style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
//toggle between links and 'add-list-form'
function hideSHowForm(form, link){
// var getForm = document.getElementsByClassName("listContainer");
for (var i=0;i<document.getElementsByClassName(form).length;i++){
// getForm[i].style.display = 'block';
if(document.getElementsByClassName(form )[i].style.display == 'block'){
document.getElementsByClassName(form)[i].style.display = 'none';
document.getElementById(link).style.display = 'block';
}else{
document.getElementById(link).style.display = 'none';
document.getElementsByClassName(form)[i].style.display = 'block'
}if(clicked > 0) {
spans[0].style.display='none';
spans[1].style.display='block';
}
}
}
// function showTitleAndCardSection(){
// var showCardSection = document.getElementsByClassName("listContainer");
// for (var i=0;i<showCardSection.length;i+=1){
// showCardSection [i].style.display = 'block';
// }
//}
/*************** ADD LISTS ***************/
.work-board {
background-color: transparent;
border-radius: 5px;
display: flex;
flex-direction: row;
}
#list-wrapper {
margin: 8px 5px 10px 0px;
padding: 2px;
border-radius: 4px;
background: transparent;
border: none;
display: flex;
flex-direction: row;
}
.list {
background: transparent;
}
.list-container {
padding: 4px 8px;
border-radius: 4px;
width: 256px;
background-color: rgb(226,228,230);
border: none;
margin: 2px 5px;
}
.list-heading {
display: flex;
flex-direction: row;
padding-bottom: 3px;
margin-bottom: 5px;
}
.list .list-heading h3 {
margin: 2px 3px 0px 0px;
width: 82%;
border-radius: 4px;
outline:none;
font-size: 14px;
font-weight: 600;
padding: 5px;
}
.list .list-heading h3:focus{
border: solid 2px rgb(91,164,207);
background-color: rgb(255, 255, 255);
}
.ellipsis {
/* display: inline-block; */
width: 30px;
text-align: center;
border-radius: 4px;
margin: 0px 1px 0px 0px;
padding: 0px;
float: right;
}
.ellipsis:hover {
background-color: rgba(131, 140, 145, 0.2)
}
form.add-item-form .ellipsis{
margin-top: 5px;
padding-bottom: 5px;
}
a {
text-decoration: none;
color: rgb(131, 140, 145);
font-size: 19px;
vertical-align:middle;
/* line-height:3px; */
text-align:center;
}
form#add-list-form {
margin-top: 12px;
width: 270px;
}
.form-inner-container {
background-color: rgb(226,228,230);
padding: 5px 5px 0px 5px;
border-radius: 4px;
}
input[type=text] {
height: 32px;
display: block;
border-radius: 4px;
border: solid 1px rgb(91,164,207);
width: 247px;
font-size: 14px;
outline: none;
box-shadow: 0 0 0 1px rgb(91,164,207);
word-wrap: break-word;
overflow: hidden;
color: rgb(131, 140, 145);
padding-left: 10px;
}
input[type=submit] {
outline: none;
font-size: 14px;
font-weight: 700;
color: rgb(255, 255, 255);
padding: 8px 13px;
background-color: rgb(90, 172, 68);
box-shadow: 0 1px 0 0 rgb(63, 111, 33);
border: none;
border-radius: 4px;
margin: 10px 0;
}
input[type=submit]:hover {
background-color: rgb(71, 138, 53);
}
input[type=button]{
margin-right: -5px;
border: none;
background-color: transparent;
font-size: 18px;
font-weight: 500;
color: rgb(131, 140, 145);
}
input[type=button]:hover{
color: rgb(103,109,112);
}
form.add-item-form {
margin-top: 20px;
}
form.add-item-form textarea {
outline: none;
width: 92%;
height: 50px;
max-height: 120px;
padding: 10px;
font-size: 14px;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
display: block;
word-wrap: break-word;
resize: none;
margin-top: -5px;
}
.card {
width: 92%;
box-shadow: 0px 1px 0px 0 rgba(1, 1, 1, 0.2);
border: none;
border-radius: 3px;
background-color: rgb(255, 255, 255);
min-height: 18px;
word-wrap: break-word;
padding: 0px 10px;
margin-top: 9px;
display: flex;
flex-direction: row;
position: relative;
}
.card:hover {
background-color: rgba(248,249,249,0.7);
}
.card p{
position: relative;
padding: 0px;
margin: 6px 0;
font-size: 14px;
z-index: 1;
}
.card a{
position: absolute;
margin-left: 220px;
z-index: 2;
}
.fa-pen {
font-size: 10px;
margin: 0;
padding: 7px;
border-radius: 4px;
}
.fa-pen:hover {
background-color: rgb(226,228,230);
}
#add-list-form, .add-item-form {
display: none;
}
.link-wrapper {
display: inline-block;
margin-top: 20px;
}
a#show-list-form {
text-decoration: none;
color: rgb(255, 255, 255);
background-color: rgba(1, 1, 1, 0.3);
padding: 10px 15px 10px 20px;
width: 242px;
text-align: left;
border-radius: 4px;
font-size: 14px;
height: 17px;
}
a#show-list-form:hover {
background-color: rgba(1, 1, 1, 0.4);
}
a#show-list-form span:first-child {
padding-right: 172px;
}
a#show-list-form span:nth-child(2), a#show-card-form span:nth-child(2){
display: none; /* hides the 'Add another link' when window loads */
}
<div class="board-wrapper">
<div id="workBoard" class="work-board">
<div id="list-wrapper"></div>
<div class="link-wrapper">
<a href="#" id="show-list-form" onclick="toggleDiv('add-list-form', 'show-list-form');">
<span class="placeholder"><i class="fas fa-plus"></i> Add a list</span>
<span class="placeholder"><i class="fas fa-plus"></i> Add another list</span>
</a>
</div>
<form id="add-list-form">
<div class="form-inner-container">
<input type="text" id="list-name" placeholder="Enter list title..." autocomplete="off">
<input type="submit" value="Add List">
<!-- <input type="button" onclick="toggleDiv('add-list-form', 'show-list-form');"><i class="fas fa-times"></i></input> -->
<input type="button" onclick="toggleDiv('add-list-form', 'show-list-form')" value="X">
</div>
</form>
</div>
</div><!-- end of board-wrapper -->

How do I increment data attributes(int) using jquery?

I want to add somethin y input in my ol, i do it,
when i write something in input filed and click add
i create li, then i want to add to li data attribute
which will increment, when will create new li in the picture there is a code[1]: https://i.stack.imgur.com/oAr6V.png
this is what i tried so far (data-id is not adding to newlt created li's):-
$(".add").click(function() {
var $val = $(".taskk");
var value = $val.val();
if(value === "") {
$(".error").text("Fill in the task");
} else {
$(".error").text("");
var newLi = $('<li>' + value + '</li>');
$('.toDo ol').append((newLi));
/*newLi.each(function() {
$(this).attr("data-id", i++);
console.log(i++);
$('.toDo ol').append((newLi));
});
$('.toDo ol').append((newLi)); */
}
})
body {
background-color: #34545E;
}
.wrapper {
max-width: 1200px;
width: 100%;
margin: auto;
}
.flexbox {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.box {
min-width: 280px;
min-height: 250px;
border: 2px solid transparent;
background-color: grey;
}
h1 {
text-align: center;
background-color: aliceblue;
padding: 5px;
}
form {
display: flex;
flex-direction: column;
margin-top: 40px;
}
input[type="text"] {
height: 80px;
}
input[type="button"], button {
padding: 10px;
width: 100px;
margin-top: 20px;
background-color: #000;
border: 1px solid transparent;
color: #fff;
font-weight: bold;
cursor: pointer;
}
ol {
list-style-position: inside;
}
ol li {
padding: 7px;
margin-top: 2px;
word-wrap: break-word;
}
.toDo ol li {
background-color: #ffffff;
}
.compl ol li {
background-color: #F35369;
}
.draft ol li {
background-color: #ffffff;
color: grey;
opacity: 0.8;
text-decoration: line-through;
}
.delete {
background-color: #000000;
}
.error {
padding-top: 20px;
color: red;
}
.add {
padding: 20px;
background-color: black;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flexbox">
<div class="box1">
<h1>To do list</h1>
<div class="box toDo">
<ol>
</ol>
</div>
</div>
<div class="box2">
<h1>Drafts</h1>
<div class="box draft">
<ol>
</ol>
</div>
<button type="submit">Delete</button>
</div>
<div class="box3">
<h1>Add a task</h1>
<div class="box">
<p class="error"></p>
<form action="" method="post">
<input type="text" name="name" placeholder="Description" class="taskk">
<input type="button" name="add" value="Add task" class="add">
</form>
</div>
</div>
</div>
</div>

You can do it like below:-
check pre-existing li length and add 1 to it and add it as data-id of newly created li
var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');// check pre-existing `li` length and add 1 to it and add it as data-id of newly created `li`
Working snippet:-
$(".add").click(function() {
var $val = $(".taskk");
var value = $val.val();
if(value === "") {
$(".error").text("Fill in the task");
} else {
$(".error").text("");
var newLi = $('<li data-id="'+($('li').length+1)+'">' + value + '</li>');
$('.toDo ol').append((newLi));
}
});
body {
background-color: #34545E;
}
.wrapper {
max-width: 1200px;
width: 100%;
margin: auto;
}
.flexbox {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.box {
min-width: 280px;
min-height: 250px;
border: 2px solid transparent;
background-color: grey;
}
h1 {
text-align: center;
background-color: aliceblue;
padding: 5px;
}
form {
display: flex;
flex-direction: column;
margin-top: 40px;
}
input[type="text"] {
height: 80px;
}
input[type="button"], button {
padding: 10px;
width: 100px;
margin-top: 20px;
background-color: #000;
border: 1px solid transparent;
color: #fff;
font-weight: bold;
cursor: pointer;
}
ol {
list-style-position: inside;
}
ol li {
padding: 7px;
margin-top: 2px;
word-wrap: break-word;
}
.toDo ol li {
background-color: #ffffff;
}
.compl ol li {
background-color: #F35369;
}
.draft ol li {
background-color: #ffffff;
color: grey;
opacity: 0.8;
text-decoration: line-through;
}
.delete {
background-color: #000000;
}
.error {
padding-top: 20px;
color: red;
}
.add {
padding: 20px;
background-color: black;
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="flexbox">
<div class="box1">
<h1>To do list</h1>
<div class="box toDo">
<ol>
</ol>
</div>
</div>
<div class="box2">
<h1>Drafts</h1>
<div class="box draft">
<ol>
</ol>
</div>
<button type="submit">Delete</button>
</div>
<div class="box3">
<h1>Add a task</h1>
<div class="box">
<p class="error"></p>
<form action="" method="post">
<input type="text" name="name" placeholder="Description" class="taskk">
<input type="button" name="add" value="Add task" class="add">
</form>
</div>
</div>
</div>
</div>

jQuery append adds more than one item

I'm trying to create a div automatically when clicking on a button, I have an issue here, for each time I click on the button its incremented the display of the div. Could you please help with this
$(document).ready(function() {
$("#btn2").click(function() {
$("div").append("<div>Appended item</div>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div></div>
<button id="btn2">cliquer</button>
I followed your suggestion and test it in my own code but I still have the same issue
please find below my code
JavaScript
function DisplayOffer(){
$("button").click(function() {
var id_button =this.id;
console.log("id_button:"+ id_button);
var value_button =$('#'+ id_button).text();
console.log("value_button:"+ value_button);
$('#row').append('<p id=aaa>'+ value_button + '</p>');
});
}
In my JS I have 4 buttons, when I click on a button it should create two new div for each one i'll display a name of the button and a description for the first step I just wanted to display the buttons's name but it is displayed wrong ( not one time only like I told you in the beginning of my question )
function bot() {
var input = document.getElementById("input").value;
output.innerHTML = '<div id="a2" class="msj macro"><div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div></div><div class="title1">Bonjour ' + input + ' ,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button> <button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button> <button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button> <button type="button" id="m" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Monthly</button></div>';
HTML :
<div class="container" id="id_div_hide">
<div id="row" class="chattt col-sm-3 col-sm-offset-4 frame a">
<div id="test_id"></div>
<div id="output" class="ma"> </div>
<div id="outputh2" class="output2"></div>
<div id="outputh3" class="output3"></div>
</div>
<div id="az1" class="text text-r az1_class" style="background:whitesmoke !important">
<input id="input" class="mytext" placeholder="Type a message" />
</div>
</div>
Full JS :
var me = {};
me.avatar = "https://lh6.googleusercontent.com/-lr2nyjhhjXw/AAAAAAAAAAI/AAAAAAAARmE/MdtfUmC0M4s/photo.jpg?sz=48";
$('#outputh2').hide();
$('#outputh3').hide();
var timedQuestion=0;
var questionNum = 0;
var question = '<div class="text-chat1">Bonjour cher client, moi c est Djezzy bot, tu t appelles comment?</h1></div>';
var output = document.getElementById('output');
output.innerHTML = question;
function bot() {
var input = document.getElementById("input").value;
output.innerHTML = '<div id="a2" class="msj macro"><div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div></div><div class="title1">Bonjour ' + input + ' ,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button> <button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button> <button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button> <button type="button" id="m" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Monthly</button><div id="zmar"></div></div>';
setTimeout(timedQuestion, 2000);
console.log("num question est :"+ questionNum);
}
function DisplayOffer(){
var date = formatAMPM(new Date());
$("button").click(function() {
var id_button =this.id;
console.log("id_button:"+ id_button);
var value_button =$('#'+ id_button).text();
console.log("value_button:"+ value_button);
//$('#row').append( value_button);
$('#row').append('<span class=aaa>'+value_button+ '</span>');
});
}
// to get the time
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
// to hide and display the chat
function toggle_div(img, id) {
var div = document.getElementById(id);
if(div.style.display=="none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
$(document).keypress(function(e) {
if (e.which == 13) {
bot();
questionNum++;
}
});
CSS :
.chat{
background-color:#fff4f6;
overflow-y:scroll;
width: 280px;
height: 370px;
position: fixed;
//float:right;
bottom: 0px;
right: 0px;
}
.title1{
font-size: 12px;
color: #183f88;
}
.btn_hdwm1{
padding-left: 20px;
padding-right: 15px;
border-radius: 8px;
padding-bottom: 5px;
background: #e11e26;
color: #fff;
}
.btn_hdwm{
padding: 7px 12px
display: inline-block;
margin: 5px;
background: #fff;
//color: #06c5a6;
color:#c52206;
cursor: pointer;
border-radius: 20px;
font-size: 0.9rem;
//border: 1px solid rgba(6,153,184,0.3);
border: 1px solid rgba(184, 6, 6, 0.3);
}
.mytext{
border:0;padding:10px;background:whitesmoke;
position: fixed;
/*margin: 10px;*/
height: 4%;
width: 15%;
/*margin: 67px 0px 0px -57px;*/
margin: 5px 0px 0px -11px;
}
.text{
width:75%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
float:left;padding-right:10px;
}
.text-r{
float:right;padding-left:10px;
}
.avatar{
display:flex;
justify-content:center;
align-items:center;
width:25%;
float:left;
padding-right:10px;
}
.macro{
margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
float:right;background:whitesmoke;
}
.msj{
float:left;background:white;
}
.frame{
background:#e0e0de;
height:372px;
overflow:hidden;
padding:0;
}
.frame > div:last-of-type{
position:absolute;bottom:5px;width:100%;display:flex;
}
ul {
width:100%;
list-style-type: none;
padding:18px;
position:absolute;
bottom:32px;
display:flex;
flex-direction: column;
}
.msj:before{
width: 0;
height: 0;
content:"";
top:-5px;
left:-14px;
position:relative;
border-style: solid;
border-width: 0 13px 13px 0;
border-color: transparent #ffffff transparent transparent;
}
.msj-rta:after{
width: 0;
height: 0;
content:"";
top:-5px;
left:14px;
position:relative;
border-style: solid;
border-width: 13px 13px 0 0;
border-color: whitesmoke transparent transparent transparent;
}
input:focus{
outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
color: #d4d4d4;
}
.a{
/*margin-top: 199px;*/
float: right;
}
.boutonHourely{
padding: 7px 12px
display: inline-block;
margin: 5px;
background: #fff;
color: #06c5a6;
cursor: pointer;
border-radius: 20px;
font-size: 0.9rem;
border: 1px solid rgba(6,153,184,0.3);
}
.text_chat1{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
}
#output{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 65%;
background-color: #fff;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: 5px;
padding-left: 12px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
}
.bt{
width: 30px;
}
.output:before {
width: 0;
height: 0;
content: "";
top: -5px;
left: -14px;
position: relative;
border-style: solid;
border-width: 0 13px 13px 0;
border-color: transparent #ffffff transparent transparent;
}
.logo-bule{
width: 50px;
height:50px;
border-radius: 40px;
/*float: right;*/
position: fixed;
right: 6%;
bottom: 0px;
}
.logo-bule:after{
/* position:relative;
float:right;
bottom:0px;*/
}
.chattt{
margin-top: 6.3%;
overflow-y: scroll;
}
.output2,.output4,.output5, .output7, .output9, .aaa{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 21%;
background-color: #b2d0e5;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: -3px;
padding-left: 12px;
padding-top: 5px;
/* margin-left: auto; */
/* margin-right: auto; */
margin-top: 2%;
float: right;
padding-bottom: 5px;
}
.output3{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 65%;
background-color: #fff;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: 5px;
padding-left: 12px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 20%;
font-size: 12px;
color: #183f88;
}
.output5{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 21%;
background-color: #b2d0e5;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: -3px;
padding-left: 12px;
padding-top: 5px;
/* margin-left: auto; */
/* margin-right: auto; */
margin-top: 2%;
float: right;
padding-bottom: 5px;
}
.output6, .output8, .output10{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
font-size: 11px;
width: 65%;
background-color: #fff;
margin-left: 9px;
border-radius: 20px;
font-size: 12px;
padding: 0px -8px 4px 0px;
margin: 12px;
padding-right: 5px;
padding-left: 12px;
padding-top: 5px;
margin-left: auto;
margin-right: auto;
margin-top: 20%;
font-size: 12px;
color: #183f88;
}
Thank you

The problem with this approach is, the inserted element is also <div>. Give a unique way of identification for the master <div>.
$("#btn2").click(function(){
$("body > div").append("<div>Appended item</div>");
});
For this current example, I have used body > div selector, as the <div> is directly under <body>. The better way is to use a class for the <div> and use this way:
<div class="master"></div>
$("#btn2").click(function(){
$(".master").append("<div>Appended item</div>");
});
Full Code
$(document).ready(function() {
$("#btn2").click(function() {
$("body > div").append("<div>Appended item</div>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div></div>
<button id="btn2">cliquer</button>

adding and deleting input fiel dynamically

I have a form in which I have add and minus buttons. On click event it should add a new input field and delete the selected input field correspondingly. Add button functions well in my case but deleting selected input field is not working.
I hope I explained my question properly if not let me know.
Thanks in advance.
.multivaluebox {
border: 1px solid #ccc;
background-color: white;
padding: 10px;
width: 60%;
}
.form-multivaluebox-textbox {
border: 1px solid #ccc;
border-radius: 0;
width: 100%;
}
.btncontainer {
width: 6%;
padding-left: 1%;
margin: 0;
}
.subbutton {
margin-top: 2px;
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
}
.addbutton {
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multivaluebox ">
<input asp-for="#Model" class=" form-multivaluebox-textbox" value="hello" />
</div>
<div class="btncontainer col-sm-1">
<input type="button" class="addbutton " onclick="addtextbox(); " value="+" />
<br />
<input type="button" class=" subbutton" onclick="deletetextbox();" value="-" />
<script>
function addtextbox() {
var newdiv = document.createElement('div');
$(newdiv).addClass('multivaluebox');
newdiv.innerHTML = ' <input asp-for="#Model" class=" form-multivaluebox-textbox" value="#(Model?.Count >= 3 ? Model[2] : null)" id="Labels" />';
document.getElementById('wrapper').appendChild(newdiv);
 
}
function deletetextbox() {
var inputlist = document.getElementsByClassName('form-multivaluebox-textbox');
for (i = 0; i < inputlist.length; i++) {
if (document.getElementsByClassName('form-multivaluebox-textbox').isActive) {
$(this).remove();
}
}
 
}

I've put this together but it's not perfect.
It will allow you to add items to the wrapper and remove a selected item. However I'd suggest having a remove button at the end of each textbox to be more precise and user friendly.
var currentSelection;
function makeCurrentSelection(element){
currentSelection = element;
}
function addtextbox() {
var newdiv = document.createElement('div');
$(newdiv).addClass('multivaluebox');
newdiv.innerHTML = ' <input asp-for="#Model" class=" form-multivaluebox-textbox" value="#(Model?.Count >= 3 ? Model[2] : null)" id="Labels" onfocus="makeCurrentSelection(this)"/>';
document.getElementById('wrapper').appendChild(newdiv);
}
function deletetextbox() {
currentSelection.remove();
}
.multivaluebox {
border: 1px solid #ccc;
background-color: white;
padding: 10px;
width: 60%;
}
.form-multivaluebox-textbox {
border: 1px solid #ccc;
border-radius: 0;
width: 100%;
}
.btncontainer {
width: 6%;
padding-left: 1%;
margin: 0;
}
.subbutton {
margin-top: 2px;
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
}
.addbutton {
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="multivaluebox ">
<input asp-for="#Model" class=" form-multivaluebox-textbox" value="hello" onfocus="makeCurrentSelection(this)">
</div>
<div class="btncontainer col-sm-1">
<input type="button" class="addbutton " onclick="addtextbox(); " value="+">
<br>
<input type="button" class=" subbutton" onclick="deletetextbox();" value="-">
</div>

Not perfect but this will give you some idea regarding how to add/delete elements in JavaScript.
Add elements in wrapper div
Removes element from wrapper div
Please expand the snippet while executing.
Hope this helps !
function addtextbox() {
var newdiv = document.createElement('div');
$(newdiv).addClass('multivaluebox');
newdiv.innerHTML = ' <input asp-for="#Model" class=" form-multivaluebox-textbox" value="#(Model?.Count >= 3 ? Model[2] : null)" id="Labels" />';
document.getElementById('wrapper').appendChild(newdiv);
 
}
function deletetextbox() {
var inputlist = document.getElementsByClassName('form-multivaluebox-textbox');// document.getElementsByClassName()
for (i = 0; i < inputlist.length; i++) {
var elem = inputlist[0];
return elem.parentNode.removeChild(elem);
}
 
}
.multivaluebox {
border: 1px solid #ccc;
background-color: white;
padding: 10px;
width: 60%;
}
.form-multivaluebox-textbox {
border: 1px solid #ccc;
border-radius: 0;
width: 100%;
}
.btncontainer {
width: 6%;
padding-left: 1%;
margin: 0;
}
.subbutton {
margin-top: 2px;
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
}
.addbutton {
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="multivaluebox ">
<input asp-for="#Model" class="form-multivaluebox-textbox" value="hello" />
</div>
<div class="btncontainer col-sm-1">
<input type="button" class="addbutton " onclick="addtextbox(); " value="+" />
<br />
<input type="button" class=" subbutton" onclick="deletetextbox();" value="-" />
<div ></div>

Text editing with jquery

I am creating a simple product list. I want to implement the editing of a product.
When I double-click on the product, I will be able to edit it. But i dont understand how i can do this. I hope, that you understand me because english is not my primary language. My code is here:
<div class="container">
<h1>Product List</h1>
<input type="text" name="newProduct" id="newProduct" placeholder="Enter your product here"/>
<ul id="productList"></ul>
<input type="checkbox" id="selectAll"/><label for="Select all">Select all</label>
<button id="deleteDoneProducts">Delete Selected</button>
</div>
CSS
* {
box-sizing:border-box;
}
body {
font-family: Tahoma, sans-serif;
}
.container {
margin:0 auto;
width:600px;
}
h1, #newProduct {
text-align: center;
width:598px;
}
#newProduct {
border:1px solid #999;
padding: 20px;
font-size: 28px;
box-shadow: 0px 0px 3px #888;
}
#productList {
list-style: none;
padding-left:0;
background-color: #F2F2F2;
}
.product {
padding: 15px 0px 15px 40px;
margin: 10px;
position: relative;
font-size: 24px;
box-shadow: 2px 2px 3px #848484;
background-color: #fff;
cursor: pointer;
text-transform: capitalize;
color:#000;
overflow: hidden;
}
.product:hover {
background-color: #F2F2F2;
}
.doneProduct {
margin-right: 40px;
}
.remove {
background-image: url(ico/delete_ico.png);
background-position: 0 0;
width:30px;
height: 30px;
position: absolute;
right: 20px;
top:13px;
display: none;
}
.remove:hover {
background-position: -34px 0px;
}
.product:hover .remove {
display: block;
}
#deleteDoneProducts {
float: right;
background-color: #a3d5df;
color: #fff;
padding: 10px;
border: none;
text-transform: uppercase;
font-weight: 900;
}
#deleteDoneProducts:hover {
background-color: #5fb5c7;
cursor: pointer;
}
jquery
function addNewProduct(e) {
if(e.keyCode == 13) {
var toAdd = $('input[name=newProduct]').val();
$('#productList').append('<li class="product"> <input type="checkbox" class="doneProduct"/>'+toAdd+'<div class="remove"></div><li/>');
$('#newProduct').val('');
e.preventDefault();
}
};
function deleteProduct() {
$(this).parent().remove();
};
function productDone() {
if (!$(this).is(":checked")){
$(this).parent().css({'textDecoration': 'none', 'color': '#000'})
} else {
$(this).parent().css({'textDecoration': 'line-through', 'color': '#999'});
};
};
function deleteAllSelected() {
$(".doneProduct:checked").parent().remove();
$('input[type="checkbox"]').removeAttr("checked");
};
function selectAllProducts() {
if (!$(".doneProduct").is(":checked")) {
$(".doneProduct").prop('checked', this.checked);
$(".doneProduct").parent().css({'textDecoration': 'line-through', 'color': '#999'});
} else {
$(".doneProduct").parent().css({'textDecoration': 'none', 'color': '#000'});
$(".doneProduct").prop('checked', this.checked);
}
};
$(function() {
$("#newProduct").on('keypress', addNewProduct);
$(document).on('click', ".remove", deleteProduct);
$(document).on('change', ".doneProduct", productDone);
$("#deleteDoneProducts").on('click', deleteAllSelected);
$("#selectAll").on('click', selectAllProducts);
$(".product").on('dbclick', editProductName);
})
https://jsfiddle.net/qp3nnfc5/5/ - this is fiddle)

Try this fiddle:
Change your addnewPRoduct function to:
function addNewProduct(e) {
if(e.keyCode == 13) {
var toAdd = $('input[name=newProduct]').val();
$('#productList').append('<li class="product"> <input type="checkbox" class="doneProduct"/><span>'+toAdd+'</span><div class="remove"></div><li/>');
$('#newProduct').val('');
e.preventDefault();
};
};
and Add this to your JS:
$("#productList").on("dblclick","li",function(){
$(this).find('span').attr("contentEditable",true)
})
Update :
Updated fiddle
Add this to JS
$("#productList").on("keypress","li",function(e){
if(e.which == 13){
e.preventDefault()
$(this).find('span').attr("contenteditable",false)
return;
}
})

Categories