I am trying to create a table that stores users.
What I was able to build was a table where you can add and remove some users.
Now I am trying to check the content before adding a row.
If I execute the function my table will grow exponentially instead of checking the content before adding the new user.
// push on the button excecutes addRow
function addRow(){
var firstName=document.getElementById("firstName").value;
var surName=document.getElementById("surName").value;
var email=document.getElementById("email").value;
compareRows(document.getElementById('Gebruikers'));
}
//first i want to compare content of rows vs the inputfields
function compareRows(){
var table=document.getElementById("Gebruikers");
var rowCount=table.rows.length;
//check first cell of the row. when it is the same as firstName check surName
for(var i=0;i<rowCount;i++) {
var row=table.rows[i];
var vCheck=row.cells[0];
if(vCheck===firstName) {
//check second cell of the row. when it is the same as surName check email
for(var i=0;i<rowCount;i++) {
var row=table.rows[i];
var vCheck=row.cells[1];
if (aCheck===surName) {
//check third cell of the row. when it is the same as email show prompt that use allready exists.
//if email doesnt exist check next row
for(var i=0;i<rowCount;i++) {
var row=table.rows[i];
var eCheck=row.cells[2];
if (eCheck===email) {
prompt ("Deze gebruiker bestaat al!")
};
};
};
};
//when all rows have been checked for input execute insertRow function
} else {
insertRow(firstName, surName, email);
};
}
};
function insertRow(firstName, surName, email)
{
var row = document.createElement("tr");
var table = document.getElementById("Gebruikers");
table.appendChild(row);
row.appendChild(createTd(firstName));
row.appendChild(createTd(surName));
row.appendChild(createTd(email));
var cell4=row.insertCell(3);
var remove=document.createElement("input");
remove.type="checkbox";
remove.name="chkbox[]";
cell4.appendChild(remove);
}
function createTd(text) {
var td = document.createElement("td");
td.innerText = text;
return td;
}
function deleteRow(){
var table=document.getElementById("Gebruikers");
var rowCount=table.rows.length;
for(var i=0;i<rowCount;i++) {
var row=table.rows[i];
var chkbox=row.cells[3].childNodes[0];
if(null!=chkbox&&true==chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}
here is the HTML code:
<!DOCTYPE html>
<html>
<script src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
<head>
<title></title>
</head>
<body>
<table class="table" id="Users">
<tr>
<td>Name</td>
<td>Surname</td>
<td>e-mail</td>
<td>remove</td>
</tr>
</table>
<br>
<form>
Name:<br>
<input type="text" id="firstName"> <br>
Surname:<br>
<input type="text" id="surName"> <br>
E-mail:<br>
<input type="text" id="email"> <br>
</form>
<br>
<button id="addButton" onclick="addRow()">add</button>
<button id="deleteButton" onclick="deleteRow()">delete</button>
</body>
</html>
from what i can see you still have call to insertRow function inside loop body, which mean that it will add as many rows as there is already in table if they don't match. What i would do is add some kind of variable which would be changed if comparing the rows will return true.
var temp = 0; if(all_rows=true){temp++;}
and after the loop i would add:
if(temp > 0) {insertRow();}
So it would be something like this:
function compareRows(){
var table=document.getElementById("Gebruikers");
var rowCount=table.rows.length;
var temp = 0;
//check first cell of the row. when it is the same as firstName check surName
for(var i=0;i<rowCount;i++) {
var row=table.rows[i];
var vCheck=row.cells[0];
if(vCheck===firstName) {
//check second cell of the row. when it is the same as surName check email
for(var i=0;i<rowCount;i++) {
var row=table.rows[i];
var vCheck=row.cells[1];
if (aCheck===surName) {
//check third cell of the row. when it is the same as email show prompt that use allready exists.
//if email doesnt exist check next row
for(var i=0;i<rowCount;i++) {
var row=table.rows[i];
var eCheck=row.cells[2];
if (eCheck===email) {
prompt ("Deze gebruiker bestaat al!")
temp++;
};
};
};
};
//when all rows have been checked for input execute insertRow function
} else {
};
}
if(temp > 0)
{
insertRow(firstName, surName, email);
}
};
Related
So I'm trying to make a form where the user can dynamically add and remove rows containing cascading dropdowns as a class picker.
So far I've been able to make everything work except for the remove selected classes function.
I've tried a couple different deleteRow functions but can't seem to make it work.
My most recent attempt is by using the checkbox input but I'm open to any other solutions.
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Semesters Planned</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('#selectCategory').change(function() {getSelectedItem(this, null); });
$('#button').click(function()
{addRow('dataTable'); });
var classes = {//can probably use external text files for these later on
"Core": ["UNI101", "ENG101"],
"Major": ["CSC101", "CSC180"],
"Elective": ["ART101", "PSY101"]
};
var keys = Object.keys(classes);
var category_dropdown = document.getElementById("selectCategory");
var getSelectedItem = function(element, row) {
var e = element;
var selectedCategory = e.options[e.selectedIndex].value;
var sub_category_dropdown = (row != null ? row.getElementsByTagName("select")[1] : document.getElementById("selectSubCategory"));
sub_category_dropdown.options.length = 0;
for (var i = 0; i < classes[selectedCategory].length; i++) {
sub_category_dropdown[sub_category_dropdown.length] = new Option(classes[selectedCategory][i], classes[selectedCategory][i]);
}
};
var addRow = function(tableID)
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
newcell.childNodes[0].selectedIndex = 0;
}
var selects = row.getElementsByTagName("select");
selects[0].addEventListener('change', function()
{
getSelectedItem(this, row)
}, false);
};
function deleteRow(tableID)
{
for (var rowi= table.rows.length; rowi==0;) {
var row= table.rows[rowi];
var inputs= row.getElementsByTagName('chk');
for (var inputi= inputs.length; inputi0;) {
var input= inputs[inputi];
if (input.type==='checkbox' && input.checked) {
row.parentNode.remove(tableID);
break;
}
}}}
for (var keys in classes) {
category_dropdown[category_dropdown.length] = new Option(keys, keys);
}
});
</script>
</head>
<body>
<INPUT type="button" value="Add Class" id="button" />
<INPUT type="button" value="Remove Selected Classes"/>
<form id="myForm">
<TABLE id="dataTable">
<TR>
<TD>
<select id="selectCategory">
<option>Choose Class Type</option>
</select>
</TD>
<TD>
<select id="selectSubCategory">
<option>Choose Class Type First</option>
</select>
</TD>
<TD><INPUT type="checkbox" name="chk" id="input"/></TD>
</TR>
</TABLE>
</form>
<input type = "Submit" value = "Submit">
</body>
</html>
My first suggestion would be to make sure that the remove button is doing something when you click it - you've attached an event listener to the Add Class button, but the Remove Selected Classes button doesn't look like it's calling that deleteRows function.
Then, make sure that you have a reference to that table in the deleteRows function. You are passing it a table id, but the table variable reference is defined outside of the scope of that function.
Then, work on the for loop and the logic therein. It looks like you are mistaking getElementsByTagName with getElementsByName. The one you are using is concerned with the tag name (input) not the name attribute (chk).
Hope this helps a little bit!
I need to publish exam result from a Google sheet. The search button shows the marks obtained perfectly if roll no is provided at the box but I need to omit the fields with no value like Subject 3, 5 etc. with their textbox from the html page
Here is the sheet I'm using and the code I'm using ...
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
//Search for the id and return the array for that row
function search(id) {
var ss = SpreadsheetApp.openByUrl("https://docs.google.com/spreadsheets/d/16IH3yKJjLwM9XA0c4_BN5MVQSKh8hV7gR6_kLLfe8to/edit#gid=0");
var sheet = ss.getSheetByName("Sheet1");
var values = sheet
.getDataRange()
.getValues()
.filter(function(row) {
return row[0] == id;
});
return values[0];
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.hidden {
display:none;
}
</style>
</head>
<body>
<input type="text" id="txtName"/>
<button id="show">SHOW</button>
<h1>FMATS</h1>
Name <input type="text" id="name"/><br>
Roll <input type="text" id="roll"/><br>
Subject 1 <input type="text" id="sub1"/><br>
Subject 2 <input type="text" id="sub2"/><br>
Subject 3 <input type="text" id="sub3"/><br>
Subject 4 <input type="text" id="sub4"/><br>
Subject 5 <input type="text" id="sub5"/><br>
</body>
<script>
//When click on show button it will run search function
window.onload = function(e){
document.getElementById('show')
.addEventListener('click', search);
}
//Get the value for txtName input and run search function in code.gs
function search() {
var txtName = document.getElementById('txtName').value;
google.script.run.withSuccessHandler(fillInfo).withFailureHandler(function (e) { console.log(e) }).search(txtName);
}
//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(values) {
document.getElementById('name').value = values[1];
document.getElementById('roll').value = values[0];
for (var i=0;i<values.length-2;i++) {
if (values[i+2]==null) {
toggleElement("sub"+i);
} else {
document.getElementById("sub"+i).value = values[i+2];
}
}
//rest of the code here
document.getElementById('name').value = values[1];
document.getElementById('roll').value = values[0];
document.getElementById('sub1').value = values[2];
document.getElementById('sub2').value = values[3];
document.getElementById('sub3').value = values[4];
document.getElementById('sub4').value = values[5];
document.getElementById('sub5').value = values[6];
}
</script>
</html>
I need to omit the Subject name and the text box with no value from the HTML page. And "Nothing Found" should be shown if a roll searched which is not in the table. It's not required but will be good if the Subject names come from sheet's row 1.
What should I do?
There are two ways to go about this:
Create your HTML on the server side (as #Cooper said)
Manipulate your HTML with JavaScript
To create your HTML on the server side you can use string and "write" the html automatically.
Then your functions will be something like this:
//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(response) {
document.getElementById("divid").innerHTML=html
});
If you absolutely want to manipulate the HTML on the client-side, you will use something like this:
function toggleElement(id) {
var td = document.getElementById(id).parentElement;
var tr = td.parentElement;
tr.classList.toggle("hidden");
}
the usage is like so:
function fillInfo(values) {
document.getElementById('name').value = values[1];
document.getElementById('roll').value = values[0];
for (var i=0;i<values.length-2;i++) {
if (values[i+2]==null) {
toggleElement("sub"+i);
} else {
document.getElementById("sub"+i).value = values[i+2];
}
}
//rest of the code here
}
and then you will have some css that does this:
.hidden {
display:none;
}
Edit:
This is how you implement the first solution:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="text" id="txtName"/>
<button id="show">SHOW</button>
<h1>FMATS</h1>
<div id="dataDiv"></div>
</body>
<script>
//When click on show button it will run search function
window.onload = function(e){
document.getElementById('show')
.addEventListener('click', search);
}
//Get the value for txtName input and run search function in code.gs
function search() {
var txtName = document.getElementById('txtName').value;
google.script.run.withSuccessHandler(fillInfo).withFailureHandler(function (e) { console.log(e) }).search(txtName);
}
//It will run when a success response comes from search function in code.gs and updates the input with the sheet info
function fillInfo(values) {
console.log(values);
document.getElementById("dataDiv").innerHTML=values
}
</script>
</html>
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
//Search for the id and return the array for that row
function search(id) {
var ss = SpreadsheetApp.openByUrl("SHEETS URL");
var sheet = ss.getSheetByName("Sheet1");
var values = sheet
.getDataRange()
.getValues()
.filter(function(row) {
return row[0] == id;
})[0];
var legends = sheet.getRange(1,1,1,sheet.getMaxColumns()).getValues()[0];
return createHTML(legends, values);
}
function createHTML(legends, values) {
Logger.log(legends);
var htmlResult = "";
for (var i=0; i<values.length; i++) {
if (values[i]!=null && values[i]!=="") {
htmlResult += '<div class="field">' + (legends[i]+"").replace("Sub", "Subject ") + '<input type="text" id="sub1" value="'+values[i]+'"></div>';
}
}
return htmlResult;
}
Hope this helps!
Here's a simple example of a complete solution of your problem done mostly server side.
I like do it this way because I like to be able to use Utilities.formatString().
Server Functions:
File: aq3.gs:
function search(sObj) {
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Sheet1');
var rg=sh.getDataRange();
var vA=rg.getValues();
var hA=vA[0];
var dObj={dA:[]};
for(var i=1;i<vA.length;i++) {
if(vA[i][0]==sObj.roll) {
var row=vA[i];
for(var j=0;j<hA.length;j++) {
dObj[hA[j]]=row[j];
}
break;
}
}
var html="<style>input{margin:2px 5px 0 2px}</style>";
for(var i=0;i<row.length;i++) {
if(dObj[hA[i]]) {
html+=Utilities.formatString('<br /><input id="txt-%s" type="text" value="%s" /><label for="txt-%s">%s</label>',i,dObj[hA[i]],i,hA[i]);
}
}
sObj['results']=html;
return sObj;
}
Run the below function to get the dialog running. The enter the roll you wish to see in the search box and click the search button. You will get only the boxes that have data.
function launchExamResultsSearchDialog() {
var userInterface=HtmlService.createHtmlOutputFromFile('aq5');
SpreadsheetApp.getUi().showModelessDialog(userInterface, "Exam Results");
}
The html:
File: aq5.html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function search() {
var text=$('#srchtext').val();
google.script.run
.withSuccessHandler(function(sObj) {
document.getElementById("results").innerHTML=sObj.results;
})
.search({roll:text});
}
console.log("My Code");
</script>
</head>
<body>
<input type="text" id="srchtext" /><input type="button" value="Search" onClick="search();" />
<div id="results"></div>
</body>
</html>
This is what the dialog looks like:
You can just keep changing the search roll number and the dialog will replace the data with the new data. You can control the subjects by changing the headers.
Client To Server Communication
Utilities.formatString()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Assignment 3 </title>
<script src="../JAVASCRIPT/question2.js" defer></script>
</head>
<body>
<h1>Shopping List</h1>
<input type="text" id="firstname" >
<input type='submit' onclick='changeText2()' value='Add Item' />
<input type="text" id="delitem" >
<input type='button' onclick='getNames()' value='Delete Item' />
<br><ol id="demo"></ol>
<input type='button' onclick='delevrytin()' id="evetang" value='Delete all' />
</body>
</html>
var list = document.getElementById('demo'); //demo is the organised list
//this function is for the add button
function changeText2() {
var firstname = document.getElementById("firstname").value
// the if satatement alerts if input is blank
if ((firstname == "") || (firstname == null)) {
alert("can't be blank");
return; //alerts if noting is inputed and add is clicked
}
//creates a list item
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstname));
list.appendChild(entry);
document.getElementById('firstname').value = ''; //clears textbox
}
// this function clears specific item starting from 0
var list = document.getElementById('demo');
function getNames()
{
var remov = document.getElementById('delitem').value;
list.removeChild(list.childNodes[remov]);
}
//delete all button
function delevrytin()
{
document.getElementById('demo').remove;
}
my problem is the delevrytin function when clicked
it works but stops the other functions from working.
Can anyone solve my problem emphasized text would be greatly appreciated
all good its running for me now
few variables and id's changed
var list = document.getElementById('org'); // var for the organized list gets it by id
//this function is for the add button
function changeText2() {
var firstitem = document.getElementById("firstitem").value
// the if statement alerts if input is blank
if ((firstitem == "") || (firstitem == null)) {
alert("can't be blank");
return; //alerts if noting is inputed and add is clicked
}
//creates a list item
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstitem));
list.appendChild(entry);
document.getElementById('firstitem').value = ''; //clears textbox
}
// this function clears specific item starting from 0
function getNames()
{ // creates a variable and assigns it to the delitem input
var remov = document.getElementById('delitem').value;
//remove - 1 lets you delete the list item but the number beside it
list.removeChild(list.childNodes[remov = remov - 1]);
}
//delete all button
function delevrytin()
{ //if there is a child node remove it
while (list.firstChild) {
list.removeChild(list.firstChild);
}
}
s.no. | description
abcd1
abcd2
abcd3
i want to add more rows through input. now what i want is when i will add another row. let say {describtion="abcd4"}
then the above grid will become
s.no. | description
abcd4
abcd1
abcd2
abcd3
meaning s.no. field got updated and new row will be added at top. adding a new row on top is no issue but how could i update s.no. at same time, here i want to ask is there any specific way to do this.
Here is a solution that adds rows at the top of a table and keeps the numbers updated:
document.querySelector('#btnadd').addEventListener('click', function () {
var inp = document.querySelector('#inpadd');
var descr = inp.value;
if (descr === '') return; // do not add empty values
var grid = document.querySelector('#grid');
// first increment all row numbers
for (var i = 1, row; row = grid.rows[i]; i++) {
row.cells[0].textContent = i+1;
}
// add new row
var row = grid.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.textContent = 1;
cell2.textContent = descr;
// clear input
inp.value = "";
});
New description: <input type="text" id="inpadd"><button id="btnadd">Add</button>
<table id="grid">
<tr><th>s.no.</th><th>description</th></tr>
<table>
If you want to insert new text description in the beginning of the ordered list, you can use 'insertBefore' javascript code:
list.insertBefore(entry, list.firstChild);
It should add the new text in the beginning of the list. Refer below code if it helps your problem.
<!DOCTYPE html>
<html>
<body>
<p>Input the text description and click 'Add Description' button to insert in list:</p>
<form>
Description Text:<br>
<input type="text" name="description" id="description">
<br>
<input type="button" value="Add Description" onclick='appendDescription()'>
</form>
<ol id="desclist">
<li>abcd1</li>
<li>abcd2</li>
<li>abcd3</li>
</ol>
<script>
function appendDescription(){
var description= document.getElementById('description').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(description));
var list = document.getElementById('desclist');
list.insertBefore(entry, list.firstChild);
}
</script>
</body>
</html>
function pushAtStarting(array, element){
array.unshift(element); // new element has s.no = 0
for (index in array){
array[index].sno++
}
}
var array = [];
pushAtStarting(array, {sno: 0, description: "abc"});
it works if your grid is java script arrays and elements are json elements.
I have SQLite3 (i.e. Spatialite query) that outputs the results into HTML table. I want to get the AsText(Geometry) data to output in <textarea>
Here is the table and some assumptions.
<table>
<tr>
<th>name</th>
<th>AsText(Geometry))</th>
</tr>
<tr>
<td>Andres Street</td>
<td>LINESTRING(7.120068 43.583917,7.120154 43.583652,7.120385
43.582716,7.12039 43.582568,7.120712 43.581511,7.120873 43.580718)</td>
</tr>
</table>
$('#wktInput').click(function(){
???
???
var asTextGeometryText =
$("#wktResult").text(asTextGeometryText);
});
<textarea name='wktResult' value ='wktResult' ROWS="10" COLS="50" >'Should Display AsText(Geometry Column here!'</textarea>
This is the DOM
#~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var fieldNames = aResult.fieldNames;
var records = aResult.data;
var numFields = fieldNames.length;
var numRecords = records.length;
var container = document.getElementById('queryResults');
container.innerHTML = '';
var table = document.createElement('table');
container.appendChild(table);
var headerRow = document.createElement('tr');
table.appendChild(headerRow);
for(var i = 0; i < numFields; i++){
var header = document.createElement('th');
header.innerText = fieldNames[i];
headerRow.appendChild(header);
}
for(var i = 0; i < numRecords; i++){
var tableRow = document.createElement('tr');
table.appendChild(tableRow);
for(var j = 0; j < numFields; j++){
var tableData = document.createElement('td');
tableRow.appendChild(tableData);
tableData.innerText = records[i][j];
}
}
}
<input id='SQLinput' size="90" rows="3" value = 'SELECT name, AsText(Geometry) FROM Roads Where MbrContains(Geometry, MakePoint(7.120872,43.580722,4326))'></input>
<input type='button' class='button' value='Display AsText' ontouchend='wktAsTextInput'/>
Thanks in advance
It seems that texarea uses id for value.
<textarea id="field1">example text</textarea>
[This problem is related to textarea in jQuery as well][1]
This example below demonstrate that jquery is not working in textarea using id.
<script type="text/javascript">
$(function() {
$('button').click(function() {
var row = $('input:first').val();
var column = $('input:eq(1)').val();
var cell = $('table tr:eq('+row+') td:eq('+column+')');
if (cell.length == 0) {
$('#value').text('Undefined');
}
else {
$('#value').text(cell.text());
}
});
});
</script>
</head>
<body>
<h1>Table Cell Value</h1>
<table>
<tr><td>Cell 1-1</td><td>Cell 1-2</td><td>Cell 1-3</td></tr>
<tr><td>Cell 2-1</td><td>Cell 2-2</td><td>Cell 2-3</td></tr>
<tr><td>Cell 3-1</td><td>Cell 3-2</td><td>Cell 3-3</td></tr>
</table>
Row: <input type="text" value="0">
Column: <input type="text" value="0">
Value: <span id="value">?</span><br>
Textarea: <textarea id="value" >Try this! this is not working</textarea>
<button>Get Value</button>
All is working in this example. Then added a textarea to see if I can make it work. Textarea is not working in this example. Something wrong with jquery and textarea using id as well as name.
Textarea: <textarea name="value" >Try this! this is not work as well</textarea>
How this does not work.
New info about this textarea value.
$('#id_of_textarea').attr('value'); //to get and...
$('#id_of_textarea').attr('value','updated value of textarea'); //to set it...
<textarea id="editor_desc" onkeyup="update_textarea(this)"></textarea>
function update_textarea(obj)
{
$('#mydiv').text($(obj).attr('value')); //whatever you type in the textarea would be reflected in #mydiv
}
http://blog.ekini.net/2009/02/24/jquery-getting-the-latest-textvalue-inside-a-textarea/
It seems that my problem is not rendering a regular html tablet but a direct render to the screen.
The author of QuickConnect say told me,
If you want one of those values so that you can use it you need to pull it
out of the 2D array.
Do you mean displaying the content in AsText(Geometry) column at the textarea?
var text = []
$('table').find('tr:has(td)').each(function(){
text.push($.trim($(this).find('td:eq(1)').html()));
})
// and you set it to your textarea
$('textarea[name="wktResult"]').val(text.join('\n'));
1- assign an id attribute to your textarea to use it in jquery or if your page contain just one textarea you can use tag name insteasd.
2- to get text of textarea you need just call text function without any parameters
$('#wktInput').click(function(){
var asTextGeometryText =$('table').find('th').eq(2).text();
$('#id_of_textarea').attr('value',asTextGeometryText);
});