I created a simple multi-text input with jQuery, appending text fields working fine. But, struggling to remove them. I googled, checked past questions but, don't know how to match them to my code.
Here is my code
$(document).ready(function () {
var i = 1;
(function () {
$('.dd').on('click', '.addRow', function () {
i = i+1;
var start = $('#fields'),
newRow = $('<input type="text" name="i" class="quantity" /><p class="xx">X</p><br><br>');
$(start).append(newRow);
});
})();
});
HTML
<div class="dd">
<form action="js-more-fields.php" method="get">
<div id="fields">
</div>
<p class="addRow">Add a Row</p>
<input type="submit" id="submit" />
</form>
</div>
Here is working fiddle
$(document).ready(function () {
var i = 1;
(function () {
$('.dd').on('click', '.addRow', function () {
i = i+1;
var start = $('#fields'),
newRow = $('<div id='+i+'><input type="text" name="i" class="quantity"/><span class="delete">X</span></div><br/>');
$(start).append(newRow);
});
$('body').on('click', '.delete', function(e) {
$(this).parent().remove();
});
})();
});
:You are trying to bind click on dynamic created element which does not exist.You can use delegate or on for doing this.
Use JQuery on for dynamically created elements:
api.jquery.com
Related
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>
Here I need to get all the values entered in the input field. But it echoes only the first value.
ie. When I press the + and give some values, I need to get that value too.
$(document).ready(function() {
$(document).on("click", ".add", function() {
var clone = '<div class="add1"><input type="text" name="selprice" /><input type = "submit" value = "+" class = "add" ><input type = "submit" value = "-" class = "remove" ></div>';
$(this).closest('.add1').after(clone);
});
$(document).on("click", ".remove", function() {
$(this).parent(".add1").remove();
});
});
$('#package').change(function() {
var arr = [];
$("input.packageclass").each(function() {
arr.push($(this).val());
alert(arr);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="add1">
<h6>Sales Package </h6>
<div>
<input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
<input type="submit" value="+" class="add"></div>
</div>
$('.package').change(function() {
You are using an ID in your input type="text". IDs are only used once. If you want to add the listener to all of your textfields use classes.
In addition to that the .change(function() is only once called, when the dom is ready. That will be a problem too. So the change listener is not added to the generated textfields. Maybe you use something like...
$('.package').on('change', 'input', function() {
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="add1">
<h6>Sales Package </h6>
<div>
<input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
<input type="submit" value="+" class="add">
</div>
</div>
<script type="text/javascript">
var addInput = function(e) {
var arr = [];
$("input.packageclass").each(function() {
arr.push($(this).val());
});
alert(arr);
};
$(document).ready(function() {
$(document).on("click", ".add", function() {
var clone = '<div class="add1"><input class="packageclass" type="text" name="selprice" /><input type = "submit" value = "+" class = "add" ><input type = "submit" value = "-" class = "remove" ></div>';
$(this).closest('.add1').after(clone);
$('.packageclass').unbind().bind('change', addInput);
});
$(document).on("click", ".remove", function() {
$(this).parent(".add1").remove();
});
});
$('.packageclass').unbind().bind('change', addInput);
</script>
Just using loop you can get the particular value from loop.
for (var i = arr.length - 1; i >= 0; i--) {
arr[i];
//work with arr[]
}
I have used event delegation to capture the events and take appropriate action.
In this, you can add a event listener to your parent element i.e., click to the .body in my case. When I click on the .add button, the event propagates and .body click handler gets invoked. By checking for event.target we can find out the origin of event and add or remove the divs.
Similary we can listen for the change event of the input boxes and take appropriate actions.
$('#body').click(function(e) {
if(e.target.className === 'add') {
$('#body').append(`
<div class="add1">
<input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
<button class="add">+</button>
<button class="remove">-</button>
</div>
`);
}
if(e.target.className === 'remove') {
$(e.target).parent().empty();
}
});
$('#body').change(function(e) {
console.log(e.target.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="body">
<h6>Sales Package </h6>
<div class="add1">
<input type="text" name="package" placeholder="Ex:34" id="package" class="packageclass">
<button class="add">+</button>
</div>
</div>
Just add class="packageclass" to the input when creating your clone variable.
https://jsfiddle.net/289xvmu7/
var clone = '<div class="add1"><input type="text" name="selprice" class="packageclass"/> <input type = "submit" value = "+" class = "add" ><input type = "submit" value = "-" class = "remove" ></div>';
I'm trying to make a remove button that removes all that is between the li tag whose the button is inside.
$(document).ready(function() {
$('#Adicionar1').click(function() {
$('#list1').append("<li>"+ $("#Texto1").val() +"<button>remover</button>" +"</li>");
$("#Texto1").val("");
});
$('button').click(function() {
});
});
code:
http://jsfiddle.net/bdMAF/917/
Well you can not add an event to an element that does not exist. You need to either attach the event when the button is added or use event delegation.
$('#list1').on("click", "li button", function() { //listen for click on button
$(this) //the button that was clicked
.closest("li") //find the li element
.remove(); //remove the li
});
I would use jQuery's .parent() function, and make use of data attributes:
$(document).ready(function() {
$('.Adicionar').click(function() {
console.log($(this).data("listid"));
console.log($(this).data("textid"));
$("#"+$(this).data("listid")).append("<li>"+ $("#"+$(this).data("textid")).val() +'<button class="remove">remover</button>' +"</li>");
$("#"+$(this).data("textid")).val("");
$('.remove').on("click",function() {
$(this).parent().remove();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<h3>TEMAS A APRENDER</h3>
<input id= "Texto1" type="text" name="" value="">
<button class="Adicionar" data-listid="list1" data-textid="Texto1">Adicionar</button>
<ul id="list1"></ul>
<h3>TEMAS APRENDIDOS</h3>
<input id= "Texto2" type="text" name="" value="">
<button class="Adicionar" data-listid="list2" data-textid="Texto2">Adicionar</button>
<ul id="list2"></ul>
Similar answer to one above: http://jsfiddle.net/bdMAF/920/
HTML
<span class="delegateAnchor">
<h3>TEMAS A APRENDER</h3>
<input id="Texto1" type="text" name="" value="">
<button id="Adicionar1">Adicionar</button>
<ul id="list1"></ul>
<h3>TEMAS APRENDIDOS</h3>
<input id="Texto2" type="text" name="" value="">
<button id="Adicionar2">Adicionar</button>
<ul id="list2"></ul>
</span>
Javascript
$(document).ready(function () {
var $list1 = $('#list1');
var $text1 = $("#Texto1");
$('#Adicionar1').click(function () {
var $li = $('<li>');
$li.append($text1.val()).append("<button>remover</button>");
$list1.append($li);
$text1.val('');
});
$('.delegateAnchor > ul').on('click', 'button', function() {
$(this).parent().remove();
});
});
Below is my code. But I am not getting an output.
$(document).ready(function () {
$('#txtOpenQty').keyup(function (e) {
var txtVal = $(this).val();
$('#txtCloseQuantity').val(txtVal);
});
$('#txtCloseQuantity').keyup(function (e) {
var txtVal = $(this).val();
$('#txtOpenQty').val(txtVal);
});
});
This should work for you.
<input type="text" id="one" />
<input type="text" id="two" />
$('#one').keyup(function(e) {
var txtVal = $(this).val();
$('#two').attr("value", txtVal);
});
Check here for example.
update:
<input type="text" id="one" />
<input type="text" id="two" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$('#one').keyup(function(e) {
var txtVal = $(this).val();
$('#two').val(txtVal);
});
</script>
try this one
<textarea id="o"></textarea>
<textarea id="t"></textarea>
<script>
$(document).ready(function(){
console.log('jquery in');
$('#o').keyup(function(e){
console.log($(this).val());
$('#t').val($(this).val());
});
});
</script>
<input width="5" size="5/" col="5" value="23232" id="txtOpenQty">
<input width="5" size="5/" col="5" value="2323" id="txtCloseQuantity">
And in JS O copied your code as it is.
<script>
$(document).ready(function (){
$('#txtOpenQty').keyup(function (e) {
var txtVal = $(this).val();
$('#txtCloseQuantity').val(txtVal);
});
$('#txtCloseQuantity').keyup(function (e) {
var txtVal = $(this).val();
$('#txtOpenQty').val(txtVal);
});
});
</script>
I tried the same example its working fine for me, can you please explain in more details,
where are you writing this code, or what is HTML you are using?
i have this list of cities(checkbox and label) and an input field:
<input class="search-filter" type="text"/>
<form autocomplete="off" id="city-search-form" name="city-search-form" action="" method="">
<div id="list" class="multiselect">
<input id="city-id-1" class="css-checkbox" type="checkbox" />
<label for="city-id-1" name="" class="css-label">abc</label>
<input id="city-id-2" class="css-checkbox" type="checkbox" />
<label for="city-id-2" name="" class="css-label">bce</label>
<input id="city-id-3" class="css-checkbox" type="checkbox" />
<label for="city-id-3" name="" class="css-label">cde</label>
<input id="city-id-4" class="css-checkbox" type="checkbox" />
<label for="city-id-4" name="" class="css-label">rgp</label>
</div>
</form>
i am using this jquery code to filter the checkboxes + labels by the words i type in, but the code is not working. How can i filter and show only the labels that start with typed words.
function listFilter(list) {
var input = $('.search-filter');
$(input)
.change( function () {
var filter = input.val();
$('.css-label').filter(function(filter) {
if($('.css-label').text().search(filter) == 0){
.....hide();
}
else {
.......show();
}
});
})
.keyup(function () {
input.change();
.....
}
});
}
$(function () {
listFilter($("#list"));
});
}($));
Try
function listFilter(list, input) {
var $lbs = list.find('.css-label');
function filter(){
var regex = new RegExp('\\b' + this.value);
var $els = $lbs.filter(function(){
return regex.test($(this).text());
});
$lbs.not($els).hide().prev().hide();
$els.show().prev().show();
};
input.keyup(filter).change(filter)
}
jQuery(function($){
listFilter($('#list'), $('.search-filter'))
})
Demo: Fiddle
You can use :contains() selector for filtering:
var input = $('.search-filter');
input.change( function () {
var filter = input.val();
if(filter.length == 0) { // show all if filter is empty
$('.css-label').each(function() {
$(this).show();
$(this).prev().show();
});
return;
}
// hide all labels with checkboxes
$('.css-label').each(function() {
$(this).hide();
$(this).prev().hide();
});
// show only matched
$('.css-label:contains("'+filter+'")').each(function() {
$(this).show();
$(this).prev().show();
});
}).keyup(function() {
$(this).change();
});
jsfiddle
Too late to be accepted as correct but here is an attempt that I was working on before my job got in the way. Thought I may as well post it.
It is case insensitive and supports multiple words (thanks to Arun P Johny for that).
demo
$('.search-filter').keyup(function (e) {
var text = $(this).val();
var $elems = $('.css-label, .css-checkbox');
if (text.length < 1) {
$elems.show();
}
else{
$elems.hide();
var sel = $('label').filter(function () {
return $(this).text().match("\\b", "i" + text)
}).attr('for');
$('#'+sel + ',[for=' + sel + ']').show();
}
});
i have a code below to get the label name
<!DOCTYPE html>
<html>
<head>
<SCRIPT src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</SCRIPT>
<SCRIPT>
$(document).ready(function(){
alert($(".css-label").text());
});
</SCRIPT>
</head>
<body>
<div id="list" class="multiselect">
<input id="city-id-1" class="css-checkbox" type="checkbox" />
<label for="city-id-1" name="" class="css-label">abc</label>
</div>
</body>
</html>
hope this will help you