I want to append div on click add more and remove that div according to my code
$(document).ready(function() {
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().appendTo("#appendbox");
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest('.add-skils-form').remove();
});
});
this is my code it works perfect but i want to not delete first div and remove delete button my html code is
<div id="appendbox">
<div class="add-skils-form">
<div class="skill-a">
<input type="text" class="inputtextbox" value="" name="" placeholder="Enter Your Key Skills" />
</div>
<div class="skill-b">
<select id="key-skills-select" class="defualt-select default-size">
<option value="3">Advanced</option>
<option value="2">Intermediate</option>
<option value="1" selected>Beginner</option>
</select>
<i class="fa fa-trash" aria-hidden="true"></i>
</div>
</div>
</div>
how could i do please suggest me
Try with this.
$(document).ready(function() {
deleteRow();
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().appendTo("#appendbox");
$('.delete-row').show();
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest('.add-skils-form').remove();
deleteRow();
});
function deleteRow(){
if($('.add-skils-form').length == 1){
$('.delete-row').first().hide();
}
}
});
Another Solution
Check here https://fiddle.jshell.net/o2f0kskf/1/
$(document).ready(function() {
$(".add-skill-row span").click(function() {
$(".add-skils-form:first").clone().find("input[type='text']").val("").end().appendTo("#appendbox");
});
$('#appendbox').on('click', '.delete-row', function() {
$(this).closest(".add-skils-form").not(":first-child").remove();
});
});
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>
when i click on add it show the text field with value. And when i click on remove its hide. But i want to remove text field value also when i click on remove.
Css
#second {
display: none;
}
#third {
display: none;
}
#forth {
display: none;
}
#fifth {
display: none;
}
html
<div id="header">
add - remove
<div id="first" class="toggle"><input type="text" value="1" name="sid[]">first</div>
<div id="second" class="toggle"><input type="text" value="2" name="sid[]">second</div>
<div id="third" class="toggle"><input type="text" value="3" name="sid[]">third</div>
<div id="forth" class="toggle"><input type="text" value="4" name="sid[]">forth</div>
<div id="fifth" class="toggle"><input type="text" value="5" name="sid[]">fifth</div>
</div>
Jquery
$(document).ready(function() {
$("#add1").click(function() {
$('.toggle:not(:visible)').first().show();
});
$("#remove").click(function() {
$('.toggle:visible').last().hide();
});
});
Here is my code : Jsfiddle
just add .find('input').val(''); after .hide(); to be
$('.toggle:visible').last().hide().find('input').val('');
DEMO
try this code:-
<script>
$(document).ready(function() {
$("#add1").click(function() {
$('.toggle:not(:visible)').first().show();
});
$("#remove").click(function() {
$('.toggle:visible').last().find(':input').val('');
$('.toggle:visible').last().hide();
});
});
</script>
use this
$(document).ready(function() {
$("#add1").click(function() {
$('.toggle:not(:visible)').first().show();
});
$("#remove").click(function() {
$('.toggle:visible').last().hide().find('input').val('');
});
});
Jsfiddel
hi now used to .find() and .val() as like this
$(document).ready(function() {
$("#add1").click(function() {
$('.toggle:not(:visible)').first().show();
});
$("#remove").click(function() {
var valNon = $('.toggle:visible').last().hide();
valNon.find('input').val(''); // add this line
});
});
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();
});
});
Can you please take a look at This Demo and let me know why I am not able to target the first .fa class before the text box #name ?
I am trying this:
$(this).prev().closest(".fa").addClass("err");
at this code
<div class="row">
<div class="col-md-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user err-test">Name</i>
</div>
<input type="text" class="form-control form-input-gray" id="name" placeholder="Enter Your Name" />
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-default btn-block" id="btn-contact-rquest">Contact</button>
<br />
<div id="result"></div>
<script>
$(function () {
function txtInput(elem) {
var inputData = $.trim(elem.val());
if (inputData == "") {
$(this).prev().closest(".fa").addClass("err");
}
else{
return inputData;
}
}
$("#btn-contact-rquest").on("click", function (e) {
if (txtInput($('#name'))) {
$("#result").html("No Error");
} else {
$("#result").html("Error");
}
});
});
</script>
but cant target the .fa can you please let me know how to fix this?
Thanks,
From .closest() docs,For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree but in your case .fa is not ancestors of $('#name').
Instead of
$(this).prev().closest(".fa").addClass("err");
Try
elem.prev().children(".fa").addClass("err");
Working Demo
Try this: FIDDLE
$(elem).parent().find(".fa:eq(0)").addClass("err");
I think you miss reading the html.
Because before the input field, that is a div with class of input-group-addon.
Hence, your selector is incorrect.
I changed your JS to :
$(function () {
function txtInput(elem) {
var inputData = $(elem).val();
if (inputData != "") {
return inputData;
}
else{
$(".input-group").addClass("err");
}
}
$("#btn-contact-rquest").on("click", function (e) {
if (txtInput($('#name'))) {
$("#result").html("No Error");
} else {
$("#result").html("Error");
}
});
});
http://jsfiddle.net/fjm63j56/3/
I've stacked some input text fields, drop downs, radio gruop inside a DIV. Now how do I check if all text fields, radio groups and dropdowns inside this DIV have some value?
I've created a simple mockup in JSFiddle
jQ:
$("#continue_btn").click(function(){
if($('#myForm input:text[value=""]').length > 0){
alert("yes");
} else {
alert("no")
}
}
All you have to do is to wrap your markup in a form element and to each input add attr required
this is pure css.
DEMO ON JSFIDDLE
function highlight(event)
{
event.preventDefault();
alert('Done!!!');
return false;
}
var highlightForm = document.querySelector("form#myForm");
highlightForm.addEventListener('submit',highlight , false);
/**
$("#continue_btn").click(function(){
if($('#myForm input:text[value=""]').length > 0){
alert("yes");
} else {
alert("no")
}
}
*/
<form id="myForm">
<div class="myF">
<div class="input-group">
<span class="input-group-addon"><input type="radio" name="radioGroup" id="radio1" value="option1" required></span>
<input class="form-control" value="Fruits" autofocus required />
</div>
<div class="input-group">
<span class="input-group-addon"><input type="radio" name="radioGroup" id="radio2" value="option2" required></span>
<input class="form-control" value="Vegitables" required/>
</div>
</div>
<div class="input-group">
<span class="input-group-addon quotationFields">City</span><input type="text" class="form-control numericOnly" id="weight_oq" name="weight_oq" required/>
</div>
<div class="input-group onlineQuoteForm">
<span class="input-group-addon">Type </span>
<select class="form-control" id="ptype_oq" required>
<option value="">Please selelct</option>
<option value="Satisfatory">Documents</option>
<option value="val1">OPtion 1</option>
<option value="val2">OPtion 2</option>
</select>
</div>
<input type="submit" value="Continue" id="continue_btn" class="btn btn-primary"/>
</form>
Now you can style it using this
input:required:focus {
}
input:required:hover {
}
/**--------VALID----------*/
input[type="text"]:valid,
input[type="name"]:valid,
input[type="password"]:valid,
input[type="email"]:valid {
}
input[type="text"]:valid:focus,
input[type="name"]:valid:focus,
input[type="password"]:valid:focus,
input[type="email"]:valid:focus {
}
input[type="text"]:valid:hover,
input[type="name"]:valid:hover,
input[type="password"]:valid:hover,
input[type="email"]:valid:hover {
}
/**---------INVALID---------*/
input[type="text"]:invalid,
input[type="name"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid {
}
input[type="text"]:invalid:focus,
input[type="name"]:invalid:focus,
input[type="password"]:invalid:focus,
input[type="email"]:invalid:focus {
}
input[type="text"]:invalid:hover,
input[type="name"]:invalid:hover,
input[type="password"]:invalid:hover,
input[type="email"]:invalid:hover {
}
/**---------REQUIRED---------*/
input[type="text"]:required,
input[type="name"]:required,
input[type="password"]:required,
input[type="email"]:required {
}
/**---------OPTIONAL---------*/
input[type="text"]:optional,
input[type="name"]:optional,
input[type="password"]:optional,
input[type="email"]:optional {
}
input[type="text"]:optional:focus,
input[type="name"]:optional:focus,
input[type="password"]:optional:focus,
input[type="email"]:optional:focus {
}
input[type="text"]:optional:hover,
input[type="name"]:optional:hover,
input[type="password"]:optional:hover,
input[type="email"]:optional:hover {
}
The main difficulty here is radio buttons which you need to check separately. Try something like this:
var $form = $('#myForm');
$("#continue_btn").click(function () {
var $radio = $form.find(':radio:checked');
var hasEmpty = $.grep($form.serializeArray(), function(el) {
return !$.trim(el.value);
}).length || $radio.length == 0;
if (hasEmpty) {
alert("yes");
} else {
alert("no")
}
});
Demo: http://jsfiddle.net/tq3jL2d6/9/
Note, that for this demo I improved HTML a little:
wrapped everything with form tag, since you deal with form
added name attributes to all form elements
added placeholder attributes.
You can use this code, here is the link
http://jqueryvalidation.org/files/demo/
And here is the code
view-source:http://jqueryvalidation.org/files/demo/
You can use filter function which can filter every value in form like this
$("#continue_btn").click(function(){
var anyFieldIsEmpty = $("#myForm input,select").filter(function() {
return $.trim(this.value).length === 0;
}).length > 0;
if(anyFieldIsEmpty){
alert("yes");
} else {
alert("no")
}
});
you can select multiple form elements like i have done input,select,textarea etc..
FIDDLE DEMO