I'm trying to add bullets to multiple textarea. This works fine when the textareas are not hidden, however I'd like to be able to add bullets to newly created textareas (click on the button "Add New". Ideally I'd like also newly created bullets to go to the next line rather than to be displayed side by side.
$(document).ready()
$('.add-bullet').click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022';
});
return false;
});
(function($) {
"use strict";
var itemTemplate = $('.workExperience-template').detach(),
editArea = $('.workExperience-area'),
itemNumber = 1;
$(document).on('click', '.workExperience-area .add', function(event) {
var item = itemTemplate.clone();
item.find('[name]').attr('name', function() {
return $(this).attr('name') + '_' + itemNumber;
});
++itemNumber;
item.prependTo(editArea);
});
$(document).on('click', '.workExperience-area .rem', function(event) {
editArea.children('.workExperience-template').last().remove();
});
$(document).on('click', '.workExperience-area .del', function(event) {
var target = $(event.target),
row = target.closest('.workExperience-template');
row.remove();
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textarea">
<div>Add bullet</div>
<textarea id="todolist" class="todolist" name="todolist" placeholder="Write something.." ></textarea>
</div>
<div class="hidden">
<div class="workExperience-template">
<div class="textarea">
<div>Add bullet</div>
<textarea id="list" class="list" name="tata" placeholder="Write something.." ></textarea>
</div>
</div>
</div>
<div class="workExperience-area">
<button type="button" class="add buttonBlueAddField">Add New</button>
</div>
You should attach click event on newly created anchors:
$(document).ready()
$('.add-bullet').click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022';
});
return false;
});
(function($) {
"use strict";
var itemTemplate = $('.workExperience-template').detach(),
editArea = $('.workExperience-area'),
itemNumber = 1;
$(document).on('click', '.workExperience-area .add', function(event) {
var item = itemTemplate.clone();
item.find('[name]').attr('name', function() {
return $(this).attr('name') + '_' + itemNumber;
});
++itemNumber;
item.find(".add-bullet").click(function() {
$(this).parent().next('textarea').val(function(idx, value){
return value + '\u2022\n';
});
return false;
});
$(".textarea").next().append(item);
});
$(document).on('click', '.workExperience-area .rem', function(event) {
editArea.children('.workExperience-template').last().remove();
});
$(document).on('click', '.workExperience-area .del', function(event) {
var target = $(event.target),
row = target.closest('.workExperience-template');
row.remove();
});
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textarea">
<div>Add bullet</div>
<textarea id="todolist" class="todolist" name="todolist" placeholder="Write something.." ></textarea>
</div>
<div class="hidden">
<div class="workExperience-template">
<div class="textarea">
<div>Add bullet</div>
<textarea id="list" class="list" name="tata" placeholder="Write something.." ></textarea>
</div>
</div>
</div>
<div class="workExperience-area">
<button type="button" class="add buttonBlueAddField">Add New</button>
</div>
Related
I'm looking to clone addDriverContent (working fine) and increment the numbers for the name attribute on name="description" to name="description2", name="description3" on the clones
Also if anyone know how to also clone the add button so it works as it should on the clones would be extra points :) Some fiddles would be awesome :)
<div id="addDriverContent" style="display:none;">
<div class="content">
<div class="row">
<div class="col-md-12">
<label for="description" class="form-label font-weight-bold">Item Description:</label>
<input type="text" class="form-control" id="description" name="description" placeholder="Enter the items description"/>
</div>
</div>
</div>
</div>
<button type="button" class="add_field_button" id="clone_button">Add another item</button>
<div id="clone_wrapper"></div>
<script type="text/javascript">
$(function($) {
var max_fields = 4;
// origin selector would select all the first div ancestors.
var $content = $("#addDriverContent > .content");
var $clone_wrapper = $("#clone_wrapper") ;
var $add_button = $(".add_field_button"); //Add button ID
$add_button.click(function(e) {
e.preventDefault();
var counter = 0;
// jquery object is array liked object. Length mean how many elements is selected.
if ( $clone_wrapper.children(".content").length < max_fields )
$content.clone().appendTo($clone_wrapper);
});
$clone_wrapper.on("click",".remove_field", function(e){
e.preventDefault();
// this would be more specific.
$(this).parent(".content").remove();
})
});
</script>
As I have no idea what you intend to do with it, I will provide you with my dirty solution for it:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="addDriverContent" style="display:none;">
<div class="content">
<div class="row">
<div class="col-md-12">
<label for="description" class="form-label font-weight-bold">Item Description:</label>
<input type="text" class="description form-control" id="description" name="description" placeholder="Enter the items description"/>
<input type="text" class="fname form-control" id="fname" name="fname"/>
Remove<button type="button" class="add_field_button" id="clone_button">Add another item</button>
</div>
</div>
</div>
</div>
<button type="button" class="add_field_button" id="clone_button">Add another item</button>
<div id="clone_wrapper"></div>
<script type="text/javascript">
$(function($) {
var max_fields = 4;
// origin selector would select all the first div ancestors.
var $content = $("#addDriverContent > .content");
var $clone_wrapper = $("#clone_wrapper") ;
var $add_button = $(".add_field_button"); //Add button ID
$(".add_field_button").click(function() {
//e.preventDefault();
//var counter = 0;
// jquery object is array liked object. Length mean how many elements is selected.
if ( $clone_wrapper.children(".content").length < max_fields ) {
$content.clone().appendTo($clone_wrapper);
//$add_button.clone().appendTo($clone_wrapper);// mine
$(".description").each(function(index) {
$( this ).attr('name', 'description'+index)
});
$(".fname").each(function(index) {
$( this ).attr('name', 'fname'+index)
});
}
});
$(document).on('click', "#clone_wrapper .add_field_button", function () {
$('#addDriverContent + .add_field_button').trigger('click');
})
$(document).on('click', ".remove_field", function () {
//e.preventDefault();
// this would be more specific.
$(this).closest(".content").remove();
});
});
</script>
How do I make my to do list able edit input through the edit button using jquery? It is a to do list and i want users to be able to edit the input
Thanks in advance
<header data-role="header">
<h1>To Do List</h1>
Home
</header>
<div role="main" class="todo- container">
<div class="input">
<input type="text" class="note" placeholder="Input new note..">
<button id="addButton">Add</button>
</div>
<ul class="todo-list">
<li>
<div class="button-center">
</div>
</li>
</ul>
<script>
$(document).ready(function() {
$('#addButton').click(function() {
var task = $(".note").val();
$(".todo-list").append(`<li> <span>Task: ${task}</span><div class="button-center"><button class="deleteButton">Delete</button><button class="editButtton">Edit</button> </div></li>`);
$(".note").val("");
});
$(document).on('click', '.deleteButton', function() {
$(this).parent().parent().remove();
});
});
$('#editButton').click(function() {});
</script>
I have done something like this : example
user will be able to edit by double click at the text and an input field will showed up. user can click the edit button once he/she finished edit and the text will be updated.
JS
$('#addButton').click(function() {
var task = $(".note").val();
$(".todo-list").append(`<li>Task: <span class='task'>${task}</span><div
class="button-center"><button class="deleteButton">Delete</button><button
class="editButton">Edit</button> </div></li>`);
$(".note").val("");
});
$(document).on('click', '.deleteButton', function() {
$(this).parent().parent().remove();
});
$(document).on('dblclick', '.task', function() {
var task = $(this).text();
$(this).text('');
$(this).append(`<input type="text" value="${task}" />`);
});
$(document).on('click', '.editButton', function() {
var task = $(this).parents().siblings('span').children('input').val();
$(this).parents().siblings('span').remove('input');
$(this).parents().siblings('span').text(task);
});
I've modify your code and added the edit functionality. It's supposed to work as you will expect so I will not say much. Kindly try this
$(document).ready(function() {
var $note = $('.note');
var $taskId = $('.task-id');
$('#addButton').click(function() {
var task = $note.val().trim();
var id = $taskId.val();
if( task.trim() === '' ){
// do nothing
}else if( id !== '' ){ // edit
$(".todo-list").find('[data-id="'+id+'"] .task').text(task);
}else{ // add todo
id = new Date().getTime(); // you can make it more unique
$(".todo-list").append(`
<li data-id="${id}">
<span class="task">${task}</span>
<div class="button-center">
<button class="deleteButton">Delete</button>
<button class="editButton">Edit</button>
</div>
</li>
`);
}
$note.val('').focus();
$taskId.val('');
$(this).text('Add');
});
// delete and edit action
$(document).on('click', '.deleteButton', function() {
$(this).closest('li').remove();
}).on('click', '.editButton', function(){
let $li = $(this).closest('li');
$note.val( $li.find('.task').text() );
$taskId.val( $li.data('id') );
$('#addButton').text('Update');
});
// cancel update if .note text is cleared
$('.note').on('input', function(){
if( $(this).val() === '' ){
$taskId.val('').focus();
$('#addButton').text('Add');
}
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input">
<input type="text" class="note" placeholder="Input new note..">
<input type="hidden" class="task-id">
<button id="addButton">Add</button>
</div>
<ul class="todo-list"></ul>
Entering the data in the input field and on clicking the 'Add New' button, element should be added in the list. Here, help me to find out the error
$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
dataAdd.push($(this).data('#nameList'));
console.log(data.length);
});
});
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>
Seems like you need smth like:
$(document).ready(function () {
$("#addNew").click(function(){
$("#nameList").append("<li>" + $("#data").val() + "</li>");
});
});
This works:
var dataAdd = [];
$("#addNew").click(function() {
$('#nameList').append('<li>'+$('#data').val()+'</li>');
});
I don't understand what are you doing here...
dataAdd.push($(this).data('#nameList'));
You can access DOM elements with jQuery just referencing css-selector in brackets, like this $('css-selector')
That snippet does the trick:
$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
var value = $('#data').val();
if(value) {
dataAdd.push(value);
$('#nameList').append('<li>' + value + '</li>');
$('#data').val('');
}
console.log(dataAdd.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>
You have to append the li with the value of input type text not the button.
$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
dataAdd.push($('#data').val());
$('#nameList').append('<li>'+$('#data').val()+'</li>');
console.log(dataAdd.length);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>
$(document).ready(function() {
var dataAdd = [];
$("#addNew").click(function() {
var htm='<li>'+$('#data').val()+'</li>';
$("#nameList").append(htm);
$('#data').val('');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ol id="nameList">
<li>aston</li>
<li>baily</li>
<li>clairne</li>
</ol>
<input type="text" id="data" placeholder="Enter data">
<button id="addNew">Add New</button>
This has been driving me nuts for a few days and i've tried multiple different ways of tackling it. But for some reason it won't remove the element. Can anyone shine some light?
My goal is to on click add the inputed markup then on click of 'remove' remove the whole element.
HTML Mark Up
<div id="p_test">
<p>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</p>
</div>
<button class="btn--add" id="addtest">
Add
</button>
Jquery
$(function() {
var test = $('#p_test');
var i = $('#p_test p').length + 1;
$('#addtest').on('click', function() {
$('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><p>').appendTo(test);
i++;
});
$('body').on('click', '.remtest' function(e) {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
});
});
I've tried different methods, each method failing.
$(this).closest("p").remove();
and
$('.remtest').on('click', function() {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
});
$(function() {
var test = $('#p_test');
var i = $('#p_test p').length + 1;
$('#addtest').on('click', function() {
$('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><p>').appendTo(test);
i++;
});
// $(this).closest("p").remove();
// $('.remtest').on('click', function() {
// if (i > 2) {
// $(this).parents('p').remove();
// i--;
// }
// });
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).parents('p').remove();
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
<p>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</p>
</div>
<button class="btn--add" id="addtest">
Add
</button>
Don't dont <p> as a "container" for your code. I switched out your <p> with <div class="container"> and now your code works.
demo
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).closest('.container').remove();
i--;
}
});
Use $(this).closest('.container').remove(); and not $(this).parent('.container').remove(); to get the outer "container".
$(function() {
var test = $('#p_test');
var i = $('#p_test .container').length + 1;
$('#addtest').on('click', function() {
$('<div class="container"><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i + '" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div><div>').appendTo(test);
i++;
});
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).closest('.container').remove();
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
<div class="container">
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</div>
</div>
<button class="btn--add" id="addtest">
Add
</button>
Here you go.. you were trying to remove the wrong element
$(function() {
var test = $('#p_test');
var i = $('#p_test p').length + 1;
$('#addtest').on('click', function() {
$('<p><div class="input-file-container"><label for="p_test" class="input-file-trigger">Select a file...<input type="text" id="p_test" name="p_test_' + i +'" value=""class="input-file"></label><p class="file-return"></p><span class="remtest">Remove</span></div></p>').appendTo(test);
i++;
});
// $(this).closest("p").remove();
// $('.remtest').on('click', function() {
// if (i > 2) {
// $(this).parents('p').remove();
// i--;
// }
// });
$('body').on('click', '.remtest', function(e) {
if (i > 2) {
$(this).closest('.input-file-container').remove();
i--;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="p_test">
<p>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<p class="file-return"></p>
</p>
</div>
<button class="btn--add" id="addtest">
Add
</button>
At first, just do not use jquery.
The second thing is that plain javascript is not hard and easy to use.
Therefore you can find how to do the things you want with javascript on the internet.
function GetId(id) {
return document.getElementById(id);
}
const button = GetId("addtest");
button.addEventListener("click", Add);
var id = 0;
function Add() {
files.innerHTML = files.innerHTML +
`<div id="`+ id +`">
<br>
<div class="input-file-container">
<label for="p_test" class="input-file-trigger">
Select a file...
<input type="text" id="p_test" name="p_test_" value=""class="input-file">
</label>
<p class="file-return">
</p>
<button class="remtest" onclick="Remove('`+ id +`')">
Remove
</button>
</div>
<br>
</div>`;
id++;
}
function Remove(id) {
const files = GetId("files")
files.removeChild(GetId(id));
}
<div id="p_test">
<div>
<div class="input-file-container">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="input-file-trigger">Select a file...</label>
</div>
<div class="file-return" id="files"></div>
</div>
</div>
<button class="btn--add" id="addtest">Add</button>
There are multiple Textbox and Textarea in my code.
I have kept kid class common in all textboxes.
What i expect is when user enter any value, the VERY NEXT TEXTAREA should get disabled. Following is structure
<div>
<div>
<input type="text" class="kid" value="" name="kid" id="kid" />
</div>
<div>
<div></div>
<div>
<textarea cols="30" rows="2" name="comment" id="comment"> </textarea>
</div>
</div>
</div>
JQuery Code which is not working is:
var a = {
init: function () {
$(".kid").on("change keyup paste", function () {
if ($(this).val() != "") {
$(this).next().attr("disabled", true);
} else {
$(this).next().attr("disabled", false);
}
});
}
};
$(document).ready(a.init());
Fiddle: https://jsfiddle.net/0f6vp938/
var a = {
init: function () {
$(".kid").on("change keyup input", function () {
if ($(this).val() != "") {
$(this).parent().next().find('textarea').prop("disabled", true);
} else {
$(this).parent().next().find('textarea').prop("disabled", false);
}
});
}
};
$(document).ready(a.init());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<div>
<input type="text" class="kid" value="" name="kid" id="kid" />
</div>
<div>
<div></div>
<div>
<textarea cols="30" rows="2" name="comment" id="comment"></textarea>
</div>
</div>
</div>
Use prop() instead of attr():
var a = {
init: function () {
$(".kid").on("change keyup paste", function () {
if ($(this).val() != "") {
$("#comment").prop("disabled", true);
} else {
$("#comment").prop("disabled", false);
}
});
}
};
$(document).ready(a.init());
Fiddle: https://jsfiddle.net/0f6vp938/5/
Something like this perhaps?
var a = {
init: function () {
$(".kid").on("change keyup paste", function () {
var $inp = $(this);
var v = $inp.val().trim();
if (v != "") {
$inp.parent('div').parent('div').find('textarea').prop('disabled', 'disabled');
} else {
$inp.parent('div').parent('div').find('textarea').prop('disabled', false);
}
});
}
};
$(document).ready(a.init());
In the fiddle you have provided, the TEXTAREA is not really next to the INPUT tag.
Keep them together and you are through.
<div>
<div>
<input type="text" class="kid" value="" name="kid" id="kid" />
<textarea cols="30" rows="2" name="comment" id="comment"></textarea>
</div>
</div>
Here is the updated fiddle.
If you do not want to keep them together like this, then you should use the ID or CLASS of the TEXTAREA you want to disable
HTML:
<div>
<div>
<input type="text" class="kid" value="" name="kid" id="kid" />
</div>
<div>
<div></div>
<div>
<textarea cols="30" rows="2" name="comment" id="comment"></textarea>
</div>
</div>
</div>
jQuery:
var a = {
init: function () {
$(".kid").on("change keyup paste", function () {
if ($(this).val() != "") {
$('#comment').attr("disabled", true);
} else {
$('#comment').attr("disabled", false);
}
});
}
};
$(document).ready(a.init());
as shown in this fiddle.