So I have a code with check boxes and I need a suggestion for a function to get data from database if the check box is checked. The table name for the database is Shifliigid and the column name which data I use in the check box is shiffer. So any suggestions would be nice (English isn't my first or even second language, so don't be mad for the short and shady explanation)
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
td_tekst.innerHTML="Motoorika";
var td = document.createElement("td");
td.style.width = "370px";
var input = document.createElement("textarea");
//input.type = "text";
input.name = "//funktsioonide hindamine/funktsioon[" + count + "]/motoorika";
input.value = rowData.motoorika.replace(/<br\/>/g, "\r\n");
input.className = "txt_left";
input.style.width = "368px";
input.style.fontSize = "9pt";
var nodeMotoorika = input;
addChangeListener(input);
td.appendChild(input);
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
//This is the part that makes the checkboxes
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
var td = document.createElement("td");
var echeckbox = document.createElement("input");
echeckbox.type="checkbox";
echeckbox.name = "//funktsioonide hindamine/funktsioon[" + count + "]/nagemine/vahend_0301";
td.appendChild(echeckbox);
td.innerHTML+="käeprotees/-ortoos";
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
td_tekst.innerHTML="Liikumine";
var td = document.createElement("td");
td.style.width = "370px";
var input = document.createElement("textarea");
//input.type = "text";
input.name = "//funktsioonide hindamine/funktsioon[" + count + "]/liikumine";
input.value = rowData.liikumine.replace(/<br\/>/g, "\r\n");
input.className = "txt_left";
input.style.width = "368px";
input.style.fontSize = "9pt";
var nodeLiikumine = input;
addChangeListener(input);
td.appendChild(input);
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
//This is the part that makes the checkboxes
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
var td = document.createElement("td");
var echeckbox = document.createElement("input");
echeckbox.type="checkbox";
echeckbox.name = "//funktsioonide hindamine/funktsioon[" + count + "]/nagemine/vahend_0302";
td.appendChild(echeckbox);
td.innerHTML+="jalaprotees/-ortoos";
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
There is no JS "function to get data from database".
You will have to choose a backend technology to access the database. For example PHP.
Use ajax calls to get the data from database using PHP or asp.
You can check if a particular checkbox is checked using the checked property of DOM.
Related
I'm trying to create a search datalist with DOMs, and populating the datalist with options from allCardsArray. I know that the option.value is working, but none of the options are being appended to the datalist. Below is the simple table I'm trying to make. I appreciate the help.
function generate_topnav(lowerCaseHeroName, allCardsArray){
var body = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
var row = document.createElement("tr");
var cell1 = document.createElement("td");
var database = document.createTextNode("OverRealm Card Database")
database.id = 'database';
cell1.appendChild(database);
row.appendChild(cell1);
var cell2 = document.createElement('td');
var input = document.createElement('input');
input.style.fontSize = '18pt';
input.style.height = '56pt';
input.style.width = '300px';
input.setAttribute('placeholder', ' Search for a card...');
input.setAttribute = ('type', 'text');
input.id = 'minionSearch';
input.setAttribute = ('list', 'cardSearch');
input.onchange = function() {
redirect(value);
};
cell2.appendChild(input);
var datalist = document.createElement('datalist');
datalist.id = 'cardSearch';
//THIS IS WHERE I'M TRYING TO POPULATE OPTIONS IN DATALIST
allCardsArray.forEach(function(item){
var option = document.createElement('option');
option.value = item;
datalist.appendChild(option);
});
input.appendChild(datalist);
row.appendChild(cell2);
tblBody.appendChild(row);
tbl.appendChild(tblBody);
body.appendChild(tbl);}
I originally did this in HTML and it worked and it looked like this:
<input style="font-size:18pt; height:56px; width:300px;" type="text" id="minionSearch" list="cardSearch" placeholder=" Search for a card..." onchange="javascript:redirect(value)">
<datalist id="cardSearch"></datalist>
<script>
var list = document.getElementByID("cardSearch");
allCardsArray.forEach(function(item){
var option = document.createElement('option');
option.value = item;
list.appendChild(option);
});
</script>
I'm curious as to why my DOMs version isn't working.
input.setAttribute = ('type', 'text'); should be input.setAttribute('type', 'text'); and input.setAttribute = ('list', 'cardSearch'); should be input.setAttribute('list', 'cardSearch');
The <option> elements are being appended to <datalist> element. The issue is that JavaScript at Question does not set .textContent of created <option> element.
While i click the Add Row button it showing error. I want to append a new 'tr' of every time i click add row button. the each td must contain, checkbox, firstname, lastname, email, mobile edit & save.
i want to save the values if i click save button..
and edit button to edit the fields.
Checkbox is to select the multiple rows and delete the entire row.
Can someone please help me to do this.. thanks in advance.
var form = document.createElement('form');
document.body.appendChild(form);
var table = document.createElement('table');
table.setAttribute("id","myTable");
form.appendChild(table);
var btnClick = document.createElement('button');
btnClick.setAttribute('onclick','addTable()');
btnClick.innerHTML = "Add Row";
form.appendChild(btnClick);
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";
var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
function addTable() {
var row = document.createElement('tr');
table.appendChild(row);
var cell = document.createElement('td');
row.appendChild(cell);
cell.appendChild(checkbox);
cell.appendChild(input);
cell.appendChild(input1);
cell.appendChild(input2);
cell.appendChild(input3);
cell.appendChild(btnSave);
cell.appendChild(btnEdit);
}
JsFiddle
First and most important thing to change is the tag you're using for your add row button. By using a button you're going to cause the form to submit each time you press it, thereby undoing your row add and any other page changes. Use an < input > tag with type button if you want the same look. You'll probably want to do the same with your save edit and delete buttons if you want the page to respond without reloading.
For everything else you're pretty much there. If I were you I would stop using setAttribute for everything. You can set the id and onclick of an element by a direct property set (ie table.id = "myTable";). I typically only use setAttribute for inline style when I want to set more than one property at once (ie table.setAttribute("style","border:2px solid;color:red;");
Here's my version of your code that works.
window.onload = function(){
var addTable = function() {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";
var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";
var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";
var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";
var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";
var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";
var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";
var row = document.createElement('tr');
table.appendChild(row);
addCell(row,checkbox);
addCell(row,input);
addCell(row,input1);
addCell(row,input2);
addCell(row,input3);
addCell(row,btnSave);
addCell(row,btnEdit);
addCell(row,btnDelete);
};
var form = document.createElement('form');
form.method = "post";
document.body.appendChild(form);
var table = document.createElement('table');
table.id = "myTable";
form.appendChild(table);
var btnClick = document.createElement('input');
btnClick.type = "button";
btnClick.value = "Add Row";
btnClick.onclick = addTable;
form.appendChild(btnClick);
};
function addCell(row,elm){
var cell = document.createElement('td');
row.appendChild(cell);
cell.appendChild(elm);
}
I Have a table with rows added dynamically. These rows contain a date picker and dropdown, I am able to set classname on the but not on the datepicker and dropdown using .className()
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.className = "row1 part";
var cell1 = row.insertCell(0);
cell1.className = "value";
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox[]";
element1.className = "date-pick"; // this fails
element1.setAttribute('value', '2013/10/04');
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
element2.name = "prddrop[]";
element2.id = "prddrop[]";
element2.className = "bankopt"; //this also fails
element2.options[element2.length] = new Option("[-- Please Choose --]", "[-- Please Choose --]");
var arr_items = [{
"IssuingBank": " --- "
}, {
"IssuingBank": " --- "
}];
$(document).ready(function () {
for (var i = 0; i < arr_items.length; i++) {
element2.options[element2.length] = new Option(arr_items[i].IssuingBank, arr_items[i].IssuingBank);
}
});
cell2.appendChild(element2);
Please help me with this... Thanks!
Remember that .appendChild() returns the element.
So you could do:
cell1.appendChild(element1).className = "class_to_add";
Another way:
You can use setAttribute (NOTE: This will not work on IE8 and earlier versions as stated by #om in the comments.)
var i = document.createElement('input');
i.setAttribute('class', 'myclass');
document.forms[0].appendChild(i);
This should work for you. Across all browsers.
var yourClass = document.createAttribute("class");
yourClass.value = "date-pick";
element1.setAttributeNode(yourClass);
hi i have a form which dynamically generates a table row on a button click using javascript
everything is working fine but now i want to add focus on a newly generated input box in my table row so can anyone help in this?
here is my script
<script language="javascript" type="text/javascript">
var jj=1;
function addRow()
{
//alert(jj)
var tbl = document.getElementById('zimtable');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'zimname_' + jj;
el.id = 'zimname_' + jj;
el.size = 40;
el.maxlength = 40;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'zimmob_' + jj;
el2.id = 'zimmob_' + jj;
el2.size = 10;
el2.maxlength = 10;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var element4 = document.createElement("select");
element4.name ='zim_'+jj;
var option1 = document.createElement("option");
option1.value='TRUSTY';
option1.innerHTML='TRUSTY';
element4.appendChild(option1);
var option2 = document.createElement("option");
option2.value='MUQAMI HAZRAT';
option2.innerHTML='MUQAMI HAZRAT';
element4.appendChild(option2);
var option3 = document.createElement("option");
option3.value='MASJIDWAR JAMAAT KA SAATHI';
option3.innerHTML='MASJIDWAR JAMAAT KA SAATHI';
element4.appendChild(option3);
thirdCell.appendChild(element4);
var fourthCell = row.insertCell(3);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'zemail_' + jj;
el3.id = 'zemail_' + jj;
el3.size = 40;
el3.maxlength = 40;
fourthCell.appendChild(el3);
firstCell.focus();
// alert(i);
jj++;
makhtab.hh.value=jj;
// alert(jj);
}
</script>
i want to add focus on my first input box in my generated table row
Change the line:
firstCell.focus();
To:
el.focus();
try this
$('#zimname_1').focus();
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to do insert After() in JavaScript without using a library?
Currently this script adds a row at the bottom of the table. How do I tell it to add it after a particular row? At the top of the table?
<script>
var i = 1;
function changeIt() {
var tr = document.createElement('tr');
var td = tr.appendChild(document.createElement('td'));
td.style.valign = 'middle';
var span = td.appendChild(document.createElement('span'));
span.style.fontWeight = 'bold';
span.appendChild(document.createTextNode('URL ' + i));
td = tr.appendChild(document.createElement('td'));
var input = td.appendChild(document.createElement('input'));
input.name = 'url' + ++i;
input.type = 'text';
input.size = '40'
document.getElementById('myTable').tBodies[0].appendChild(tr);
}
</script>
I've been searching Google to learn, but I keep coming across jQuery, innerhtml, and insertrow answers.
You're looking for node.insertBefore() https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore
var i = 1;
function changeIt() {
var tr = document.createElement('tr');
var td = tr.appendChild(document.createElement('td'));
td.style.valign = 'middle';
var span = td.appendChild(document.createElement('span'));
span.style.fontWeight = 'bold';
span.appendChild(document.createTextNode('URL ' + i));
td = tr.appendChild(document.createElement('td'));
var input = td.appendChild(document.createElement('input'));
input.name = 'url' + ++i;
input.type = 'text';
input.size = '40'
var node = document.getElementById('myTable').tBodies[0];
node.insertBefore(tr, node.firstChild);
}
To add to a specific position you will need to know the index in the .children. Otherwise some key identifier (class name, attribute, or ID), something you can pass into a getBy or QSA.