This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 3 years ago.
I have two tables, one with a list of players for you to choose with a checkbox and another where the players are supposed to appear after clicking the checkbox. There is also a div in table2 that subtracts the player's value from the set $35000 value.
When I click the checkbox, the player goes to table2 and the salary subtracts, like expected, but when I uncheck the checkbox, the player returns to table1 and the salary doesn't return back to $35000. Also it will not let click that same player again, so I was wondering what the problem may be.
Here's the Code Below:
$(document).ready(function() {
$('#table1 tbody tr td input.checkmark').on('click', function() {
var row = $(this).closest('tr').clone();
$('#tbody2').append(row);
$(this).closest('tr').remove();
});
$('body').on('click', '#table2 tbody tr td input.checkmark', function() {
if (!$(this).prop('checked')) {
var row = $(this).closest('tr').clone();
$('#tbody1').prepend(row);
$(this).closest('tr').remove();
}
});
})
//FUNCTION FOR TOTALING SALARY
function calc() {
var salary = $('[name="salary"]');
var sum = 35000;
$('[name="salary"]').each(function() {
if (this.checked) {
sum -= parseInt($(this).val());
}
$("#salary_total").val(sum);
});
};
//CLICK EVENT HANDLER
$(document).ready(function() {
$('[name="salary"]').on('click', calc);
});
<div class="table_container">
<table class="mytable" id="table1">
<caption><figure class="table_head">Players</figure></caption>
<thead><tr class="table1">
<th>Position</th>
<th> Name</th>
<th>FPPG</th>
<th>Salary</th>
<th>Game</th>
<th></th>
</tr></thead>
<tbody id="tbody1">
<tr class="table1">
<td>P</td>
<td>Stephen Strasburg</td>
<td>39.56</td>
<td>10,800</td>
<td>MIL#WAS</td>
<td><input name="salary" class="checkmark checkbox" id="toggle" type="checkbox" value="10800"></td>
</tr>
<tr class="table1">
<td>P</td>
<td>Patrick Corbin</td>
<td>38.82</td>
<td>10,500</td>
<td>MIL#WAS</td>
<td><input name="salary" class="checkmark checkbox" id="toggle" type="checkbox" value="10500"></td>
</tr>
<form id="playerForm">
<table class="mytable" id="table2">
<caption align="bottom">
<figure id="max">Max Salary: $35,000</figure>
<figcaption>
<button class="optimize_btn" id="optimizeButton">Optimize</button>
<button class="optimize_btn" id="reset">Clear</button>
</figcaption>
</caption>
<caption>
<figure class="table_head">My Team</figure>
<figcaption><div class="dollar">
<input name="calc" disabled="" class="salary_count good" id="salary_total" type="number" max="35000" value="35000"></div>
</figcaption>
</caption>
<thead><tr class="table2"></tr></thead>
<tbody id="tbody2">
</tbody>
</table></form>
.mytable{
background-color: blanchedalmond;
font-size: 20px;
overflow: scroll;
}
.table_head{
width:300px;
font-size: 2rem;
font-weight: bolder;
}
.mytable th:first-child {
padding-left: 10px;
}
.mytable tr {
padding-left: 10px;
}
.mytable tr td:first-child {
padding-left: 10px;
border-left: 0;
}
.mytable tr td {
padding: 8px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafa fa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.mytable tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6 f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.mytable tr:last-child td {
border-bottom: 0;
}
.mytable tr:last-child td:first-child {
-moz-border-radius-bottom-left: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.mytable tr:last-child td:last-child {
-moz-border-radius-bottom-right: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.mytable tr:hover td {
background: #f2f2f2;
transform: scale(1.01);
padding-left: 10px;
outline: 1px solid #191970;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
#footer{
background-color: hsl(291,5%,29%);
color: ivory;
text-align: center;
font-size: 0.8em;
font-variant:small-caps;
padding-top: 5px;
padding-bottom: 5px;
bottom:0;
width:100%;
clear: both;
margin: 0 auto;
}
#wrapper_lineup{
margin: 0 auto;
position: relative;
max-width: 1284px;
background-color: #fff;
}
.header{
text-align: center;
padding-bottom: 15px;
}
.table_container{width:1200px;margin:0 auto;}
table{
float: left;
}
.salary_count {
width: 120px !important;
padding: 7px;
display: inline-block;
border: 1px hidden;
border-radius: 4px;
font-family: brush-script-std;
font-weight: bold;
background-color: white;
font-size: 2.8rem;
}
.dollar{
display:inline-block;
position: relative;
font-size: 2.8rem;
font-family: brush-script-std;
color: black;
font-weight: bold;
}
.dollar input{
padding-left:15px;
}
.dollar:before {
position: absolute;
content:"$";
left:-10px;
top:8px;
}
#table1{
margin-right: 10px;
overflow: auto;
cursor: pointer;
}
#table2{
margin-left: 40px;
cursor: pointer;
}
.checkmark {
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
height: 25px;
width: 25px;
background-color: skyblue;
}
.over{
background-color: white;
color:red;
font-weight: bold;
}
div[comma-value]{
position:relative;
}
div[comma-value]:before{
content: attr(comma-value);
position:absolute;
left:0;
}
div[comma-value] input{
color:#fff;
}
.optimize_btn {
background: none;
border: 1px solid #dbdbdb;
cursor: pointer;
background-color: #11AAFF;
color: white;
font-family: 'Aaux-Next-Regular';
font-size: 20px;
width: 120px;
height: 50px
}
.optimize_btn:hover{
background-color: white;
color: black;
}
.choose{
color: black;
font-weight:lighter;
font-size: 2rem;
}
.select_pos{
color: deepskyblue;
font-weight:bolder;
font-size: 2rem;
}
#max{
color: black;
width:200px;
}
This is your offending line:
$('#table1 tbody tr td input.checkmark').on('click', ...)
^^ This is a statically run query select by jquery, meaning when you clone the rows back to your original table they are not the original dom elements so they no longer have this event handler.
What you'll want to do is write an addListener function that will take the table row and attach the appropriate event handlers to it. In this case:
$('#table1 tbody tr td input.checkmark').on('click', move_to_table2);
function move_to_table2() {
var row = $(this).closest('tr').clone();
$('#tbody2').append(row);
$(this).closest('tr').remove();
}
...
(inside table2's event handler)
var row = $(this).closest('tr').clone();
$(row).on('click', move_to_table2)
...
My example borks up the salary calculation but I think you can handle that!
Related
I have a table that is populated from a database with a dropdown menu that is populated along side the table which is generated from code in the php. Im tying to use javascript and css to make each drop down open on click but I cannot seem to get it to work. I've included the code below. I initilly had the script working but it only worked on the first instance of the dropdown. I reviewed a similar post to what Im looking to do but it was to no avail.
CSS
background-color: #04AA6D;
color: white;
padding: 5px;
font-size: 12px;
border: none;
text-transform: uppercase;
}
.yardDropbtn i{
font-size: 12px;
top: 1px;
position: relative;
}
.yardDropdown{
position: relative;
display: inline-block;
}
.yard-dropdown-content{
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
right: 0;
}
.yard-dropdown-content a{
color: black;
padding: 5px 16px;
text-decoration: none;
display: block;
}
.yard-dropdown-content a:hover {
background-color: #ddd;
}
.yardDropBtnCt {
display: none;
background-color: #f1f1f1;
color: black;
/*margin-left: 5px;*/
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
text-transform: uppercase;
font-size: 12px;
}
.yardDropBtnCt:hover {
background-color: #ddd;
}
.trackBtn{
display: none;
background-color: #f1f1f1;
color: black;
margin-left: 5px;
border: 1px;
display: block;
width: 100%;
height: 30px;
font-size: 15px;
}
.trackBtn:hover{
background-color: #ddd;
}
/*.yard-dropdown-content:hover{
background-color: #ddd;
}*/
.show_yard_Dropdown .yard-dropdown-content {
display: block;
}
.show_yard_Dropdown .yardDropbtn {
background-color: #3e8e41;
}
JavaScript
var dropDownDivY = document.querySelector(".yardDropdown");
/*dropDownButton.addEventListener("click", function(){
dropDownDivY.classList.toggle('show_yard_Dropdown');
});*/
dropDownButton.forEach(btn => {
btn.onclick = function() {
dropDownDivY.style.display = "block";
}
});
HTML
<tr>
<td width='50px' class='yard8'>6400'</td>
<td width='100px' class='yard8 track'>Receiving 1</td>
<td width='150px' class='yard8'></td>
<td width='150px' class='yard8'>
<td width='250px' class='yard8 destination'></td>
<td width='100px'class='yard8 length'>3455'</td>
<td width='100px' class='yard8 weight'></td>
<td width='150px' class='yard8 status'></td>
<td class='yard8'>
<div class='progressContainer'>
<div class='progress' style='width:54%'>54%</div>
</div>
</td>
<td class='yard8 remarks'></td>
<td width='59px'>
<div class="yardDropdown">
<button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
<div class="yard-dropdown-content">Edit TrackAEI Populate</div>
</div>
</td>
</tr>
<form action="" method="POST"></form>
document.querySelector(".yardDropdown");
The querySelector method only returns the first element matching the selector, so it can never work for more than the first row.
You need to use querySelectorAll instead and then loop over all the elements found:
let dropDowns = document.querySelectorAll(".yardDropdown");
for (let i = 0; i < dropDowns.length; i++) {
let dropDown = dropDowns[i]
dropDown.addEventListener('click', function () {
// do something, you can use the `i` variable to know which row has been clicked if you need to
})
}
I'm using list.js for filtering and searching, my list is very large and I need to delay the search for it, but the documentation doesn't show any examples of how to do so, all it says is this: https://listjs.com/api/#searchDelay
One example of how to do so would be very helpful
Below is the table example from List.js which I have used in this snippet to demonstrate the usage of searchDelay. Below snippet code sets a delay of 1 second before starting a search on the list. As per the changelog, this feature has been included with version 2.3.0
var options = {
valueNames: [ 'name', 'born' ],
searchDelay: 1000 // 1 second
};
var userList = new List('users', options);
.list {
font-family:sans-serif;
}
td {
padding:10px;
border:solid 1px #eee;
}
input {
border:solid 1px #ccc;
border-radius: 5px;
padding:7px 14px;
margin-bottom:10px
}
input:focus {
outline:none;
border-color:#aaa;
}
.sort {
padding:8px 30px;
border-radius: 6px;
border:none;
display:inline-block;
color:#fff;
text-decoration: none;
background-color: #28a8e0;
height:30px;
}
.sort:hover {
text-decoration: none;
background-color:#1b8aba;
}
.sort:focus {
outline:none;
}
.sort:after {
display:inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content:"";
position: relative;
top:-10px;
right:-5px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content:"";
position: relative;
top:4px;
right:-5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content:"";
position: relative;
top:-4px;
right:-5px;
}
<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort by name
</button>
<table>
<!-- IMPORTANT, class="list" have to be at tbody -->
<tbody class="list">
<tr>
<td class="name">Jonny Stromberg</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Jonas Arnklint</td>
<td class="born">1985</td>
</tr>
<tr>
<td class="name">Martina Elm</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Gustaf Lindqvist</td>
<td class="born">1983</td>
</tr>
</tbody>
</table>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
I am trying to print an html page, which works wonderfully, but I am missing the values within the text areas when printing?
How can I include the values of the text areas?
Here is the code of the print function:
function print(section) {
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Navigationlog</title>');
//Print the Table CSS.
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write('<style type = "text/css">');
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head>');
//Print the DIV contents i.e. the HTML Table.
printWindow.document.write('<body>');
var divContents = document.getElementById(section).innerHTML;
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.print();
printWindow.close();;
}
Here is the complete example code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<style id="table_style" type="text/css">
#media print {
body {
transform: scale(.97);
height: fit-content;
width: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
}
textarea {
font-size: 1.0vw;
}
#routeTable td {
font-size: 1.0vw;
}
#routeTable th {
font-size: 1.0vw;
}
}
html {
font-family: Arial, Helvetica, sans-serif;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
/* for Debug */
}
body {
font-family: Arial, Helvetica, sans-serif;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
/* for Debug */
}
/* Style the tab content */
.pagecontent {
display: none;
}
/* Navlog */
tr {
vertical-align: middle;
padding-top: 0.5vw;
padding-bottom: 0.5vw;
border-collapse: collapse;
}
th {
vertical-align: middle;
padding-top: 0.5vw;
padding-bottom: 0.5vw;
text-align: left;
border-collapse: collapse;
}
td {
text-align: left;
vertical-align: top;
padding: 0.3vw;
border-collapse: collapse;
}
#left {
background: linear-gradient(to top right, #357987, #357987 49%, black 49%, black 51%, transparent 51%, transparent);
}
#right {
background: linear-gradient(to bottom right, #357987, #357987 49%, black 49%, black 51%, transparent 51%, transparent);
}
table {
width: 100% !important;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle;
border-spacing: 0;
border-collapse: collapse;
background-color: white;
color: white;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 2vw;
vertical-align: middle;
text-align: center;
padding: 0;
}
#routeTable td {
border: 0.2vw solid black;
font-size: 1.4vw;
text-align: center;
vertical-align: middle;
}
#routeTable th {
border: 0.2vw solid black;
font-size: 1.4vw;
text-align: center;
}
#routeTable tr {
border: 0.2vw solid black;
}
#routeTable table {
table-layout: fixed;
display: inline-block;
overflow-wrap: break-word;
max-width: 100%;
}
p {
display: block;
margin-block-start: 0.2vw;
margin-block-end: 0.2vw;
margin-inline-start: 0vw;
margin-inline-end: 0vw;
font-weight: bold;
padding-top: 0.5vh;
padding-bottom: 0.5vh;
color: black;
}
#toolbar {
display: flex;
justify-content: space-around;
background-color: #035869;
align-items: flex-start;
align-content: flex-start;
padding: 0.5vh 0;
}
#document_controls {
height: 30px;
padding: 0.5vh 0;
padding-left: 1vh;
}
#save,
#print,
#previous,
#next {
font-size: large;
font-family: Verdana;
background-color: #357987;
color: white;
text-align: center;
cursor: pointer;
height: 100%;
width: 15vw;
outline: none;
border: 2px solid white;
margin: 0 0.5vh;
}
#save:hover,
#print:hover,
#previous:hover,
#next:hover {
font-size: larger;
}
</style>
<body>
<div id="toolbar" class="noprint">
<div id="document_controls">
<button id="print" onclick="printPage()">Print</button>
</div>
</div>
<div id="Navlog" class="pagecontent" style="padding-bottom: 1cm;">
<section id="pageNavlog">
<table id="routeTable" style="margin-top: 1vw;">
<tbody>
<tr>
<td style="background-color: #035869; font-size: 2vw;" colspan="17">Navigationlog</td>
</tr>
</tbody>
</table>
<table id="routeTable" style="border: none; margin-top: -0.2vw;">
<tbody style="border: none;">
<tr>
<td style="background-color: #357987; width: 15%" colspan="3">Aircraft Registration:</td>
<td colspan="3"><textarea style="height: 1.5em; text-align: left; margin-left: 0.5vw; padding-top: 0.21em;"></textarea></td>
<td style="background-color: #357987; width: 15%" colspan="2">Date:</td>
<td colspan="3"><textarea style="height: 1.5em; text-align: left; margin-left: 0.5vw; padding-top: 0.21em;"></textarea></td>
<td style="background-color: #357987; width: 15%" colspan="3">Pilot in command:</td>
<td colspan="4"><textarea style="height: 1.5em; text-align: left; margin-left: 0.5vw; padding-top: 0.21em;"></textarea></td>
</tr>
</tbody>
</table>
</section>
</div>
</body>
<script>
var openNavlog = openPage('Navlog');
function openPage(page) {
// Declare all variables
var i, pagecontent;
// Get all elements with class="tabcontent" and hide them
pagecontent = document.getElementsByClassName("pagecontent");
for (i = 0; i < pagecontent.length; i++) {
pagecontent[i].style.display = "none";
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(page).style.display = "block";
}
function printPage() {
print('pageNavlog');
}
function print(section) {
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Navigationlog</title>');
//Print the Table CSS.
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write('<style type = "text/css">');
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head>');
//Print the DIV contents i.e. the HTML Table.
printWindow.document.write('<body>');
var divContents = document.getElementById(section).innerHTML;
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.print();
printWindow.close();;
}
</script>
</html>
Just giving a point, you are just selecting all innerHTML but not the values. So one of the easiest way is to just save the textarea values and assign it back while printing in a printWindow.
I just added the above words in programming sentence in the below code.
function print(section) {
var textArea1 = document.getElementById('1').value;
var textArea2 = document.getElementById('2').value;
var textArea3 = document.getElementById('3').value;
var printWindow = window.open('', '', 'height=600,width=800');
printWindow.document.write('<html><head><title>Navigationlog</title>');
//Print the Table CSS.
var table_style = document.getElementById("table_style").innerHTML;
printWindow.document.write('<style type = "text/css">');
printWindow.document.write(table_style);
printWindow.document.write('</style>');
printWindow.document.write('</head>');
//Print the DIV contents i.e. the HTML Table.
printWindow.document.write('<body>');
var divContents = document.getElementById(section).innerHTML;
printWindow.document.write(divContents);
printWindow.document.write('</body>');
printWindow.document.write('</html>');
printWindow.document.getElementById('1').value = textArea1;
printWindow.document.getElementById('2').value = textArea2;
printWindow.document.getElementById('3').value = textArea3;
printWindow.print();
printWindow.close();
}
I think it's not the best way. But it works very fine.
i have a form having three fields old,new and confirm.i have designed a javascript to check if all the fields are entered or not but unfortunately this is not working as desired.please tell me where i have done mistake.i am new to javascript
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body, div, h1, h2, h3, h4, h5, h6, p, img, dl,
dt, dd, ol, ul, li, table, tr, td, form, object, embed,
article, aside, command, details, fieldset,
figcaption, figure, footer, group, header, hgroup, legend{
margin: 0;
padding: 0;
border: 0;
}
html {
font: 82.5% verdana, helvetica, sans-serif;
background: #fff;
color: #333;
line-height: 1;
direction: ltr;
}
html, body {
position: absolute;
height: 100%;
min-width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.button {
min-width: 46px;
text-align: center;
color: #444;
font-size: 11px;
font-weight: bold;
height: 27px;
padding: 0 8px;
line-height: 27px;
border-radius: 2px;
transition: all 0.218s;
border: 1px solid #dcdcdc;
background-color: #f5f5f5;
cursor: default;
}
*+html .button {
min-width: 70px;
}
button.button,
input[type=submit].button {
height: f1f1f1px;
line-height: 29px;
vertical-align: bottom;
margin: 0;
}
.button:hover {
border: 1px solid #c6c6c6;
color: #333;
text-decoration: none;
transition: all 0.0s;
background-color: #f8f8f8;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.button:active {
background-color: #f6f6f6;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.button:visited {
color: #666;
}
.button-submit {
border: 1px solid #3079ed;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.1);
background-color: #4d90fe;
}
.button-submit:hover {
border: 1px solid #2f5bb7;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
}
button-submit:active {
background-color: #357ae8;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.footer-bar {
bottom: 0;
height: 35px;
width: 100%;
overflow: hidden;
}
.content {
padding: 0 44px;
}
.table{
padding: 0 55px
}
.header {
padding: 10px 20px 5px;
background:#00AAFF;
border: 1px solid #e5e5e5;
height:20px;
}
</style>
<script type="text/javascript">
function ccheck()
{
old=document.f1.old.value;
confirm=document.f1.confirm.value;
if(old=="" || old==null)
{
alert("Plz. Enter Your City");
document.f1.old.focus();
return false;
}
if(confirm=="" || confirm==null)
{
alert("Plz. Enter Your State");
document.f1.confirm.focus();
return false;
}
return true;
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body bgcolor="">
<form action="checkPassword.jsp" onSubmit="return ccheck()">
<div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="NewPsw"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm"></td>
</tr>
</table>
</div>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
A jsfiddle for the same http://jsfiddle.net/YCWu4/
Try using this to get your elements
old = document.getElementById('old').value;
confirm = document.getElementById('confirm').value;
And give them ids to reference instead of names:
<input id="old" name="old">
and
<input id="confirm" name="confirm">
Working DEMO
You need to name your form if you want to reference it by name using document.f1
<form name="f1" id="f1" action="checkPassword.jsp" onsubmit="return ccheck()">
working fiddle
Some other pointers:
Your inputs are not well formed. <input/>
Do not pollute the global namespace add var to old and confirm
You miss name="f1" on your form tag.
The problem I'm having is not being able to select the divs inside the 'menuItem' class divs. I've tried using the jQuery selector to select by both class and even ID, but every time I try to do anything with it, such as an animation, nothing happens. Is there some jQuery law I don't know about that prevents me from doing so?
$('.menu')
.hover( function() {
$(this).toggleClass('highlighted');
})
.click(function() {
$(this).parent().children('.menuItem').children('#wtf').slideDown();
});
Also tried these for the click(), but none of them work..
$('#wtf').slideDown();
$('.test').slideDown();
$(this).parent().find('.menuItem').each( function() { $(this).slideDown(); } );
$(this).parent().children('.menuItem').children().slideDown();
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div ID='wtf' class='test'>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
<div>
<div class='menu'>Products</div>
</div>
<div>
<div class='menu'>Contact</div>
</div>
</div>
body { font-size: 16px; }
.box {
background: blue;
border: 1px;
padding: 4 6 4 6;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
}
.box div {
float: left;
text-align:center;
}
.menu {
background: lightblue;
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-weight: bold;
font-family:'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid gray;
}
.highlighted {
background: lime;
color: navy;
}
.menuItem {
clear: left;
position: absolute;
margin-top: 30px;
}
.menuItem div {
display: none;
background: lightblue;
opacity: .7;
filter: alpha(opacity=.7);
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-size: 10px;
font-family: 'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid white;
clear: left;
}
Have you tried?
$(this+' > .menuItem div')
I applied a background color to your style and your jQuery selector wasn't selecting properly. I tried this and it changed the background color, but I don't have CSS in place for the visual of the slideDown() to work - you'll have to write your CSS up correctly.
$(this).siblings().find("#wtf").css("background-color","#cccccc").slideDown();