HTML table rows navigate by keyboard in JQuery

HTML table rows navigate by keyboard in JQuery - javascript

I have a HTML table which is created by Ajax. Rendered markup of this table as below:
<table class="table" id="tbl_byKeyboard">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Customer</th>
<th>Discount</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="bid" value="122">
</td>
<td>2022-10-01</td>
<td>Customer 01</td>
<td>10%</td>
<td>1000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="123">
</td>
<td>2022-10-01</td>
<td>Customer 02</td>
<td>10%</td>
<td>2000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="124">
</td>
<td>2022-10-01</td>
<td>Customer 03</td>
<td>10%</td>
<td>3000.00</td>
</tr>
</tbody>
</table>
Using this table, basically I want to navigate the table row using 'up' and 'down' arrow key on keyboard. After selecting the right row, the user should be able to check the radio button (within the selected row) by pressing the enter key.
This is my jQuery code sofar :
$(document).ready(function() {
$(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
var inp = this.querySelector('input')
if (inp == null) return
if (e.target.tagName != "INPUT") {
inp.checked = !inp.checked
}
$('#tbl_byKeyboard tbody tr').removeClass('active');
$(this).addClass('active');
})
});
$(window).on('keydown', tbl_navigate)
function tbl_navigate(e) {
var $tbl = $('#tbl_byKeyboard');
var $cur = $('.active', $tbl).removeClass('active').first();
if (e.keyCode === 40) { //down
if ($cur.length) {
$cur.next().addClass('active');
} else {
$tbl.children().first().addClass('active');
}
} else if (e.keyCode == 38) { //up
if ($cur.length) {
$cur.prev().addClass('active');
} else {
$tbl.children().last().addClass('active');
}
} else if (e.keyCode == 13) { //enter
var $this = $cur;
var inp = $this.find('input')
if (inp == null) return
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
$('#tbl_byKeyboard tbody tr').removeClass('active');
$this.addClass('active');
}
}
}
Stack snippet:
$(document).ready(function() {
$(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
var inp = this.querySelector('input')
if (inp == null) return
if (e.target.tagName != "INPUT") {
inp.checked = !inp.checked
}
$('#tbl_byKeyboard tbody tr').removeClass('active');
$(this).addClass('active');
})
});
$(window).on('keydown', tbl_navigate)
function tbl_navigate(e) {
var $tbl = $('#tbl_byKeyboard');
var $cur = $('.active', $tbl).removeClass('active').first();
if (e.keyCode === 40) { //down
if ($cur.length) {
$cur.next().addClass('active');
} else {
$tbl.children().first().addClass('active');
}
} else if (e.keyCode == 38) { //up
if ($cur.length) {
$cur.prev().addClass('active');
} else {
$tbl.children().last().addClass('active');
}
} else if (e.keyCode == 13) { //enter
var $this = $cur;
var inp = $this.find('input')
if (inp == null) return
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
$('#tbl_byKeyboard tbody tr').removeClass('active');
$this.addClass('active');
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="tbl_byKeyboard">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Customer</th>
<th>Discount</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="bid" value="122">
</td>
<td>2022-10-01</td>
<td>Customer 01</td>
<td>10%</td>
<td>1000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="123">
</td>
<td>2022-10-01</td>
<td>Customer 02</td>
<td>10%</td>
<td>2000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="124">
</td>
<td>2022-10-01</td>
<td>Customer 03</td>
<td>10%</td>
<td>3000.00</td>
</tr>
</tbody>
</table>
My problem is, with this code I can navigate table rows using 'up' and 'down' arrow key, but enter key not working for me.
Hope somebody may help me to figure this out.

The problem is, that at the beginning of your keydown handler you remove the class active:
var $cur = $('.active', $tbl).removeClass('active').first();
But in the if for the Enter case you don't set that class again, when the input is checked:
if (inp.is(':checked')) {
inp.prop('checked', false);
}
Furthermore the manipulation of the class isn't necessary in the Enter case - it's only important for the Up and Down keys. Therefor you should remove the active class only in these two cases:
var $cur = $('.active', $tbl).first();
if (e.keyCode === 40) { //down
$cur.removeClass('active');
...
} else if (e.keyCode == 38) { //up
$cur.removeClass('active');
...
}
Because the removal for the Enter case isn't necessary, you can omit it there:
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
}
Working example:
i added a small line to focus the first radiobutton for demonstration:
$('#tbl_byKeyboard input[type=radio]').eq(0).focus();
$(document).ready(function() {
$('#tbl_byKeyboard input[type=radio]').eq(0).focus();
$(document).on('click', "#tbl_byKeyboard tbody tr", function(e) {
var inp = this.querySelector('input')
if (inp == null) return
if (e.target.tagName != "INPUT") {
inp.checked = !inp.checked
}
$('#tbl_byKeyboard tbody tr').removeClass('active');
$(this).addClass('active');
})
});
$(window).on('keydown', tbl_navigate)
function tbl_navigate(e) {
var $tbl = $('#tbl_byKeyboard');
var $cur = $('.active', $tbl).first();
if (e.keyCode === 40) { //down
$cur.removeClass('active');
if ($cur.length) {
$cur.next().addClass('active');
} else {
$tbl.children().first().addClass('active');
}
} else if (e.keyCode == 38) { //up
$cur.removeClass('active');
if ($cur.length) {
$cur.prev().addClass('active');
} else {
$tbl.children().last().addClass('active');
}
} else if (e.keyCode == 13) { //enter
var $this = $cur;
var inp = $this.find('input')
if (inp == null) return
if (inp.is(':checked')) {
inp.prop('checked', false);
} else {
inp.prop('checked', true);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="tbl_byKeyboard">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Customer</th>
<th>Discount</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="radio" name="bid" value="122">
</td>
<td>2022-10-01</td>
<td>Customer 01</td>
<td>10%</td>
<td>1000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="123">
</td>
<td>2022-10-01</td>
<td>Customer 02</td>
<td>10%</td>
<td>2000.00</td>
</tr>
<tr>
<td>
<input type="radio" name="bid" value="124">
</td>
<td>2022-10-01</td>
<td>Customer 03</td>
<td>10%</td>
<td>3000.00</td>
</tr>
</tbody>
</table>

Related

How to select and copy multiple <td> value on double click?

i want to select multiple and then copy (ctrl+c).in my code is
<table id="tbl1" border="1">
<tr>
<td>first</td>
<td>second</td>
</tr>
<tr>
<td>third</td>
<td>4th</td>
</tr>
<tr>
<td>5th</td>
<td>6th</td>
</tr>
</table>
my table will show like
______________
|first|second|
_____________
|third|4th |
_____________
|5th |6th |
______________
Here if i double click over "second" , "third" and "5th" then this 3 cells should be selected and then i will use ctrl+c to copy and paste this data in wordpad,i tried dblclick but it works only in firefox.

I did this snippet (tested: working on Chrome and Firefox):
function copyToClipboard(text) {
var $temp = $('<input>');
$('body').append($temp);
$temp.val(text).select();
document.execCommand('copy');
$temp.remove();
}
$(function($) {
var ctrlDown = false;
var ctrlKey = 17;
var cmdKey = 91;
var cKey = 67;
$(document).keydown(function(e) {
// if (CTRL + C)
if (ctrlDown && (e.keyCode == cKey)) {
copyToClipboard(selection.join(' '));
selection = [];
return false;
}
if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
ctrlDown = true;
}
}).keyup(function(e) {
if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
ctrlDown = false;
}
});
var selection = [];
$('#tbl1 td').dblclick(function() {
selection.push(this.innerHTML);
$('#copyingText').val(selection.join(', '));
});
});
td {
padding: 10px;
width: 50px;
background-color: #555;
text-align: center;
color: #fff;
border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl1" border="1">
<tr>
<td>first</td>
<td>second</td>
</tr>
<tr>
<td>third</td>
<td>4th</td>
</tr>
<tr>
<td>5th</td>
<td>6th</td>
</tr>
</table>
<hr>
<input type="text" id="copyingText" value="">
<input type="text" placeholder="paste text here">
References:
Detect CTRL+c.
Trigger CTRL+c.

Try adding event listner for double click like this
srcBox.addEventListener("dblclick", hiLite, false);

You can use .dblclick() to achieve this ( https://api.jquery.com/dblclick/ ). Then just use jQuery to select what you need.

How can I debug this validation error when I cannot seem to reproduce it?

I built a sign up form on my website that has been (seemingly) randomly erroring for about 3% of my users (just an estimate). The error disallows the user from signing up for my service, and they often have to call the office so that we can manually add them as a new customer. This costs us quite a bit of time on the phone, and potentially costs us business for those users that decide not to call in, and instead go to a competitor.
I have tried debugging this many times, and even rebuilt the sign up system this past year out of frustration, but I am still encountering the bug. I just don't have any more ideas on how to debug it, and was hoping someone had an idea about a new way to test why this might be happening (or force the error to happen for me), or a better way of handling it.
*I tried to trim down my code to just include the relevant pieces (they are long files), so please let me know if there is something else I need to include
EDIT: #Greg Watters suggested that I write shared functions which multiple 'blur' handlers can use to manage the state for multiple inputs (like student password and confirm student password). I will be trying that next, but if anyone else has additional ideas, I am all ears. UPDATE This has no change on the issue
EDIT2 I created an email which allows me to see which inputs are marked as "invalid" right after the user clicks submit on the form, but prior to actual button firing. The inputs that were marked "invalid" were seemingly random
EDIT 3 A friend suggested that it might be an autofill issue. Because I have triggered the validation with a blur event, and the autocomplete may not trigger this event. I have added redundant validation on the submission button to check if this may fix the problem
How the sign up form and validation work
All required inputs start with a class of "invalid"
When a user fills in the input, I validate it using js, and if everything is okay, I remove the class "invalid". If it is not validated, I display an error below the input, highlight the input in red, and keep the class "invalid"
Once the user presses "submit", I loop through every input on the form and check for a class of "invalid". If any input still contains the class "invalid", I display a message to fix the errors at the bottom of the form and highlight the relevant inputs in red. If no inputs contain the class "invalid", the form submits.
What happens during the error
User fills out each required input, and no validation errors appear. When I speak with them on the phone live during this process, every single person is positive they have filled out the form with valid information and have filled in all required inputs
User clicks submit, and an error appears at the bottom of the form asking them to fix errors, but no inputs are highlighted red, and no extra input errors are displayed.
Form Validation
$("#signUp-submit").live("click", function() {
$(".signUpError").empty();
var error = false;
$(".signUpTextbox").each(function() {
if($(this).hasClass("invalid")) {
$(".signUpError").text('Please correct errors');
$(".invalid").css("background-color", "#ffcccc");
$('html, body').animate({scrollTop:575}, 'slow');
error = true;
return false;
}
});
if (error == false) {
var customerType = $("#signUp-customerType").val();
var school = $("#signUp-school").val();
var studentEmail = $("#signUp-studentEmail").val();
var studentFirstName = $("#signUp-studentFirstName").val();
var studentLastName = $("#signUp-studentLastName").val();
var studentPhone = $("#signUp-studentPhone").val();
var studentPhoneCarrier = $("#signUp-studentPhoneCarrier").val();
var studentAddress1 = $("#signUp-studentAddress1").val();
var studentAddress2 = $("#signUp-studentAddress2").val();
var parentEmail = $("#signUp-parentEmail").val();
var parentAddress1 = $("#signUp-parentAddress1").val();
var parentAddress2 = $("#signUp-parentAddress2").val();
var parentCity = $("#signUp-parentCity").val();
var parentState = $("#signUp-parentState").val();
var parentZip = $("#signUp-parentZip").val();
var parentPhone = $("#signUp-parentPhone").val();
var referral = $("#signUp-referral").val();
if (customerType == "student") {
var studentPassword = $("#signUp-studentPassword").val();
}
else if (customerType == "parent") {
var parentPassword = $("#signUp-parentPassword").val();
var parentFirstName = $("#signUp-parentFirstName").val();
var parentLastName = $("#signUp-parentLastName").val();
}
$(".footerSignUpContent").html('<div class = "loadingAnimationFooter" id = "loadingAnimation-FooterSignUp"></div>');
$.post(
'ajax/signUp.php',
{
'customerType': customerType,
'school': school,
'studentEmail': studentEmail,
'studentPassword': studentPassword,
'studentFirstName': studentFirstName,
'studentLastName': studentLastName,
'studentPhone': studentPhone,
'studentPhoneCarrier': studentPhoneCarrier,
'studentAddress1': studentAddress1,
'studentAddress2': studentAddress2,
'parentAddress1': parentAddress1,
'parentAddress2': parentAddress2,
'parentCity': parentCity,
'parentState': parentState,
'parentZip': parentZip,
'parentPassword': parentPassword,
'parentFirstName': parentFirstName,
'parentLastName': parentLastName,
'parentEmail': parentEmail,
'parentPhone': parentPhone,
'referral': referral
},
function (response) {
$("#footerTitle-SignUp").html("Thanks!");
$(".footerSignUpContent").html(response);
}
);
}
})
Individual input validations
$("#signUp-studentEmail").live("blur", function() {
$(this).closest("tbody").find(".errorPlaceholder").empty();
var studentEmail = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(studentEmail != "") {
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test($(this).val())) {
$(this).closest("tbody").find(".errorPlaceholder").text("Please enter a valid email");
$(this).css("background-color", "#ffcccc");
}
else {
$.post(
'ajax/signUpValidateEmail.php',
{
'email': studentEmail
},
function (response) {
$("#signUp-studentEmail").closest("tbody").find(".errorPlaceholder").html(response);
var notValid = $("#signUpValidateEmail").val();
if (notValid == 0) {
$("#signUp-studentEmailRepeat").addClass("invalid");
$("#signUp-studentEmailRepeat").closest("tbody").find(".errorPlaceholder").empty();
$("#signUp-studentEmailRepeat").css("background-color", "white");
var studentEmailRepeat = $("#signUp-studentEmailRepeat").val();
if (studentEmail != studentEmailRepeat) {
$("#signUp-studentEmailRepeat").closest("tbody").find(".errorPlaceholder").text("Emails do not match");
$("#signUp-studentEmailRepeat").css("background-color", "#ffcccc");
}
else {
$("#signUp-studentEmailRepeat").removeClass("invalid");
}
$("#signUp-studentEmail").removeClass("invalid");
}
else {
$("#signUp-studentEmail").css("background-color", "#ffcccc");
}
}
);
}
}
else {
$("#signUp-studentEmail").css("background-color", "#ffcccc");
}
});
$("#signUp-studentEmailRepeat").live("blur", function() {
$(this).closest("tbody").find(".errorPlaceholder").empty();
var studentEmailRepeat = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(studentEmailRepeat != "") {
var studentEmail = $("#signUp-studentEmail").val();
if (studentEmail != studentEmailRepeat) {
$(this).closest("tbody").find(".errorPlaceholder").text("Emails do not match");
$(this).css("background-color", "#ffcccc");
}
else {
$(this).removeClass("invalid");
}
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-parentEmail").live("blur", function() {
$(this).closest("tbody").find(".errorPlaceholder").empty();
var parentEmail = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(parentEmail != "") {
var emailReg = /^([\w-\.]+#([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test($(this).val())) {
$(this).closest("tbody").find(".errorPlaceholder").text("Please enter a valid email");
$("#signUp-parentEmail").css("background-color", "#ffcccc");
}
else {
$("#signUp-parentEmailRepeat").addClass("invalid");
$("#signUp-parentEmailRepeat").closest("tbody").find(".errorPlaceholder").empty();
$("#signUp-parentEmailRepeat").css("background-color", "white");
var parentEmailRepeat = $("#signUp-parentEmailRepeat").val();
if (parentEmail != parentEmailRepeat) {
$("#signUp-parentEmailRepeat").closest("tbody").find(".errorPlaceholder").text("Emails do not match");
$("#signUp-parentEmailRepeat").css("background-color", "#ffcccc");
}
$(this).removeClass("invalid");
}
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-parentEmailRepeat").live("blur", function() {
$(this).closest("tbody").find(".errorPlaceholder").empty();
var parentEmailRepeat = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(parentEmailRepeat != "") {
var parentEmail = $("#signUp-parentEmail").val();
if (parentEmail != parentEmailRepeat) {
$(this).closest("tbody").find(".errorPlaceholder").text("Emails do not match");
$(this).css("background-color", "#ffcccc");
}
else {
$(this).removeClass("invalid");
}
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-studentFirstName").live("blur", function() {
var studentFirstName = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(studentFirstName != "") {
$(this).removeClass("invalid");
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-studentLastName").live("blur", function() {
var studentLastName = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(studentLastName != "") {
$(this).removeClass("invalid");
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-studentPhone").live("blur", function() {
$(this).closest("tbody").find(".errorPlaceholder").empty();
var studentPhone = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(studentPhone != "") {
var phoneReg = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(!phoneReg.test($(this).val())) {
$(this).closest("tbody").find(".errorPlaceholder").text("Please enter a valid phone number");
$(this).css("background-color", "#ffcccc");
}
else {
$(this).removeClass("invalid");
}
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-studentAddress1").live("blur", function() {
var studentAddress = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(studentAddress != "") {
$(this).removeClass("invalid");
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-parentAddress1").live("blur", function() {
var parentAddress1 = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(parentAddress1 != "") {
$(this).removeClass("invalid");
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-parentCity").live("blur", function() {
var parentCity = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(parentCity != "") {
$(this).removeClass("invalid");
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-parentState").live("blur", function() {
var parentState = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(parentState != "") {
$(this).removeClass("invalid");
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-parentZip").live("blur", function() {
var parentZip = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(parentZip != "") {
$(this).removeClass("invalid");
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-studentPassword").live("blur", function() {
$(this).closest("tbody").find(".errorPlaceholder").empty();
var studentPassword = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(studentPassword != "") {
var passwordReg = /^.*(?=.{8,})(?=.*[a-zA-Z]).*$/;
if(!passwordReg.test($(this).val())) {
$(this).closest("tbody").find(".errorPlaceholder").text("Password must be at least 8 characters");
$(this).css("background-color", "#ffcccc");
}
else {
$("#signUp-studentPasswordRepeat").addClass("invalid");
$("#signUp-studentPasswordRepeat").closest("tbody").find(".errorPlaceholder").empty();
$("#signUp-studentPasswordRepeat").css("background-color", "white");
var studentPasswordRepeat = $("#signUp-studentPasswordRepeat").val();
if (studentPassword != studentPasswordRepeat) {
$("#signUp-studentPasswordRepeat").closest("tbody").find(".errorPlaceholder").text("Passwords do not match");
$("#signUp-studentPasswordRepeat").css("background-color", "#ffcccc");
}
$(this).removeClass("invalid");
}
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-studentPasswordRepeat").live("blur", function() {
$(this).closest("tbody").find(".errorPlaceholder").empty();
var studentPasswordRepeat = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(studentPasswordRepeat != "") {
var studentPassword = $("#signUp-studentPassword").val();
if (studentPassword != studentPasswordRepeat) {
$(this).closest("tbody").find(".errorPlaceholder").text("Passwords do not match");
$(this).css("background-color", "#ffcccc");
}
else {
$("#signUp-studentPasswordRepeat").removeClass("invalid");
}
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-parentPassword").live("blur", function() {
$(this).closest("tbody").find(".errorPlaceholder").empty();
var parentPassword = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(parentPassword != "") {
var passwordReg = /^.*(?=.{8,})(?=.*[a-zA-Z]).*$/;
if(!passwordReg.test($(this).val())) {
$(this).closest("tbody").find(".errorPlaceholder").text("Password must be at least 8 characters");
$(this).css("background-color", "#ffcccc");
}
else {
$(this).removeClass("invalid");
}
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-parentPasswordRepeat").live("blur", function() {
$(this).closest("tbody").find(".errorPlaceholder").empty();
var parentPasswordRepeat = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(parentPasswordRepeat != "") {
var parentPassword = $("#signUp-parentPassword").val();
if (parentPassword != parentPasswordRepeat) {
$(this).closest("tbody").find(".errorPlaceholder").text("Passwords do not match");
$(this).css("background-color", "#ffcccc");
}
else {
$("#signUp-parentPasswordRepeat").addClass("invalid");
$("#signUp-parentPasswordRepeat").closest("tbody").find(".errorPlaceholder").empty();
$("#signUp-parentPasswordRepeat").css("background-color", "white");
var parentPasswordRepeat = $("#signUp-parentPasswordRepeat").val();
if (parentPassword != parentPasswordRepeat) {
$("#signUp-parentPasswordRepeat").closest("tbody").find(".errorPlaceholder").text("Passwords do not match");
$("#signUp-parentPasswordRepeat").css("background-color", "#ffcccc");
}
$("#signUp-parentPasswordRepeat").removeClass("invalid");
}
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-parentFirstName").live("blur", function() {
var parentFirstName = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(parentFirstName != "") {
$(this).removeClass("invalid");
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-parentLastName").live("blur", function() {
var parentLastName = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(parentLastName != "") {
$(this).removeClass("invalid");
}
else {
$(this).css("background-color", "#ffcccc");
}
});
$("#signUp-parentPhone").live("blur", function() {
$(this).closest("tbody").find(".errorPlaceholder").empty();
var parentPhone = $(this).val();
$(this).addClass("invalid");
$(this).css("background-color", "white");
if(parentPhone != "") {
var phoneReg = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(!phoneReg.test($(this).val())) {
$(this).closest("tbody").find(".errorPlaceholder").text("Please enter a valid phone number");
$(this).css("background-color", "#ffcccc");
}
else {
$(this).removeClass("invalid");
}
}
else {
$(this).css("background-color", "#ffcccc");
}
});
HTML of form
<table class="signUpTable">
<tbody>
<tr>
<td class="signUpTextboxTitle">Email*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-studentEmail" placeholder="student email">
</td>
</tr>
<tr>
<td></td>
<td class="errorPlaceholder"></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">Repeat Email*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-studentEmailRepeat" placeholder="repeat email">
</td>
</tr>
<tr>
<td></td>
<td class="errorPlaceholder"></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">Password*</td>
<td class="signUpTextboxCell">
<input type="password" class="invalid signUpTextbox" id="signUp-studentPassword" placeholder="password">
</td>
</tr>
<tr>
<td></td>
<td class="errorPlaceholder"></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">Repeat Password*</td>
<td class="signUpTextboxCell">
<input type="password" class="invalid signUpTextbox" id="signUp-studentPasswordRepeat" placeholder="repeat password">
</td>
</tr>
<tr>
<td></td>
<td class="errorPlaceholder"></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">First Name*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-studentFirstName" placeholder="first name">
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">Last Name*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-studentLastName" placeholder="last name">
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">Cell Phone*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-studentPhone" placeholder="cell phone">
</td>
</tr>
<tr>
<td></td>
<td class="errorPlaceholder"></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">Phone Carrier</td>
<td class="signUpTextboxCell">
<input type="text" class="signUpTextbox" id="signUp-studentPhoneCarrier" placeholder="phone carrier">
</td>
</tr>
</tbody>
<tr>
<td colspan="2"><hr></hr></td>
</tr>
<tbody>
<tr>
<td colspan="2" class="signUpInstructions">Your local address must be within the city of <?php echo $footerLocation; ?>
</td>
</tr>
<tr>
<td class="signUpTextboxTitle">Student Address*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-studentAddress1" placeholder="student address 1">
<br />
<input type="text" class="signUpTextbox" id="signUp-studentAddress2" placeholder="student address 2">
</td>
</tr>
</tbody>
<tr>
<td colspan="2"><hr></hr></td>
</tr>
<tbody>
<tr>
<td class="signUpTextboxTitle">Parent Email*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-parentEmail" placeholder="parent email">
</td>
</tr>
<tr>
<td></td>
<td class="errorPlaceholder"></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">Repeat Email*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-parentEmailRepeat" placeholder="repeat parent email">
</td>
</tr>
<tr>
<td></td>
<td class="errorPlaceholder"></td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">Permanent or Parent Address*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-parentAddress1" placeholder="parent address 1">
<br />
<input type="text" class="signUpTextbox" id="signUp-parentAddress2" placeholder="parent address 2">
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">City*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-parentCity" placeholder="city">
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">State*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-parentState" placeholder="state">
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="signUpTextboxTitle">Zip*</td>
<td class="signUpTextboxCell">
<input type="text" class="invalid signUpTextbox" id="signUp-parentZip" placeholder="zip">
</td>
</tr>
<tr>
<td colspan="2" class="signUpInstructions">Parents use their own email address and password to login to a linked account. We will email them details.</td>
</tr>
</tbody>
<tr>
<td colspan="2"><hr></hr></td>
</tr>
<tbody>
<tr>
<td class="signUpTextboxTitle">How did you head about us?</td>
<td class="signUpTextboxCell">
<input type="text" class="signUpTextbox" id="signUp-referral" placeholder="referral">
</td>
</tr>
</tbody>
<tr>
<td colspan="2"><hr></hr></td>
</tr>
<tr>
<td class="signUpInstructions">*required</td>
</tr>
<tr>
<td colspan="2"><input type = "submit" class = "toolbarButton footerMiddleAlignRight" id = "signUp-submit" value = "Sign Up"></td>
</tr>
<tr>
<td colspan="2" class="signUpError"></td>
</tr>
<tr>
<td colspan="2"><input type = "text" class = "hiddenInput" id = "signUp-customerType" value = "<?php echo $customerType; ?>"></td>
</tr>
<tr>
<td colspan="2"><input type = "text" class = "hiddenInput" id = "signUp-school" value = "<?php echo $school; ?>"></td>
</tr>
</table>

Here's a hypothesis: most of the blur handlers remove the invalid class from their elements "immediately" (i.e., synchronously within the event handler). But there's one that doesn't: the #signUp-studentEmail handler launches a POST request and only removes invalid in the AJAX success function. If the user clicks Sign Up quickly after editing their email address (before that AJAX completes), the order of events may look like this:
click handler runs, sees invalid on the email textbox, reports the error.
AJAX completes, clears invalid from the textbox.
Thus the user would see an error, but no textboxes would be red.
If you can't reproduce this simply by editing the email field last and then clicking Sign Up, it may help to add a delay to the AJAX - either by delaying its launch with setTimeout, or by adding a delay to signUpValidateEmail.php on the server.

Not getting input inside td with jQuery?

I have a problem not getting the <input> inside a specified <td>. Through jQuery, I want once an "input search" entered, get just those <tr> that have these entries.Then when the input is empty return all the entries.
Here is my code :
<table id="hosts">
<tr>
<th>First</th>
<th>Second</th>
</tr>
<tr>
<td id="host"><input type="text" id="inputhost" value="214215" size="16"></td>
<td id="rand"><input type="text" id="inputrand" value="442" size="16"></td>
</tr>
<tr>
<td id="host"><input type="text" id="inputhost" value="1252512" size="16"></td>
<td id="rand"><input type="text" id="inputrand" value="556" size="16"></td>
</tr>
<tr>
<td id="host"><input type="text" id="inputhost" value="2114" size="16"></td>
<td id="rand"><input type="text" id="inputrand" value="4666" size="16"></td>
</tr>
<tr>
<td id="host"><input type="text" id="inputhost" value="3245466" size="16"></td>
<td id="rand"><input type="text" id="inputrand" value="22654" size="16"></td>
</tr>
<tr>
<td id="host"><input type="text" id="inputhost" value="24588" size="16"></td>
<td id="rand"><input type="text" id="inputrand" value="54877" size="16"></td>
</tr>
</table>
<br />
<input type="text" id="search" placeholder=" live search"></input>
and this is my jQuery code:
function removeHighlighting(highlightedElements) {
highlightedElements.each(function () {
var element = $(this);
element.replaceWith(element.html());
})
}
function addHighlighting(element, textToHighlight) {
var text = element.text();
var highlightedText = '<em>' + textToHighlight + '</em>';
var newText = text.replace(textToHighlight, highlightedText);
element.html(newText);
}
$("#search").on("keyup", function () {
var value = $(this).val();
removeHighlighting($("table tr em"));
$("#hosts tr").each(function (index) {
if (index !== 0) {
$row = $(this);
var $host = $row.find("#host input#inputhost");
var $dest = $row.find("#rand input#inputrand");
var host_id = $host.text();
var dest_id = $dest.text();
var hostIndex = host_id.indexOf(value);
var destIndex = dest_id.indexOf(value);
if ((hostIndex == -1) && (destIndex == -1)) {
$row.hide();
}
else if ((hostIndex != -1) && (destIndex != -1)) {
addHighlighting($host, value);
addHighlighting($dest, value);
$row.show();
}
else if (hostIndex != -1) {
addHighlighting($host, value);
$row.show();
}
else {
addHighlighting($dest, value);
$row.show();
}
}
});
});

Duplicate IDs! You don't really need them; remove them and then your code will be:
var $host = $row.find("td:first input");
var $dest = $row.find("td:eq(1) input");
UPDATE
You also have to update your code to:
var host_id = $host.val();
var dest_id = $dest.val();
DEMO

You cant give Id like that. Id should be unique. change them to class. then it will work. Then your selector will be
$(this).find(".host input.inputhost")

Cannot extract data from TD if there is span in front

I need your help.
Because of the way IE7 chooses to ignore the TD: whitespace: nowrap, I am forced to put and use spans in front of my TD's so here's the delema. When I click on a table row that has no spans in between the td's, the coding is able to extract the data and highlight the row.
However, when I introduce a span in between my td's and click to select a single cell in the table row with the spans's I get the following error: "cells.0 is null or not an object." I know that if I click a little bit off the side of the table cell it works, but I need to be able to also click on the <TD> and <SPAN> areas and have the code work.
Since I am making a table that will have all <span></span>'s in between all the <TD>'s how can the existing coding be reformatted to accomodate the difference from <td>data</td> to <td><span>data</span></td>?
No jQuery please.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#data tr.normal td {
color: #235A81;
background-color: white;
}
#data tr.highlighted td {
color: #FFFFFF;
background-color: #235A81;
}
</style>
<script type='text/javascript'>
function test() {
var table = document.getElementById("data");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh
tbody.onclick = function (e) {
e = e || window.event;
var td = e.target || e.srcElement
var row = td.parentNode;
if (ishigh&&ishigh!=row){
ishigh.className='';
}
row.className = row.className==="highlighted" ? "" : "highlighted";
ishigh=row;
getdata(row)
}
document.onkeydown = function(e){
e = e || event;
var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
if(code === 38){ //up arraow
newhigh = rowindex(ishigh) - 2;
if(!ishigh || newhigh < 0){return GoTo('data', rowslim);}
return GoTo('data', newhigh);
} else if (code === 40){ //down arrow
newhigh = rowindex(ishigh);
if(!ishigh || newhigh > rowslim){return GoTo('data', 0);}
return GoTo('data', newhigh);
}
}
function GoTo(id,nu){
var obj=document.getElementById(id),
trs=obj.getElementsByTagName('TR');
nu = nu + 1;
if (trs[nu]){
if (ishigh&&ishigh!=trs[nu]){
ishigh.className='';
}
trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
ishigh=trs[nu];
}
getdata(trs[nu]);
}
function rowindex(row){
var rows = table.rows, i = rows.length;
while(--i > -1){
if(rows[i] === row){return i;}
}
}
function getdata(row) {
document.getElementById('firstname').value = row.cells[0].innerHTML;
document.getElementById('lastname').value = row.cells[1].innerHTML;
document.getElementById('age').value = row.cells[2].innerHTML;
document.getElementById('total').value = row.cells[3].innerHTML;
document.getElementById('discount').value = row.cells[4].innerHTML;
document.getElementById('diff').value = row.cells[5].innerHTML;
find_option('fname',row.cells[0].innerHTML)
}
}//end of nested function
function find_option(id,value) {
var sel = document.getElementById(id)
for (var i = 0; i < sel.length; i++){
//alert(sel.options[i].text+" "+sel.options[i].value)
if (sel.options[i].value == value) {
sel.selectedIndex = i;
return
}
}
}
</script>
</head>
<body>
<table id="data" cellspacing="1" border="1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>peter</span></td>
<td><span>parker</span></td>
<td><span>28</span></td>
<td><span>9.99</span></td>
<td><span>20.3%</span></td>
<td><span>+3</span></td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td>-7</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>15.89</td>
<td>44.2%</td>
<td>-15</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td>+19</td>
</tr>
<tr>
<td>benjamin</td>
<td>evans</td>
<td>56</td>
<td>153.19</td>
<td>23%</td>
<td>+9</td>
</tr>
</tbody>
</table>
<br>
Firstname is:
<input type="text" id="firstname" />
<br>Lastname is:
<input type="text" id="lastname" />
<br>Age is:
<input type="text" id="age" />
<br>Total is:
<input type="text" id="total" />
<br>Discount is:
<input type="text" id="discount" />
<br>Diff is:
<input type="text" id="diff" />
<br>
<input type="button" value="testme" onclick="test()">
<br><br>
<select id="fname">
<option value="bruce">bruce</option>
<option value="clark">clark</option>
<option value="benjamin">benjamin</option>
</select>
</body>
</html>

Change this line:
var row = td.parentNode;
to:
var row = (td.tagName == "DIV") ? td.parentNode.parentNode : td.parentNode;

You can look at the elemet's tag name and determine whether the user has clicked on a TD or a SPAN, then adjust select the element's parent (the TD) if you have a span.
var td = e.target || e.srcElement
alert(td.tagName)
Alternately, you can add a CSS class name to all of your SPANS and then check to see if the selected element has that class name. If it does, it's a SPAN, if it doesn't, it's a TD.
I would also suggest using a DIV, not a SPAN.

Populate input boxes based on the clicked/scrolled row in table

I need your help.
With the help of existing javascript experts, I was able to create a table where a user could scoll to (using their up and down arrow keys) as well as to allow a user click on a row to select and highlight it.
Now comes time where i'd like to modify my existing function such that, whenever the user clicks on or uses their arrow keys to navigate to the selected row in the table, id like to pull the information (data) from the row and use it to populate the list of input boxes below. How could the javascript coding be modified so as to allow me to do this?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mstrTable tr.normal td {
color: #235A81;
background-color: white;
}
#mstrTable tr.highlighted td {
color: #FFFFFF;
background-color: #235A81;
}
</style>
<script type='text/javascript'>
function test() {
var table = document.getElementById("mstrTable");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];
var ishigh;
tbody.onclick = function (e) {
e = e || window.event;
var td = e.target || e.srcElement
var row = td.parentNode;
if (ishigh&&ishigh!=row){
ishigh.className='';
}
row.className = row.className==="highlighted" ? "" : "highlighted";
ishigh=row;
}
document.onkeydown = function(e){
e = e || event;
var code = e.keyCode, rowslim = table.rows.length - 2, newhigh;
if(code === 38){ //up arraow
newhigh = rowindex(ishigh) - 2;
if(!ishigh || newhigh < 0){return GoTo('mstrTable', rowslim);}
return GoTo('mstrTable', newhigh);
} else if (code === 40){ //down arrow
newhigh = rowindex(ishigh);
if(!ishigh || newhigh > rowslim){return GoTo('mstrTable', 0);}
return GoTo('mstrTable', newhigh);
}
}
function GoTo(id,nu){
var obj=document.getElementById(id),
trs=obj.getElementsByTagName('TR');
nu = nu + 1;
if (trs[nu]){
if (ishigh&&ishigh!=trs[nu]){
ishigh.className='';
}
trs[nu].className = trs[nu].className=="highlighted" ? "" : "highlighted";
ishigh=trs[nu];
}
}
function rowindex(row){
var rows = table.rows, i = rows.length;
while(--i > -1){
if(rows[i] === row){return i;}
}
}
}//end of nested function
</script>
</head>
<body>
<table id="mstrTable" cellspacing="1" border="1">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>diff</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>9.99</td>
<td>20.3%</td>
<td>+3</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>19.99</td>
<td>25.1%</td>
<td>-7</td>
</tr>
<tr>
<td>clark</td>
<td>kent</td>
<td>18</td>
<td>15.89</td>
<td>44.2%</td>
<td>-15</td>
</tr>
<tr>
<td>bruce</td>
<td>almighty</td>
<td>45</td>
<td>153.19</td>
<td>44%</td>
<td>+19</td>
</tr>
<tr>
<td>bruce</td>
<td>evans</td>
<td>56</td>
<td>153.19</td>
<td>23%</td>
<td>+9</td>
</tr>
</tbody>
</table>
<br>
Firstname is:
<input type="text" id="firstname" />
<br>Lastname is:
<input type="text" id="lastname" />
<br>Age is:
<input type="text" id="age" />
<br>Total is:
<input type="text" id="total" />
<br>Discount is:
<input type="text" id="discount" />
<br>Diff is:
<input type="text" id="diff" />
<br>
<input type="button" value="testme" onclick="test()">
</body>
</html>

You can write another function to populate necessary fields. Example:
function populateFields(row) {
el('firstname').value = row.cells[0].innerHTML;
el('lastname').value = row.cells[1].innerHTML;
el('age').value = row.cells[2].innerHTML;
el('total').value = row.cells[3].innerHTML;
el('discount').value = row.cells[4].innerHTML;
el('diff').value = row.cells[5].innerHTML;
}
// el() is shortcut for document.getElementById
Where you pass corresponding row to the function to get data from.
http://jsfiddle.net/dfsq/HDu8n/

We Keep Coding

JavaScript is the programming language of the Web.

HTML table rows navigate by keyboard in JQuery - javascript

Related

How to select and copy multiple <td> value on double click?

How can I debug this validation error when I cannot seem to reproduce it?

Not getting input inside td with jQuery?

Cannot extract data from TD if there is span in front

Populate input boxes based on the clicked/scrolled row in table

Categories

Resources