Create array from Dynamic table

Create array from Dynamic table - javascript

How can I create an array from this table/form? The onclick function formData() from the dynamic table only returns a concatenated string. I need to create an associative array in JSON using the 'device' variable as key, however I'll settle for any sort of array at all. Clearly, I'm not very good at this...
function createInputTable()
{
var num_rows = document.getElementById('rows').value;
var tableName = document.getElementById('conn_input_device').value;
var column_number = 2;
var tdefine = '<form id="form"><table id="table" border = "1">\n';
var theader = '<tr><th>No</th><th>Input</th><th>Output</th></tr>\n';
var caption = '<caption><input id="device" value ="' + tableName + '" /></caption>';
var tbody = '';
var tfooter = '</table>';
var createNewDevice = '<button onclick="formData();">Form Data</button></form>'
var i = 0;
for (var i= 0; i < num_rows; i++)
{
tbody += '<tr><td>' + (i+1) + '</td><td><input class="cell" id="i'+ i + '" type = "text"/></td>';
tbody += '<td><input class="cell" id="o'+ i + '" type="text"/></td></tr>\n';
}
document.getElementById('wrapper').innerHTML = caption + tdefine + theader + tbody + tfooter + createNewDevice;
}
function formData()
{
var cellData = document.getElementById("form");
//var device = document.getElementById('device').value;
//var j;
var obj = [];
for(j=0; j< cellData.length; j++)
{
obj += cellData[j].value;
}
var json = JSON.stringify(obj);
alert (json);
//document.getElementById('result').innerHTML = json;
}
<form id="tableGen" name="table_gen">
<label>Connecting device: <input type = "text" name = "conn_input_device" id = "conn_input_device"/></label><br />
<label>Number of inputs: <input type="text" name="rows" id="rows"/></label><br />
<input name="generate" type="button" value="Create Input Table!" onclick='createInputTable();'/>
</form>
<div id="wrapper"></div>

1) This my answer how do this on VueJS and jQuery
2) Vanilla js - CODEPEN - DEMO
// Get DOM elements
const $el = [
'#tmpl',
'#user-count',
'#people-count',
'#form-items',
'#btn-add',
'#form',
].reduce((res, item) => {
const method = item.startsWith('#')
? 'querySelector'
: 'querySelectorAll'
const key = item
.replace(/\W/ig, ' ').trim()
.replace(/\s+\w/g, v => v.trim().toUpperCase())
res[key] = document[method](item)
return res
}, {})
// Variable for dynamic template
const tmpl = $el.tmpl.innerHTML.trim()
// Click on Add new button
$el.btnAdd.addEventListener('click', () => {
const peopleCount = +$el.peopleCount.value
const html = Array(peopleCount)
.fill(tmpl)
.join('')
$el.formItems.insertAdjacentHTML('beforeend', html)
})
// Submit form
$el.form.addEventListener('submit', e => {
e.preventDefault()
alert('Submit form by ajax or remove this method for default behavior')
})
// Add form click (it's need for dynamic handler on child elements)
$el.form.addEventListener('click', e => {
// Delete behaviors
if (e.target.classList.contains('btn-del') && confirm('Are you sure?')) {
e.target.closest('.row').remove()
}
})
<div id="app">
<div>
<div>
<button id="btn-add">Add new user</button>
<label>Number of People:</label>
<input type="number" id="people-count" value="1" min="1">
</div>
<form id="form">
<div id="form-items" data-empty="Users list is empty"></div>
<button>Send</button>
</form>
</div>
</div>
<script type="text/x-template" id="tmpl">
<div class="row">
<label>
Name:
<input class="people" name="name[]">
</label>
<label>
Surname:
<input class="people" name="surname[]">
</label>
<label>
Email:
<input type="email" class="people" name="email[]">
</label>
<button class="btn-del">Delete</button>
</div>
</script>
<style>
.people {
width: 80px;
}
#form-items:empty + button {
display: none;
}
#form-items:empty:before {
content: attr(data-empty);
display: block;
}
</style>

