We Keep Coding

Edit button jquery function

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>

How to show a div if input is checked

I did this code to show a div when people select one input radio, but doesn't work.
Unfortunately the input is inside a .tpl page (PrestaShop) and it's a group. So I did it calling the value 23. If I put some css it works, but when I set "show" the div stays hide. What is wrong?
$(document).ready(function () {
$('#group_1 input').each(function () {
if ($(this).val() == ('23') && $(this).is(':checked')) {
$('#showtext').show();
} else {
$('#showtext').hide();
}
});
});
{elseif $group.group_type == 'radio'}
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
<li class="input-container float-xs-left">
<label class="accordion--form__label">
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span class="radio-label">{$group_attribute.name}</span>
</label>
</li>
{/foreach}
</ul>
{/if}

$(document).ready(function() {
$('#group_1 input').each(function() {
if ($(this).val() == ('23') && $(this).is(':checked')) {
$('#showtext').show();
} else {
$('#showtext').hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "group_1" >
<input class = "input-radio" type = "radio" data-product-attribute = "data-product-attribute" name = "test" value = "23" checked>
</div>
<div id = "showtext" >Show text </div>
You can see code above is working absolutely fine. You have applied display:none !important;to showtext in your css code.

Jquery how to count checkboxes from different divs

i have problem with counting checkboxes that are in different divs. It has to count if there is at least one checked checkbox checked in every div, and when there is, it makes a submit button active, else the submit button is inactive.
<div id="collapseOne">
<span class="custom-checkbox addspace pull-left">
<input type="checkbox"/>
<span class="box"><span class="tick"></span></span>
</span>
</div>
<div id="collapseTwo">
<span class="custom-checkbox addspace pull-left">
<input type="checkbox"/>
<span class="box"><span class="tick"></span></span>
</span>
</div>
$(document).ready(function() {
$a=$('#collapseOne input[type="checkbox"]').filter(':checked').length;
$b=$('#collapseTwo input[type="checkbox"]').filter(':checked').length;
if(($a && $b)>0 ){
$("#button").addClass('active')
}
else{
$("#button").removeClass('active').addClass('disabled')
}
});

You need to use length instead of lenght
$a=$('#collapseOne input[type="checkbox"]').filter(':checked').length;
$b=$('#collapseTwo input[type="checkbox"]').filter(':checked').length;
as well as using:
if($a > 0 && $b>0 ){
instead of:
if(($a && $b)>0 ){
Edit: You also need to wrap your code inside change() function to keep track when your input has been changed:
$(document).ready(function () {
$('input[type="checkbox"]').change(function () {
$a = $('#collapseOne input[type="checkbox"]').filter(':checked').length;
$b = $('#collapseTwo input[type="checkbox"]').filter(':checked').length;
if (($a && $b) > 0) {
$("#button").addClass('active')
} else {
$("#button").removeClass('active').addClass('disabled')
}
}).change();
});
Fiddle Demo

Show div on radio button check

I would like to hide a div until the leased radio button is selected. This div contains input fields only relative to the leased radio selection, so hiding them when the owned radio button is selected is preferred. However, the code I have is not working.
HTML
<div id="surv_radio4">
<p>
Merchant Site Property is
</p>
<input type="radio" id="owned" value="owned" name="merchant_property"/>
<label for="owned">Owned</label>
<input type="radio" id="leased" value="leased" name="merchant_property"/>
<label for="leased">Leased</label>
</div>
<div id="surv_5">
<label for="landlord_name" class="test">Landlord Name</label>
<input type="text" id="landlord_name" placeholder="Landlord Name"/>
<label for="landlord_phone">Phone Number</label>
<input type="text" id="landlord_phone" placeholder="XXX-XXX-XXXX"/>
</div>
CSS
#surv_5 {
display: none;
}
Javascript
<script>
$(document).ready.(function() {
$("input[name$='merchant_property']").click(function() {
var value = $(this).val();
if (value == 'leased') {
$("#surv_5").show();
} else if (value == 'owned') {
$("#surv_5").hide();
}
});
});
</script>

Your document.ready function has a syntax error (extra period):
$(document).ready(function () {
http://jsfiddle.net/isherwood/tW3D5/

Try this:
$("input[name$='merchant_property']").change(function () {
var value = $(this).val();
if (value == 'leased') {
$("#surv_5").show();
} else {
$("#surv_5").hide();
}
});
Fiddle here.

On your original code, you also had an error on your else statement.. See fiddle here
Relevant bits below:
if (value == 'leased') {
$("#surv_5").show();
} else if(value == 'owned'){
$("#surv_5").hide();
}
UPDATE
Too late, looks like #Hiral has an answer for you....

Show div when textbox value is same as another div's content

I am making a quiz in which the answer will be random. I want the "Correct!" div to show when the textbox value is the same as another div.
Here's what I've got so far:
$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == '#answer') {
$("#correct").show("fast"); //Slide Down Effect
}
else {
$("#correct").hide("fast"); //Slide Up Effect
$("#incorrect").show("500").delay("1000").hide("500");
}
});
});
<p>What is the animal?</p>
<div id="correct">
That's Correct!
</div>
<div id="incorrect">
Sorry, Try again!
</div>
<div id="answer">Monkey</div>
<input type='text' id="full_day"/>
<input type='button' id="buttontest" value="clickme"/>

Use
$('#answer').text()
instead of just
'#answer'
in the if statement.

if ($('#full_day').val() == $('#answer').text())
This is case sensitive. To make it case insensitive:
if ($('#full_day').val().toLowerCase() == $('#answer').text().toLowerCase())
Edit: As requested, here is a solution which allows multiple answers:
$('#check').bind('click', function() {
var possibleAnswers = $('#answers').text().toLowerCase().split(' ');
var givenAnswer = $('#user-answer').val().toLowerCase();
var isAnswerCorrect = false;
for (var indexPossibleAnswers = 0; indexPossibleAnswers < possibleAnswers.length; indexPossibleAnswers++)
{
if (possibleAnswers[indexPossibleAnswers] == givenAnswer)
{
isAnswerCorrect = true
break;
}
}
if (isAnswerCorrect)
{
alert('Correct');
}
else
{
alert('Incorrect, try again.');
}
});
Live demonstration.

$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == $('#answer').html()) {
$("#correct").show("fast"); //Slide Down Effect
}
else {
$("#correct").hide("fast"); //Slide Up Effect
$("#incorrect").show("500").delay("1000").hide("500");
}
});
});
<p>What is the animal?</p>
<div id="correct" style="display:none;">
That's Correct!
</div>
<div id="incorrect" style="display:none;">
Sorry, Try again!
</div>
<div id="answer" style="display:none;">Monkey</div>
<input type='text' id="full_day"/>
<input type='button' id="buttontest" value="clickme"/>