Hello all! I am new to JavaScript and was hoping someone could help me with a jQuery assignment. My page is online here: http://baileyjumper.aisites.com/JavaScript/Homework3/marcum-loren-hw2-jquery.html
What I currently have is a to do list, where you enter text into a textarea, and what you type is appended as a list item in an unordered list. I have some form validation here also. However, I have two problems that I cannot solve:
1. After an li is added, I want it to fade when the checkbox is clicked. Right now, all the checkboxes are being selected, and therefore all list items fade when one check box is clicked. I've tried to give each li a unique id and select them that way, but I just cant' get it to work.
2. I have some delete text that is added next to the list items, and that calls a function that runs a confirm when clicked. However, I do not know how to actually delete the list item. I am trying to use .remove() with no luck.
Any help would be greatly appreciated. Thank you!!!
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Marcum Loren Homework Week 2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="hw3style.css" />
</head>
<body>
<div id="container">
<div id="wrapper">
<h1>To Do List</h1>
<ul id="todo">
</ul>
<form method="post" action="" name="form" id="form">
<textarea id="inputbox" style="width:300px;height:65px;border:1px solid #888;" rows="6" cols="40"></textarea><br />
<input type="button" id="button" value="Submit"/>
</form>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
//creating a variable that will be used to number the list items
var number = 1;
var checkbox = '<input type="checkbox" class="checkBox" name="checkBox" id="check'+number+'" />';
var liid = 'item' + number;
var checkid = 'check' + number;
//create function to limit characters to 140 in to do item box
jQuery('#inputbox').keypress(function() {
var text = jQuery('#inputbox').val();
if(text.length > 140) {
text = text.substring(0, 140);
jQuery('#inputbox').val(text);
}
});
//creating the function to execute when the submit button is clicked
$("#button").click(function () {
//crating a variable to get the text entered into the text field
var text = $("#inputbox").val();
//if statement for form validation
//if the text field is not empty
if(text.length!=0){
//add a new list item
$("#todo").append('<li id="item'+liid+'">'+checkbox+number+" "+text+" "+"<b onclick='return deletechecked()'>Delete</b></li>").fadeIn("slow");
//increase number variable by one, to number list items
number++;
//reset the text field after list item is added
text = $("#inputbox").val("");
//if the text field is empty, alert an error message
} else {
alert ("Please fill out the form!");
//alert (text);
}
});
/*$(".checkme").click(function (event) {
if ($(this).attr('checked')){
alert("ARG!");
}
});*/
});
$('#todo').click(function (event) {
if ($('input:checkbox').is(':checked')){
//var currentId = $(this).attr('id');
//alert (this);
//alert(currentId);
$(this).fadeTo("slow", 0.5);
} else {
$(this).fadeTo("slow", 1);
}
});
function deletechecked(){
var answer = confirm("Delete selected items ?");
if (answer==true){
//if yes
return true;
//(this).remove();
} else
return false;
if (answer==true){
//if yes
('li').remove();}
}
</script>
</div>
</div>
</body>
</html>