I have edited your code,
function createInputTable()
{
var num_rows = document.getElementById('rows').value;
var tableName = document.getElementById('conn_input_device').value;
var column_number = 2;
var tdefine = '<form id="form"><table id="table" border = "1">\n';
var theader = '<tr><th>No</th><th>Input</th><th>Output</th></tr>\n';
var caption = '<caption><input id="device" value ="' + tableName + '" /></caption>';
var tbody = '';
var tfooter = '</table>';
var createNewDevice = '<button onclick="formData();">Form Data</button></form>'
var i = 0;
for (var i= 0; i < num_rows; i++)
{
tbody += '<tr><td>' + (i+1) + '</td><td><input class="cell" id="i'+ i + '" type = "text"/></td>';
tbody += '<td><input class="cell" id="o'+ i + '" type="text"/></td></tr>\n';
}
document.getElementById('wrapper').innerHTML = caption + tdefine + theader + tbody + tfooter + createNewDevice;
}
function formData()
{
var cellData = document.getElementsByTagName("tr");
var obj = [];
for(var i=0;i<cellData.length-1;i++){
obj.push(document.getElementById("i"+i).value);
obj.push(document.getElementById("o"+i).value);
}
alert(JSON.stringify(obj));
}
<form id="tableGen" name="table_gen">
<label>Connecting device: <input type = "text" name = "conn_input_device" id = "conn_input_device"/></label><br />
<label>Number of inputs: <input type="text" name="rows" id="rows"/></label><br />
<input name="generate" type="button" value="Create Input Table!" onclick='createInputTable();'/>
</form>
<div id="wrapper"></div>

Related

how to get the text of an html input generated by javascript?

I'm having a problem I'm using a numeric keypad that I found in codepen this one
https://codepen.io/matthewfortier/pen/ENJjqR
my objective is to store the generated pin in a database but it's a little difficult to do that because I'm taking the generated pin to an input but it looks like this
<input hidden="" id="pin" value="" name="pin">9345</input>
how do i get this generated pin and save it in database
the code is the same as the link

In your html you have this:
<input type="hidden" id="pin" value="9345" name="pin" />
In your Javascript you have this:
let value = document.getElementById('pin').value;
console.log(value);

