Prevent duplicate row on jquery append - javascript

I have this js for appending fields, checking blank fields, and to prevent duplicate values at rows. But it only works for checking blank fields. Does this code have any mismatch at placement or something else? Thanks.
<script>
count4 = 1;
function appendCertification(){
var certification = $('#certification').val();
var skillSector = $('#skillSector').val();
var issueDate = $('#issueDate').val();
var expirDdate = $('#expiryDate').val();
if(cerfication == "" || skillSector == "" || issueDate == "" || expiryDate == "") {
alert("please fill minimum 1 row");
return false;
}
for (var i = 0, row; row = document.getElementById("#certificationTable").rows[i]; i++) {
var fields = new Array();
for (var j = 0, col; col = row.cells[j]; j++) {
fields[j] = col.innerHTML;
}
if(certification == fields[0] && skillSector == fields[1] && issuedate == fields[2] && expireddate == fields[3]) {
alert("Duplicate row");
return false;
}
}
var field = "<tr><td>"+certification+"</td><td>"+skillSector+"</td><td>"+issueDate+"</td><td>"+expiryDate+"</td><input type='hidden' name='certificationVal[]' value='"+certification+"'><input type='hidden' name='sectorSkillVal[]' value='"+sectorSkill+"'><input type='hidden' name='issueDateVal[]' value='"+issueDate+"'><input type='hidden' name='expiryDateVal[]' value='"+expiryDate+"'></tr>";
$("#certificationTable tbody").append(field);
count++;
};
function clearform(){
$("#certificationTable tbody").html("");
};
</script>