$(function() {
var container = $(".numpad");
var inputCount = 6;
// Generate the input boxes
// Generates the input container
container.append("<div class='inputBoxes' id='in'></div>");
var inputBoxes = $(".inputBoxes");
inputBoxes.append("<form class='led' class='form-group' action='cadastro.php' method='post'></form>");
var led = $(".led");
// Generates the boxes
for(var i = 1; i < inputCount + 1; i++){
led.append("<input type='password' maxlength=1 class='inp' id='" + i + "' />");
}
led.append("<input type='password' maxlength=12 name='numero' value='93445566' id='numero' />");
led.append("<input type='text' name='te' id='te' placeholder='' />");
led.append("<button id='btn1' type='submit' onclick=''>enviar</button>");
container.append("<div class='numbers' id='inb'><p id='textoo'><span class='bolded'>PIN</span> do serviço MULTICAIXA</p></div>")
var numbers = $(".numbers");
// Generate the numbers
for(var i = 1; i <= 9; i++){
numbers.append("<button class='number' type='button' name='" + i + "' onclick='addNumber(this)'><span class='pin_font'>" + i + "</span></button>");
}

addNumber = function take(field,vall) {
if (!$("#1").val())
{
$("#1").val(field.name).addClass("dot");
}
else if (!$("#2").val())
{
$("#2").val(field.name).addClass("dot");
}
else if (!$("#3").val())
{
$("#3").val(field.name).addClass("dot");
}
else if (!$("#4").val())
{
$("#4").val(field.name).addClass("dot");
}
else if (!$("#5").val())
{
$("#5").val(field.name).addClass("dot");
}
else if (!$("#6").val())
{
$("#6").val(field.name).addClass("dot");
vall = $("#1").val() + $("#2").val() + $("#3").val() + $("#4").val()+ $("#5").val()+ $("#6").val();
document.getElementById("pini").innerHTML = vall;
}
}

my input return me undefined even though the data is catch. using CRUD js

<body>
<form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
<input type="text" id="add-name" placeholder="New country ">
<input type="number" id="add-popu" placeholder="New population">
<input type="submit" value="Add">
</form>
<div id="spoiler" role="aria-hidden">
<form action="javascript:void(0);" method="POST" id="saveEdit">
<input type="text" id="edit-name">
<input type="text" id="edit-popu">
<input type="submit" value="Ok" /> <a onclick="CloseInput()" aria-label="Close">✖</a>
</form>
</div>
<p id="counter"></p>
<table>
<tr>
<th>Country</th>
<th>Population</th>
</tr>
<tbody id="countries"></tbody>
<tbody id="popultns"></tbody>
</table>
<script type="text/javascript" src="main.js"></script>
<script>
var app = new function()
{ this.el = document.getElementById('countries');
this.el = document.getElementById('popultns');
let loadTableData = data2;
this.Count = function(data)
{ var el = document.getElementById('counter');
var name = 'country2';
var pop = 'popu2'
if (data)
{ if (data > 1)
{ name = 'countries' ;
pop = "popultns" ;
}
el.innerHTML = data + ' ' + name + ' ' + pop ;
}
else
{ el.innerHTML = 'No ' + name + ' ' + pop ; }
};
this.FetchAll = function()
{ var data = '';
if (loadTableData.length > 0)
{ for (i = 0; i < loadTableData.length; i++)
{ data += '<tr>';
data += '<td>' + loadTableData[i].country + '</td>';
data += '<td>' + loadTableData[i].population + '</td>';
data += '<td><button onclick="app.Edit(' + i + ')">Edit</button></td>';
data += '<td><button onclick="app.Delete(' + i + ')">Delete</button></td>';
data += '</tr>';
}
}
this.Count(loadTableData.length);
return this.el.innerHTML = data;
};
this.Add = function ()
{ el = document.getElementById('add-name');
el2 = document.getElementById('add-popu');
// Get the value
var country2 = el.value;
var pop = el2.value;
if (country2)
{ // Add the new value
loadTableData.push(country2.trim() );
// Reset input value
el.value = '';
//el2.value = '';
// Dislay the new list
this.FetchAll();
}
};
the image is the ui tht im working for the function
I'm supposed to auto-generate the table based on the data available from my main.js script which is in JSon format. There is no problem with the data loading since the data can be display in my html file. However, the problem comes whn my data is returned undefined on my auto generated table whn i click the 'add' button to update the data in the table. Whn i click in the edit button, the data is get correctly. only whn the display, it returns me undefined.

i know how alrdy.
here i attach the code & sample of the data i hv done.
hopefully this would help fresh grad like me who hv trouble in undrsntdng CRUD
<html>
<head>
<meta charset="UTF-8">
<title>Countries CRUD</title>
<style>
input[type='submit'], button, [aria-label]{
cursor: pointer;
}
#spoiler{
display: none;
}
</style>
</head>
<body>
<form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
<input type="text" id="add-name" placeholder="New country ">
<input type="number" id="add-popu" placeholder="New population">
<input type="submit" value="Add">
</form>
<div id="spoiler" role="aria-hidden">
<form action="javascript:void(0);" method="POST" id="saveEdit">
<input type="text" id="edit-name">
<input type="text" id="edit-popu">
<input type="submit" value="Ok" /> <a onclick="CloseInput()" aria-label="Close">✖</a>
</form>
</div>
<p id="counter"></p>
<table>
<tr>
<th>Country</th>
<th>Population</th>
</tr>
<tbody id="countries"></tbody>
<tbody id="popultns"></tbody>
</table>
<script type="text/javascript" src="main.js"></script>
<script>
var app = new function()
{ this.el = document.getElementById('countries' && 'popultns');
//this.el = document.getElementById('popultns');
let loadTableData = data2;
this.Count = function(data)
{ var el = document.getElementById('counter');
var name = 'country2';
var pop = 'popu2'
if (data)
{ if (data > 1)
{ name = 'countries' ;
pop = "populations" ;
}
el.innerHTML = data + ' ' + name + ' ' + pop ;
}
else
{ el.innerHTML = 'No ' + name + ' ' + pop ; }
};
this.FetchAll = function()
{ var data = '';
if (loadTableData.length > 0)
{ for (i = 0; i < loadTableData.length; i++)
{ data += '<tr>';
data += '<td>' + loadTableData[i].country + '</td>';
data += '<td>' + loadTableData[i].population + '</td>';
data += '<td><button onclick="app.Edit(' + i + ')">Edit</button></td>';
data += '<td><button onclick="app.Delete(' + i + ')">Delete</button></td>';
data += '</tr>';
}
}
this.Count(loadTableData.length);
return this.el.innerHTML = data;
};
this.Add = function ()
{ el = document.getElementById('add-name');
el2 = document.getElementById('add-popu');
// Get the value
var country2 = el.value;
var popltn = el2.value;
if (country2 && popltn )
{ // Add the new value
//loadTableData.push(country2.trim() );
loadTableData.push({country: country2, population:popltn});
// Reset input value
el.value = '';
el2.value = '';
// Dislay the new list
this.FetchAll();
}
};
this.Edit = function (item)
{ var el3 = document.getElementById('edit-name');
var el4 = document.getElementById('edit-popu');
// Display value in the field
let index = item;
el3.value = loadTableData[index].country;
el4.value = loadTableData[index].population;
// Display fields
document.getElementById('spoiler').style.display = 'block';
self = this;
document.getElementById('saveEdit').onsubmit = function()
{
// Get value
var country2 = el3.value;
var popltn = el4.value;
//console.log({country2, pop});
if (country2 || pop)
//console.log(country2);
{ // Edit value (strt,del,replace)
console.log(country2,popltn);
console.log(index, 1,({country2,popltn}));
//update array
loadTableData[index].country = el3.value;
loadTableData[index].population = el4.value;
//self.loadTableData.splice(index, 1,({country2,popltn}));
//console.log(index, 1, pop.trim());
//self.loadTableData.splice(index, 1, pop.trim());
// Display the new list
self.FetchAll();
// Hide fields
CloseInput();
}
}
};
this.Delete = function (item)
{
// Delete the current row
loadTableData.splice(item, 1);
// Display the new list
this.FetchAll();
};
}
app.FetchAll();
function CloseInput()
{ document.getElementById('spoiler').style.display = 'none';}
</script>
</body>
</html>

create a new mobile page using an array already selected in a multiple select checkbox

I have created a multiple list checkbox form and trying to have the values selected moved to another mobile page for displaying when the selected action button is selected. I have seen some responses for a popup however, not for a new static mobile page.
var k = 0;
for (var i = 0; i < 300; i++) {
var row = {};
row["firstname"] = firstNames[k];
data[i] = row;
k++;
}
var source =
{
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$('#dropdownlist').jqxDropDownList({
selectedIndex: 0, checkboxes: true, theme: theme,
autoDropDownHeight: true, source: dataAdapter,
displayMember: "firstname", valueMember: "notes",
itemHeight: 70, height: 40, width: '90%',
renderer: function (index, label, value) {
var datarecord = data[index];
var imgurl = '../../images/' + label.toLowerCase()
+ '.png';
var img = '<img height="50" src="' + imgurl + '"/>';
var table = '<table><tr><td style="width: 55px;
" rowspan="2">'
+ '</td><td>' + datarecord.firstname + " " + '</td></tr><tr><td>'
+ '</td></tr></table>';
return table;
}
});
initSimulator("dropdownlist");
});
</script>
</head>
<body class='default'>
<div id="demoContainer" class="device-mobile">
<div id="container" class="device-mobile-container">
<h3 style="margin-left: 5%; margin-top:
20px;">Select employees:</h3>
<div style="margin-left: 5%;" id="dropdownlist"></div>
</div>
</div>
<input type="button" id="btnSelected" value="Get Selected" />
Code for second page that will be used to capture the results from the code listed above:
<table id="dataAdapter" name = "firstnames" class="OutlinePage">
<thead class="OutlineText">
<tr>
<td>Name</td>
<td></td>
<td></td>
</tr>
</thead>
<tbody class=OutlineText">
</tbody>
</table>
</div>
</body>
<script>
function AddData() {
{
var rows = "";
var name = document.getElementById("firstnames").value;
var position = document.getElementById("array").value;
rows += "<td>" + name + "</td><td>" + position + "</td>";
var tbody = document.querySelector("#list tbody");
var tr = document.createElement("tr");
tr.innerHTML = rows;
tbody.appendChild(tr)
//
}
}
function ResetForm() {
document.getElementById("firstnames").reset();
}
</script></h1>
<script>
// from checkboxes7.html
document.getElementById("write").innerHTML = window.location.search;
</script>
<script>
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}</script>
<script>
function show() {
document.getElementById("write").innerHTML = name;
}
var sn = getParameterByName('firstnames');
document.getElementById("write").innerHTML = sn;
</script>
</p>
</html>

There are a number of things that are not defined and I cannot test without the proper library. Found some syntax issue, so I cleaned up those and the code a bit.
$(function() {
var k = 0;
for (var i = 0; i < 300; i++) {
var row = {};
row.firstname = firstNames[k];
data[i] = row;
k++;
}
var source = {
localdata: data,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$('#dropdownlist').jqxDropDownList({
selectedIndex: 0,
checkboxes: true,
theme: theme,
autoDropDownHeight: true,
source: dataAdapter,
displayMember: "firstname",
valueMember: "notes",
itemHeight: 70,
height: 40,
width: '90%',
renderer: function(index, label, value) {
var datarecord = data[index];
var imgurl = '../../images/' + label.toLowerCase() + '.png';
var img = '<img height="50" src="' + imgurl + '"/>';
var table = '<table><tr><td style="width: 55px;" rowspan="2">';
table += '</td><td>' + datarecord.firstname + " " + '</td></tr><tr><td>';
table += '</td></tr></table>';
return table;
}
});
initSimulator("dropdownlist");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demoContainer" class="device-mobile">
<div id="container" class="device-mobile-container">
<h3 style="margin-left: 5%; margin-top: 20px;">Select employees:</h3>
<div style="margin-left: 5%;" id="dropdownlist"></div>
</div>
</div>
<input type="button" id="btnSelected" value="Get Selected" />
Hope that helps.

All javascript functions coming up undefined from html

I had majority of these functions working and now when i restarted my program they are saying undefined functions through chrome. Not sure the exact problem, im sure im missing something somewhere but its not coming up through eclipse. REALLY NEED HELP !!!! cant figure out the exact location or i would have shortened the files but i felt more is better than less in this instance where i cant find out where the code is breaking. Thank you all
HTML FILE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Manager Menu</title>
</head>
<body>
<div id = "header">
Welcome to the employee database;
</div>
<div id = "login">
Welcome <label id="welcomeLabel"></label>
<form action="http://localhost/Employee_12_14_13/login.html">
<input type="submit" value="Logout">
</form>
</div>
<div id = "buttons">
<br/><input type="submit" value="Create Group" onclick='createGroup()'>
<br/><input type="submit" value="Edit Employee" onclick='editEmployee()'>
<br/><input type="submit" value="Search for Employee" onclick='search()'>
<br/><input type="submit" value="View all employees" onclick='viewAll()'>
<br/><input type="submit" value="Delete Group" onclick='deleteGroup()'>
<br/><input type="submit" value="View all no group" onclick='viewNoGroup()'>
</div>
<div id ="createGroup" style="display:none">
<br/>Enter name of Group: <input type ="text" name="newGroup" id="newGroup">
<input type="submit" value="Enter">
</div>
<div id ="deleteGroup" style="display:none">
<br/>Enter name of Group: <input type ="text" name="newGroup" id="newGroup">
<input type="submit" value="Enter">
</div>
<div id ="Search" style="display:none">
<br/>Employee Email: <input type ="text" name ="toFind" id ="toFind">
<input type="submit" value="Enter" onclick='searchFor()'>
</div><div id ="editPersonalInfo" style="display:none">
<br/>Employee Email: <input type ="text" name="username" id="user">
<br/>Name: <input type="text" name ="name" id="name">
<input type="submit" value="Edit Name" onclick='editName()'>
<br/>Email address: <input type="text" name ="email" id="email">
<input type="submit" value="Edit Email" onclick='editEmail()'>
<br/>Password: <input type="password" name ="pass" id="pass">
<input type="submit" value="Edit Password" onclick='editPass()'>
<br/>Phone number: <input type="text" name ="phone" id="phone">
<input type="submit" value="Edit Phone" onclick='editPhone()'>
<br/>Programming Language: <input type="text" name ="username" id="user">
<form action="http://localhost/Employee_12_14_13/login.html">
<input type="submit" value="Logout">
</form>
<form action="http://localhost/Employee_12_14_13/menu.html">
<input type="submit" value="MainMenu">
</form>
</div>
<div id="employeePersonalInfo" style="display:none">
<br/>Id: <label id="id"></label>
<br/>Name: <label id="name"></label>
<br/>Email address: <label id="email"></label>
<br/>Phone number: <label id="phone"></label>
<form action="http://localhost/Employee_12_14_13/login.html">
<input type="submit" value="Return">
</form>
<form action="http://localhost/Employee_12_14_13/menu.html">
<input type="submit" value="Menu">
</form>
</div>
<div id="viewAllTable" style="border: 0px solid black"></div>
<div id="viewAllNoGroup" style="border: 0px solid black"></div>
<div id="viewAllInGroup" style="border: 0px solid black"></div>
<div id="searchTable" style="border: 0px solid black"></div>
</body>
<script src="./JS/managerMenu.js"></script>
</html>
JS
function GetRequest() {
var url = location.search;
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest = (strs[i].split("=")[1]);
}
}
return theRequest;
}
function changeLabel()
{
document.getElementById("welcomeLabel").innerHTML = GetRequest();
}
function createGroup()
{
}
function deleteGroup()
{
setAllInvis();
deleteGroupServlet(GetRequest());
}
function searchFor()
{
setAllInvis();
changeLabel();
callServlet(document.getElementById("toFind").value);
}
function setAllInvis()
{
document.getElementById("viewAllTable").style.display="none";
document.getElementById("viewAllInGroup").style.display="none";
document.getElementById("viewAllNoGroup").style.display="none";
document.getElementById("searchTable").style.display="none";
document.getElementById("createGroup").style.display="none";
document.getElementById("editPersonalInfo").style.display="none";
document.getElementById("Search").style.display="none";
document.getElementById("deleteGroup").style.display="none";
document.getElementById("editPersonalInfo").style.display="none";
document.getElementById("employeePersonalInfo").style.display="none";
}
function search()
{
setAllInvis();
document.getElementById("Search").style.display="block";
}
function editEmployee()
{
setAllInvis();
document.getElementById("editPersonalInfo").style.display="block";
}
function editName()
{
editServlet("name",document.getElementById("user").value,document.getElementById("name").value);
}
function editEmail()
{
editServlet("email",document.getElementById("user").value,document.getElementById("email").value);
}
function editGroup()
{
editServlet("group"),document.getElementById("user").value,document.getElementById("group").value;
}
function editPass()
{
editServlet("pass",document.getElementById("user").value,document.getElementById("pass").value);
}
function editPhone()
{
editServlet("phone",document.getElementById("user").value,document.getElementById("phone").value);
}
function viewEmployee()
{
viewEmployee(document.getElementById("toFind").value);
}
function viewNoGroup()
{
setAllInvis();
var http = new getXMLHttpRequestObject();
var url = "viewNoGroupServlet";
alert("viewNoGroup");
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
var jsonObj = JSON.parse(http.responseText);
viewNoGroupTable(jsonObj);
};
http.send();
}
function searchNoGroup()
{
viewNoGroup();
}
function next(){
setAllInvis();
var select = document.getElementById("managerMenu");
var index = select.selectedIndex;
var menuOption = select.options[index].value;
var username = GetRequest();
if(menuOption=="Search by email address"){
document.getElementById("username").value = "";
document.getElementById("message").style.display="none";
document.getElementById("search").style.display="block";
document.getElementById("viewAllTable").style.display="none";
}
else if(menuOption=="View all"){
document.getElementById("search").style.display="none";
document.getElementById("searchTable").style.display="none";
document.getElementById("viewAllTable").style.display="block";
viewAll();
}
}
function validateLogin(){
var username = document.getElementById("username").value;
callServlet(username);
}
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function getXMLHttpRequestObject() {
var xmlhttp = 0;
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
// Opera 8.0+, Firefox, Chrome, Safari
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
function editServlet(toEdit,email,changeTo)
{
var parameters = "username="+email+"&toChange="+toEdit+"&changeTo="+changeTo;
var http = new getXMLHttpRequestObject();
var url = "editInformationServlet";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.send(parameters);
}
function callServlet(username){
var http = new getXMLHttpRequestObject();
var url = "Menu";
var parameters = "username=" + username;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
var jsonObj = JSON.parse(http.responseText);
searchTable(jsonObj);
}
http.send(parameters);
}
function deleteGroupServlet(username){
var http = new getXMLHttpRequestObject();
var url = "deleteGroupServlet";
var parameters = "username="+username;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.send(parameters);
}
function addToGroup()
{
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
alert(data);
var email=data[3];
alert(email);
addToGroupServlet(email);
}
}
function addToGroupServlet(email);
{
var parameters = "username="+email+"&managerEmail="+GetRequest();
var http = new getXMLHttpRequestObject();
var url = "addToGroupServlet";
alert("In add to group");
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {// Handler function for call back on
if(http.readyState==4){
alert("addedToGroup");
ViewAllServlet();
}
http.send(parameters);
}
}
function deleteFromGroup(){
var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
e = e || window.event;
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") {
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
alert(data);
var email=data[3];
alert(email);
deleteFromGroupServlet(email);
}
}
function deleteFromGroupServlet(email)
{
var parameters = "username="+email;
var http = new getXMLHttpRequestObject();
var url = "deleteFromGroupServlet";
alert("In delete from group");
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {// Handler function for call back on
if(http.readyState==4){
alert("deletedFromGroup");
ViewAllServlet();
}
}
http.send(parameters);
}
function searchTable(jsonObj) {
var data = '';
data += '<table border=1><tbody><tr>';
data += '<th> ID </th>';
data += '<th> Name </th>';
data += '<th> Salary </th>';
data += '<th> Email address </th>';
data += '<th> Phone number </th>';
for (var i = 0; i < 1; i++) {
data += '<tr>';
data += '<td>' + jsonObj.id + '</td>';
data += '<td>' + jsonObj.name + '</td>';
data += '<td>' + jsonObj.salary + '</td>';
data += '<td>' + jsonObj.email + '</td>';
data += '<td>' + jsonObj.phone + '</td>';
data += '</tr>';
}
data += '</tbody><table>';
document.getElementById("searchTable").innerHTML = data;
}
function viewAll(){
ViewAllServlet();
}
function ViewAllServlet(){
var http = new getXMLHttpRequestObject();
var url = "viewAllServlet";
var email =GetRequest();
var parameters = "username="+email;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {// Handler function for call back on
if(http.readyState==4){
var jsonObj = JSON.parse(http.responseText);
viewAllTable(jsonObj);
setAllInvis();
document.getElementById("viewAllTable").style.display="block";
}
http.send(parameters);
}
}
function viewNoGroupTable(jsonObj)
{
var data = '';
data += '<table border=1><tbody><tr>';
data += '<th> ID </th>';
data += '<th> Name </th>';
data += '<th> Salary </th>';
data += '<th> Email address </th>';
data += '<th> Phone number </th>';
for (var i = 0; i < jsonObj.length; i++) {
data += '<tr>';
//for (var j = 0; j < colMax; j++) {
data += '<td>' + jsonObj[i].id + '</td>';
data += '<td>' + jsonObj[i].name + '</td>';
data += '<td>' + jsonObj[i].salary + '</td>';
data += '<td>' + jsonObj[i].email + '</td>';
data += '<td>' + jsonObj[i].phone + '</td>';
data += '<td><input type="submit" onclick="addToGroup()" value = Add To Group></td>';
//}
data += '</tr>';
}
data += '</tbody><table>';
alert("creating table");
document.getElementById('viewAllNoGroup').innerHTML = data;
document.getElementById('viewAllNoGroup').style.display="block";
}
function viewAllTable(jsonObj) {
var data = '';
data += '<table border=1><tbody><tr>';
data += '<th> ID </th>';
data += '<th> Name </th>';
data += '<th> Salary </th>';
data += '<th> Email address </th>';
data += '<th> Phone number </th>';
for (var i = 0; i < jsonObj.length; i++) {
data += '<tr>';
//for (var j = 0; j < colMax; j++) {
data += '<td>' + jsonObj[i].id + '</td>';
data += '<td>' + jsonObj[i].name + '</td>';
data += '<td>' + jsonObj[i].salary + '</td>';
data += '<td>' + jsonObj[i].email + '</td>';
data += '<td>' + jsonObj[i].phone + '</td>';
data += '<td><input type="submit" onclick="deleteFromGroup()" value = "Delete from Group"></td>';
//}
data += '</tr>';
}
data += '</tbody><table>';
document.getElementById('viewAllTable').innerHTML = data;
}
Not sure the exact problem, im sure im missing something somewhere but its not coming up through eclipse. REALLY NEED HELP !!!! cant figure out the exact location or i would have shortened the files but i felt more is better than less in this instance where i cant find out where the code is breaking. Thank you all