not considering the mistyping of the variable names, document.getElementById use the id of the element without the #
so the error is in this row
for (var i = 0, row; row = document.getElementById("#certificationTable").rows[i]; i++) {
it should be
for (var i = 0, row; row = document.getElementById("certificationTable").rows[i]; i++) {

Related

Check and alert for the null value

I need to check for the null values and alert them if there are any before getting saved. I have used this code but I am not able to alert the null values instead it is getting saved . .
function fn_publish() {
var SessionNames = getParameterByName('SessionName');
var MenuType = getParameterByName('MenuType');
var Date = getParameterByName('ForDate');
var publish = "Y";
Dates = Date.split("-");
Date = Dates[1] + "/" + Dates[2] + "/" + Dates[0];
var rows = [];
cols = document.getElementById('product_table').rows[1].cells.length - 1;
table = document.getElementById('product_table');
for (var i = 1; i <= cols; i++) {
for (var j = 0, row; row = table.rows[j]; j++) {
if (j == 0) {
cust = row.cells[i].innerText;
alert(cust);
} else if (j == 1) {
catlg = row.cells[i].innerText;
alert(catlg);
} else {
if (typeof (row.cells[i]) != "undefined") {
if (row.cells[i].innerText != "") {
//alert(SessionNames+"::"+MenuType+"::"+Date+"::"+catlg+"::"+row.cells[0].innerText+"::"+row.cells[i].innerText+"::"+cust+"::"+publish);
fn_insert(SessionNames, MenuType, Date, catlg, row.cells[0].innerText, row.cells[i].innerText, cust, publish);
} else {
jAlert("Please select a product", "ok");
return false;
}
}
}
}
}
jAlert("Menu Published", "ok");
}
if (row.cells[i].innerText != "") {
May be the cells are containing empty space in that. Better trim ad then compare.
if (row.cells[i].innerText.trim() !== "") {
Also instead of innerText use textContent which is common in most modern browsers.
if (row.cells[i].textContent.trim() !== "") {

How to get whether the pressed key is backspace or not in JavaScript?

I have a input text which used to filter data in a table using the onkeyup event
<input id="NameFilterText" type="text" onkeyup="return filterDataRow('NameFilterText','Name'); return false;" /></td>
I'm calling this JavaScript function in the onkeyup to the filter data
function filterDataRow(field, name) {
var textBox = document.getElementById(field);
var columnName = name;
var table = document.getElementById('table1');
var headRow = table.rows[0];
var column = 0
var text = textBox.value;
for (var i = 0; i < headRow.cells.length; i++) {
var cellName = headRow.cells[i].innerHTML;
if (cellName == columnName) {
column = i;
break;
}
}
for (var i = 1; i < table.rows.length; i++) {
table.rows[i].style.display = 'table-row'; // execute only when pressing backspace
for (var v = 0; v < text.length; v++) {
var CurCell = table.rows[i].cells[column];
var CurCont = CurCell.innerHTML.replace(/<[^>]+>/g, "");
var reg = new RegExp(text + ".*", "i");
if (CurCont.match(reg) == null) {
table.rows[i].style.display = 'none';
}
}
}
return false;
}
I don't want to execute that commented line if the pressed key is not backspace. How can I do that ?
var input = document.getElementById('NameFilterText');
var keydown=0;
input.onkeydown = function() {
var key = event.keyCode || event.charCode;
if( key == 8 || key == 46 )
keydown=1;
return false;
};
Now in your code filterDataRow()
if(keydown=1){ do your thing. and set keydown = 0 again}
Hope it Helps !
First you need to change the onkeyup event to this:
<input ... onkeyup="filterDataRow('NameFilterText','Name');" />
Then inside the function edit the line you want to be executed only one time adding this if-statement:
if (window.event.keyCode == 8) table.rows[i].style.display = 'table-row';
I wrote a library called keysight that does this kind of thing for all keyboard keys:
node.addEventListener("keydown", function(event) {
var key = keysight(event).key
if(key === '\b') {
console.log("We got one!")
}
})

javascript check a box with value

I am trying to check boxes in JS. I wan't to only check when the value is equal to 0, if not don't check it. my code :
document.onreadystatechange = function check(e)
{
if (document.readyState === 'complete')
{
var inputElements = document.getElementsByTagName("input");
for(var i=0; i < inputElements.length; ++i)
{
if(document.getElementsByTagName("input")[i].value == "1")
{
document.getElementById("date").checked = false;
}
}
}
}
But it doesn't work. Can you help me?
thanks
What you are doing is, if the checkboxes have value of 1, then you are checking it. Make this change in the code and it should work. Also, you need to check if you are doing this on a checkbox and not on a radio or text:
if(document.getElementsByTagName("input")[i].value == 0 &&
document.getElementsByTagName("input")[i].getAttribute("type") == "checkbox")
{
document.getElementById("date").checked = true;
}
var eles = document.querySelectorAll("input[type='checkbox']");
var len = eles.length,
i = 0,
flag = true;
for (; i < len; i++) {
if (eles[i].value === "1") {
flag = false;
return;
}
}
if (flag) document.getElementById('date').checked = true;
If the value ( 0 or 1 ) is of an <input type='text'>, then change document.querySelectorAll("input[type='checkbox']"); to document.querySelectorAll("input[type='text']");

Javascript Function not working in firefox or safari

I am trying to display the sum of transaction at the bottom of the page.
function doTotal() {
var Stuff = document.getElementsByTagName("input");
var theTotal = new Number(0);
for (var i = 0; i < Stuff.length; i++) {
if (Stuff[i].getAttribute('type') == 'text') {
if ((Stuff[i].value != '') && (IsNumeric(Stuff[i].value) == true) && (Stuff[i].name.substr(0, 8) == 'txtValue')) {
theTotal = theTotal + parseFloat(Stuff[i].value);
}
}
}
document.getElementById("tdTotal").innerHTML = "R " + theTotal.toFixed(2);
frm.txtTotal.value = theTotal.toFixed(2);
//alert(theTotal);
}
EDIT:
Ofc Im stupid, it cant work since value from input is always string. So I change the condition. Now it should work:
function doTotal() {
var stuff = document.getElementsByTagName("input");
var theTotal = 0;
for (var i = 0; i < stuff.length; i++) {
if (stuff[i].getAttribute('type') == 'text') {
if ((stuff[i].value != '') && !isNaN(stuff[i].value) && (typeof stuff[i].name.substr(0, 8) === "string")) {
theTotal += parseFloat(stuff[i].value);
}
}
}
// document.getElementById("tdTotal").innerHTML = "R " + theTotal.toFixed(2);
// frm.txtTotal.value = theTotal.toFixed(2);
alert(theTotal);
}
Try it there: http://jsfiddle.net/windkiller/9dvRS/
EDIT2:
Debug it, so you can see what condition didnt pass wrong:
function doTotal() {
var stuff = document.getElementsByTagName("input");
var theTotal = 0;
var i = 0;
alert(stuff[i].getAttribute('type') == 'text');
alert(stuff[i].value != '');
alert(!isNaN(stuff[i].value));
alert(typeof stuff[i].name.substr(0, 8) === "string");
}

Mark unmark javascript?

I've got a function to select all checkboxes in a table:
<script type="text/javascript">
function checkAll() {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
elems[i].checked = true;
}
}
}
But I can't get it to uncheck them all if they are checked. How could I do that?
<th width='2%'>Mark</th>";
Also in javascript is it possible to rename "Mark" to "Un-Mark" if I execute checkAll()?
This should do both of the things u want:
function checkAll(obj) {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
if(elems[i].checked == true){
elems[i].checked = false;
}
else{
elems[i].checked = true;
}
}
}
if(obj.innerHTML == 'Mark') { obj.innerHTML = 'Unmark' }
else { obj.innerHTML = 'Mark' }
}
html:
<th width='2%'>Mark</th>";
1) why don't u use some js framework, like jQuery?
2) to remove checked, use elems[i].removeAttribute('checked') or set elems[i].checked = false;
3) to rename, you have to set it's innerHTML or innerText to Un-Mark
Add a little more logic to see if they're already checked. This will invert their current checked state.
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
if (!elems[i].checked) {
elems[i].checked = true;
}
else elems[i].checked = false;
}
}
If you just want to uncheck all, simply use:
elems[i].checked = false;
This will check them all regardless of their current state, or uncheck them all, depending on the current text of "Mark" or "Unmark".
<script type="text/javascript">
function checkAll(obj) {
var tab = document.getElementById("logs");
var elems = tab.getElementsByTagName("input");
var len = elems.length;
var state = obj.innerHTML == 'Mark';
for (var i = 0; i < len; i++) {
if (elems[i].type == "checkbox") {
elems[i].checked = state;
}
}
obj.innerHTML = state ? 'Mark' : 'Unmark';
}
And then the HTML changes to:
<th width='2%'>Mark</th>";
To uncheck, try:
elems[i].checked = false;
i sugest you use jquery, everything is easier.
with jquery you just have to do something like this (+/-):
$(function(){
$('a.ClassName').click(function(){
var oTbl = $('#tableID');
$('input[type="checkbox"]', oTbl).attr("checked", "checked")
});
})

Categories

Resources