You have an error in your code that i pointed,
You have defined function and ended it using ;
function addToGroupServlet(email);
change above to
function addToGroupServlet(email)

move your:
<script src="./JS/managerMenu.js"></script> tags to the <head> section

you have ended function by ;
function addToGroupServlet(email){
//....
}

Can't create 2 tables

I'm trying to dynamically create a table based on user input, and it's working perfectly, however, it is supposed to make a table based on the super input the user gives, so if super is 2, then it loops to create 2 tables. However it is doing everything but that, because if it was, then the tables would be next to each other, not one below each other as I have set the CSS that way. Any ideas?
<script type="text/javascript">
function createTable()
{
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
var y = 1;
for( var i = 1; i <= num_super; i++){
var theader = '<div style="margin:0 auto;"><table border="1" style="border:1px solid black; float:left;">\n';
for(u = 1; u <= num_rows; u++){
tbody += '<tr>';
for( var j = 0; j < colStart; j++)
{
tbody += '<td style="width:80px; height:70px;">';
tbody += '<sub style="float:right; position:relative; top:24px; z-index:11; ">' + y + '</sub>';
tbody += '</td>';
y++;
}
tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
}
</script>
<body>
<form name="tablegen">
<label>Ports: <input type="text" name="ports" id="ports"/></label><br />
<label>Super Columns: <input type="text" name="super" id="super"/></label><br />
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Columns: <input type="text" name="cols" id="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>
<div id="wrapper"></div>
</body>
</html>
How it should look

It resets the table it created to the new table in current iteration in this line:
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
You have to do something like this:
document.getElementById('wrapper').innerHTML += theader + tbody + tfooter;
In addition to your comment:
var colStart = num_cols / num_super;
Should mabe be:
var colStart = num_cols * num_super;

We Keep Coding

JavaScript is the programming language of the Web.

Create array from Dynamic table - javascript

Related

how to get the text of an html input generated by javascript?

my input return me undefined even though the data is catch. using CRUD js

create a new mobile page using an array already selected in a multiple select checkbox

All javascript functions coming up undefined from html

Can't create 2 tables

Categories

Resources