JavaScript created Inputs, now i need to get the value of those

JavaScript created Inputs, now i need to get the value of those - javascript

I have some script where i have created a Table in Javascript,
in one of the columns it has an Input. now, upon submit i would
like to get the data entered in the input so it can be saved.
here is my code. it will be ugly, sorry!
here is how i have created my table.
schedArray created in another function.
function schedTable() {
var tableCode = '<table id="longCallData" width="99.5%"> <tr> <th>' + schedArray[1][0] + '</th> <th>' + schedArray[1][1] + '</th> <th>' + schedArray[1][2] + '</th><th>' + schedArray[1][3] + '</th> <th>' + schedArray[1][4] + '</th> <th>' + schedArray[1][5] + '</th><th>' + schedArray[1][6] + '</th> <th>' + schedArray[1][7] + '</th> <th>' + schedArray[1][8] + '</th><th>' + schedArray[1][9] + '</th> <th>' + schedArray[1][10] + '</th></tr>';
var oddeven = new Boolean();
for (i = 2; i < schedArray.length; i++) {
oddeven = !oddeven;
tableCode += 'enter code here<tr class="row' + oddeven + '">';
tableCode += '<th>' + schedArray[i][0] + '</th> <th>**<input type="text" name="sched">**</th> <th>' + schedArray[i][2] + '</th><th>' + schedArray[i][3] + '</th> <th>' + schedArray[i][4] + '</th> <th>' + schedArray[i][5] + '</th><th>' + schedArray[i][6] + '</th> <th>' + schedArray[i][7] + '</th> <th>' + schedArray[i][8] + '</th><th>' + schedArray[i][9] + '</th> <th>' + schedArray[i][10] + '</th></tr>';
}
tableCode += '</table>';
var tabSpan = document.getElementById('shiftTable'); //Get display location
tabSpan.innerHTML = tableCode; //Place data in display element
var count = schedArray.length - 2;
var counted = schedArray.length - 2;
var ctnSpan = document.getElementById('countOne'); //Get display location
ctnSpan.innerHTML = count; //Place data in display element
var cntSpan = document.getElementById('countTwo'); //Get display location
cntSpan.innerHTML = counted; //Place data in display element
}
after the user adds their info, they hit the submit button which onclick="submit()".
notes is the text are in the html, choice is the var for the column.
i have attempted a few things here and there including making a new array
and manipulating that, but i am always getting a Null. one time i was able
to get the top of the original array but none of the other data in that array.
function submit() {
var message = confirm("This Will Submit Your Bid And Close Out The Form, Are You Sure You Are Ready To Submit?", "");
if (message != null && message != "") {
var extras = document.getElementById('notes').value;
var choice = " ";
var s = Fo.OpenTextFile('file.csv', 8, true, 0);
s.WriteLine(user.Name + ',' + user.ID + ',,' + choice + ',' + extras);
s.Close();
alert("Thank You!");
}
}
If I use a document.getElementBy*('sched').value with or with out value,
* has been name, class,tag and name using other code with no success.
below is the whole code may be better useful:
<!DOCTYPE html>
<html>
<head>
<HTA:APPLICATION ID="Shift_Bid"
APPLICATIONNAME="ShiftBid"
BORDER="thin"
CAPTION="yes"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="Yes"
SYSMENU="yes"
selection="no"
minimize="yes"
>
<title>Shift Bid</title>
<style type="text/css">
body {overflow:hidden;}
#titleBid {position:absolute; top:10px; left:160px;}
#nameSpace {position:absolute; top:50px; left:200px;}
#oracleSpace {position:absolute; top:50px; left:400px;}
#agentName {border:1px solid black;}
#agentOracle {border:1px solid black;}
#info {position:absolute; top:70px; left:120px; font-size:20px; font-weight:bolder;}
#contentSpace {position:absolute; top:100px; left:5px; width:1250px; height:480px; border:1px solid black; overflow:hidden;}
#countBid {position:absolute; top:580px; left:120px; font-size:20px; font-weight:bolder;}
#notAtion {position:absolute; top:610px; left:5px; width:1250px; height:120px; border:1px solid black; overflow:hidden;}
#comment {position:absolute; top:5px; left:10px; font-size:15pt;}
#notes {position:absolute; top:30px; left:5px; width:1000px; height:80px; border:1px solid black; overflow:hidden;}
#action {position:absolute; top:2px; left:1016px; width:228px; height:114px; padding-left:2px; border:1px solid black; font-size:12pt; font-weight:bolder;}
#submit {position:absolute; top:79px; left:23px; width:180px; height:30px; background-color:green; font-size:15pt; font-weight:bolder;}
table input {width:15px;}
table {border-collapse:collapse; font-size:10pt; margin-left:2px;}
table th {border-top:1px solid black; font-weight:bolder;}
.rowfalse{background-color: #E6E6E6;}
.rowtrue{background-color: #FFFFFF;}
table th:hover {font-size:12pt;}
</style>
<script>
window.resizeTo(1310,800);
var Fo = new ActiveXObject("Scripting.FileSystemObject");
var network = new ActiveXObject('WScript.Network');
var objSysInfo = new ActiveXObject("ADSystemInfo")
var objUser = GetObject("LDAP://" + objSysInfo.UserName)
var user = {'Name': objUser.displayName, 'ID': objUser.sAMAccountName}
var dir = "//directory/of/file";
getForm();
function getAgent(){
var name = user.Name;
var oracle = user.ID;
var nameSpan = document.getElementById('agentName');
nameSpan.innerHTML = ' ' + name + ' ';
var oracleSpan = document.getElementById('agentOracle');
oracleSpan.innerHTML = ' ' + oracle + ' ';
nameSpan.style.color = "#006600";
oracleSpan.style.color = "#006600";
}
function getForm() {
var dataPath = dir + '/Agent_Form.csv';
if(Fo.FileExists(dataPath)){
var dataFile = Fo.OpenTextFile(dataPath,1);
schedArray = new Array();
while(!dataFile.AtEndOfStream){
var line = dataFile.Line - 1;
schedArray[line] = dataFile.readLine();
}
dataFile.close();
for(i=0;i<schedArray.length;i++){
schedArray[i] = schedArray[i].split(",");
}
}
}
function getStuff(){
getAgent();
getTitle();
schedTable();
}
function startUp(){
getForm();
getStuff();
}
function getTitle(){
var title = schedArray[0][1];
var titleData = title;
var titleSpan = document.getElementById('titleBid');
titleSpan.innerHTML = '<h1>' + titleData + '</h1>';
}
function schedTable(){
var tableCode = '<table id="longCallData" width="99.5%"> <tr> <th>' + schedArray[1][0] + '</th> <th>' + schedArray[1][1] + '</th> <th>' + schedArray[1][2] + '</th><th>' + schedArray[1][3] + '</th> <th>' + schedArray[1][4] + '</th> <th>' + schedArray[1][5] + '</th><th>' + schedArray[1][6] + '</th> <th>' + schedArray[1][7] + '</th> <th>' + schedArray[1][8] + '</th><th>' + schedArray[1][9] + '</th> <th>' + schedArray[1][10] + '</th></tr>';
var oddeven = new Boolean();
for(i=2;i<schedArray.length;i++){
oddeven = !oddeven;
tableCode += '<tr class="row'+ oddeven +'">';
tableCode += '<th>' + schedArray[i][0] + '</th> <th><input type="text" name="sched"></th> <th>' + schedArray[i][2] + '</th><th>' + schedArray[i][3] + '</th> <th>' + schedArray[i][4] + '</th> <th>' + schedArray[i][5] + '</th><th>' + schedArray[i][6] + '</th> <th>' + schedArray[i][7] + '</th> <th>' + schedArray[i][8] + '</th><th>' + schedArray[i][9] + '</th> <th>' + schedArray[i][10] + '</th></tr>';
}
tableCode += '</table>';
var tabSpan = document.getElementById('shiftTable');
tabSpan.innerHTML = tableCode;
var count = schedArray.length - 2;
var counted = schedArray.length - 2;
var ctnSpan = document.getElementById('countOne');
ctnSpan.innerHTML = count;
var cntSpan = document.getElementById('countTwo');
cntSpan.innerHTML = counted;
}
function submit(){
var message = confirm("This Will Submit Your Bid And Close Out The Form, Are You Sure You Are Ready To Submit?", "");
if( message!=null && message!=""){
var extras = document.getElementById('notes').value;
var tabSpan = document.getElementById('shiftTable');
tabSpan.getElementsByName("sched")[0].value;
var s = Fo.OpenTextFile('file.csv', 8, true, 0);
s.WriteLine(user.Name+','+user.ID+',,'+tabSpan+','+extras);
s.Close();
alert("Thank You!");
}
}
</script>
</head>
<body onload="startUp()">
<div id="main" >
<div id="agentSpace">
<span id="titleBid"></span>
<div id="nameSpace">
Name :
<span id="agentName"> </span>
</div>
<div id="oracleSpace">
Oracle :
<span id="agentOracle"> </span>
</div>
<div id="info">Please make sure to enter your name and oracle in the fields below.</div>
</div>
<div id="contentSpace">
<span id="shiftTable"></span>
</div>
<div id="countBid">Please list choices from 1-<span id="countOne"></span>, all fields need to be numbered. Top choice is 1, bottom choice is <span id="countTwo"></span>.</div>
<div id="notAtion"><div id="comment">Comments: (ie. Public transportation needs to include what the earliest start and end times)</div><input id="notes" value=""><div id="action">Please Review Your Selections and Make Note if you have Concerns. Then Submit Your Bid. Thank You!<button id="submit"onclick="submit()">Submit</button></div></div>
</div>
</body>
</html>

Maybe it could come from the fact that you call getElementByName instead of getElementsByName.
getElementsByName returns an array, so you should try like this :
document.getElementsByName("sched")[0].value
But you will have to be sure that have only one object that is named sched, or know its index.
Maybe you should also try with the DOM :
var tabSpan = document.getElementById('shiftTable');
// Create table
table = document.createElement("table");
// Create table header lines
tableHeaderLine = document.createElement("tr");
for (j = 0; i <= 10; j++)
{
cell = document.createElement("th");
cell.innerHTML = schedArray[1][j];
tableHeaderLine.appendChild(cell);
}
// Create table lines
for (i = 2; i < schedArray.length; i++)
{
line = document.createElement("tr");
table.appendChild(line);
for (j = 0; i <= 10; j++)
{
cell = document.createElement("th");
if (j == 1)
{
schedInput = document.createElement("input");
schedInput.setAttribute("type", "text");
schedInput.name = "sched";
cell.appendChild(schedInput);
}
else
{
cell.innerHTML = schedArray[i][j];
}
}
}
// Append table to tabSpan
tabSpan.appendChild(table);
Using DOM will permit you to prevent errors coming from HTML Parser when calling innerHTML method.
In this code innerHTML is used separately each time, and you create the input in pure DOM, so you're sure error doesn't come from the parser.

Related

HTML - JavaScript - Adding and Deleting/Hiding Elements

In my website the user is going to select an image, that image will then be inserted into a div tag. I need it so when the user clicks the image that was inserted into the div then it will be removed (deleted or hidden) from the div. I've tried:
document.getElementById("elementId").style.display = "none";
and other similar things. I really just cant get this to work please help!
HTML + JavaScript code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
var cardNumber = 1;
var deck = [];
var addCard = function(cardName)
{
if("undefined" != document.getElementById("card" + cardNumber).value)
{
if(deck.indexOf(cardName) > -1)
{
}
else
{
if(deck.length != 1)
{
deck.push(cardName);
document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = updateCards(' + cardName + ') src = "Images/Cards/' + cardName + '.png">';
cardNumber += 1;
}
if(deck.length >= 1)
{
cardNumber = 1;
}
}
}
}
</script>
</head>
<body>
<div id = "card1" class = "cards"></div>
<div id = "1">
<img class = "cardSize" onclick = "addCard('Archer')" src = "Images/Cards/Archer.png">
</div>
</body>
CSS Code:
.cards
{
height:150px;
width:125px;
float:left;
margin-left:6.2%;
margin-bottom:30px;
border:5px solid #ff6666;
background-color:#ff6666;
}
.cardSize
{
height:150px;
width:125px;
float:left;
margin-left:7%;
margin-top:30px;
}

You can delete the img by id.
Also fix the issue with the updateCards function:
document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = "updateCards(\'' + cardName + '\')" src = "' + cardName + '.png">';
For example,
<div id="card1" class="cards">
<img id="Archer" class="deckCardSize" onclick="updateCards('Archer')" src="Archer.png">
</div>
Then just remove the div with id="Archer":
document.getElementById("Archer").remove();
FYI, I added a simple updateCards function that just hides the img instead of removing it entirely :
var updateCards = function(cardName) {
document.getElementById(cardName).style.display = 'none';
}

You need to attach a click event listener to a class that is applied to all inserted images. the function that the listener fires would then apply css.style.display = "none" to this

First, remove all spaces between attributes and its values (I mean everywhere in your code), that is:
<div id="card1" class="cards"></div><!-- correct -->
<div id = "card1" class = "cards"></div><!-- incorrect -->
Second, you have an error in your code here:
document.getElementById("card" + cardNumber).innerHTML = '<img id = "' + cardName + '" class = "deckCardSize" onclick = updateCards(' + cardName + ') src = "Images/Cards/' + cardName + '.png">';
You have missed double quotes around onclick's value. Replace it with this:
document.getElementById("card" + cardNumber).innerHTML = '<img id="' + cardName + '" class="deckCardSize" onclick="updateCards(' + cardName + ')" src="Images/Cards/' + cardName + '.png">';
Also, you have to define function updateCards(name), it maybe empty, but it must exists. If it doesn't exists, than any javascript code will stops running after you clicked on that image.
Third, <div id = "1"> has an error too. id attribute must starts from a letter.
here is working code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
var cardNumber = 1;
var deck = [];
function addCard(cardName) {
if ("undefined" != document.getElementById("card" + cardNumber).value) {
if (deck.indexOf(cardName) > -1) {
} else {
if (deck.length != 1) {
deck.push(cardName);
document.getElementById("card" + cardNumber).innerHTML = '<img id="img' + cardName + '" class="deckCardSize" onclick="updateCards(\'' + cardName + '\')" src="Images/Cards/' + cardName + '.png">';
cardNumber += 1;
}
if (deck.length >= 1) {
cardNumber = 1;
}
}
}
}
function updateCards(cardName) {
//some work
document.getElementById("img" + cardName).remove();
}
</script>
</head>
<body>
<div id="card1" class="cards"></div>
<div id="main1">
<img class="cardSize" onclick="addCard('Archer')" src="Images/Cards/Archer.png">
</div>
</body>
Tested and worked!

Print wide html table using HTML/css/javascript (with responsive design)

I have tried the code from the article to print my wide table in a single page, that worked great only for Google Chrome. Couldn't get it working on IE as mentioned in the article and comments. Below is my sample code with IE I tried almost for hours and couldn't get the issue.
function printGrid() {
var gridElement = $('#grid'),
printableContent = '',
win = window.open('', '', 'scrollbars=1,resizable=1,width=1150,height=650,left=0,top=0'),
doc = win.document.open(),
dataSource = $("#grid").data("kendoGrid").dataSource;
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<link href="../Content/kendo/2014.1.318/kendo.common.min.css" rel="stylesheet" />' +
'<style>' +
'html { font: 11pt sans-serif; }' +
'.k-grid { border-top-width: 0;}' +
'.k-grid, .k-grid-content { height: auto !important;}' +
'.k-grid-content { overflow: visible !important; }' +
'div.k-grid table { table-layout: fixed; border:1px solid #000000; width: 100% !important; }' +
'.k-grid .k-grid-header th { border-top: 1px solid; border:1px solid #000000;}' +
'.k-grid td {border:1px solid #000000;} ' +
'.k-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
'#media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) {table, thead, tbody, th, td, tr { display:block;width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;float:left;clear:left;}' +
'thead tr {position: absolute;top: -9999px;left: -9999px;}' +
'tr {border: 1px solid #ccc;}' +
'td {border: none;border-bottom: 1px solid #eee;position: relative;padding-left: 50%;height:10px;}' +
'td:before {position: absolute;top: 6px;left: 6px;width: 45%;padding-right: 10px;white-space: nowrap;}' +
'td:nth-of-type(1):before {content: "Column1";}' +
'td:nth-of-type(1):before {content: "Column2";}' +
'td:nth-of-type(1):before {content: "Column3";}' +
'td:nth-of-type(1):before {content: "Column4";}' +
'td:nth-of-type(1):before {content: "Column5";}' +
'td:nth-of-type(1):before {content: "Column6";}' +
'td:nth-of-type(1):before {content: "Column7";}' +
'td:nth-of-type(1):before {content: "Column8";}' +
'td:nth-of-type(1):before {content: "Column9";}' +
'td:nth-of-type(1):before {content: "Column10";}' +
'td:nth-of-type(1):before {content: "Column11";}' +
'td:nth-of-type(1):before {content: "Column12";}' +
'td:nth-of-type(1):before {content: "Column13";}' +
'td:nth-of-type(1):before {content: "Column14";}' +
'td:nth-of-type(1):before {content: "Column15";}' +
'}' +
'#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {' +
'body {padding: 0;margin: 0;width: 320px;}' +
'}' +
'#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {' +
'body {width: 495px;}' +
'}' +
'</style>' +
'</head>' +
'<body>';
var htmlEnd =
'</body>' +
'</html>';
var gridHeader = gridElement.children('.k-grid-header');
if (gridHeader[0]) {
var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
printableContent = gridElement
.clone()
.children('.k-grid-header').remove()
.end()
.children('.k-grid-content')
.find('table')
.first()
.children('tbody').before(thead)
.end()
.end()
.end()
.end()[0].outerHTML;
} else {
printableContent = gridElement.clone()[0].outerHTML;
}
doc.write(htmlStart + printableContent + htmlEnd);
doc.close();
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/ ') >= 0;
var isChrome = !!window.chrome && !isOpera;
if (!isChrome)
win.print();
}

Tried a different solution to print as shown in the demo here http://salman-w.blogspot.com/2013/04/printing-wide-html-tables.html. It worked !
Note: I am using a Kendo grid, with that the following solution perfectly works ! This has some additional filter display stuff.etc. Please remove the same if not required. I am sure it can be optimized, but this is the quick code that works.
function printGrid() {
var gridElement = $('#grid'),
firstprintableContent = '',
lastprintableContent = '',
win = window.open('', '', 'scrollbars=1,resizable=1,width=1150,height=650,left=0,top=0'),
doc = win.document.open(), dataSource = $("#grid").data("kendoGrid").dataSource;
//get the filter values
var filterHtml = "", operator = "", fieldName = "", localCounter = 0;;
var fieldArray = new Array("Field1", "Field2", "Field3", "Field4", "Field5", "Field6", "Field7", "Field8", "Field9", "Field10", "Field11", "Field12", "Field13", "Field14", "Field15");
var nameArray = new Array("Column1", "Column2", "Column3", "Column4", "Column5", "Column6", "Column7", "Column8", "Column9", "Column10", "Column11", "Column12", "Column13", "Column14", "Column15");
//Logic for getting the filters and displaying them on the print page
var currentFilter = dataSource.filter();
if (currentFilter) {
currentFilter.filters.forEach(function (filter, index) {
localCounter = localCounter + 1;
if (filter.operator == "neq")
operator = "not equals to";
if (filter.operator == "eq")
operator = "equals to";
if (filter.operator == "startswith")
operator = "starting with";
for (var iCounter = 0; iCounter < 15; iCounter++) {
if (filter.field == fieldArray[iCounter]) {
fieldName = nameArray[iCounter];
break;
}
}
if (localCounter > 1)
filterHtml += "<p style='padding-left:9.1em'>" + fieldName + " " + operator + " " + "'" + filter.value + "'" + "</p>";
else
filterHtml += fieldName + " " + operator + " " + "'" + filter.value + "'" + "<br/> ";
});
}
else
filterHtml = "None";
var htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<style>' +
'html { font: 11pt sans-serif; }' +
'table { width: 100%; border-collapse: collapse;table-layout:fixed;}' +
'tr:nth-of-type(odd) { background: #eee;}' +
'th { background: #DDDDDD;white-space: nowrap; color: white; font-weight: bold; pointer-events:none;cursor:default;text-decoration:none;}' +
'td, th { padding: 6px; border: 1px solid #ccc; text-align: left;outline:1px solid #ccc}' +
'tr {border: 1px solid #ccc;}' +
'</style>' +
'</head>' +
'<body>' +
'<div class="site-header__logo col-xs-4">' +
'<img src="/Content/images/mark-red-48x52.png" alt=" Products">' +
'<img src="/Content/images/logo-299x63.png" alt="Products">' +
'</div>' + '<br/><br/>' +
'Applied Data Filters' + ':' + " " + filterHtml + '<br/>' +
'<center><strong><h2>' + 'My grid' + '</h2></strong> </center>' + '<br/>';
var htmlEnd = '</body>' + '</html>';
//get the total columns, hidden columns and shown columns
var totalColumns = $("#grid").data("kendoGrid").columns.length;
var hiddencolumnsarray = [];
var showncolumnsarray = [];
if (totalColumns > 0) {
for (i = 0; i < totalColumns; i++) {
if ($("#grid").data("kendoGrid").columns[i].hidden) {
hiddencolumnsarray.push(i);
}
else {
showncolumnsarray.push(i);
}
}
}
if (showncolumnsarray.length > 8) {
iMoreColumns = 1;
//show only the first eight columns if user is viewing more than 8 columns
printfirsteightcolumns();
firstprintableContent = getPrintableContent(gridElement);
printlastsevencolumns();
lastprintableContent = getPrintableContent(gridElement);
} else {
iMoreColumns = 0;
firstprintableContent = getPrintableContent(gridElement);
}
//set the columns visibility back to normal once the print HTML is captured with the respective number of columns
printshowhidecolumns();
if (showncolumnsarray.length > 8)
doc.write(htmlStart + firstprintableContent + "<br/>" + "<div style='page-break-before:always;'>" + lastprintableContent + "</div>" + htmlEnd);
else
doc.write(htmlStart + firstprintableContent + htmlEnd);
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/ ') >= 0;
var isChrome = !!window.chrome && !isOpera;
if (!isChrome)
win.print();
}
function getPrintableContent(gridElement) {
var gridHeader = gridElement.children('.k-grid-header');
if (gridHeader[0]) {
var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
printableContent = gridElement.css('height', '')
.clone()
.children('.k-grid-header').remove()
.end()
.children('.k-grid-content').css('height', '')
.find('table')
.first()
.children('tbody').before(thead)
.end()
.end()
.end()
.end()[0].outerHTML;
} else {
printableContent = gridElement.clone()[0].outerHTML;
}
return printableContent;
}
function printfirsteightcolumns() {
var counter = 0;
var columns = $("#grid").data("kedoGrid").columns;
jQuery.each(columns, function (index) {
if (counter > 8) {
$("#grid").data("kendoGrid").hideColumn(parseInt(counter));
}
counter = counter + 1;
});
}
function printlastsevencolumns() {
var counter = 0;
var columns = $("#grid").data("kedoGrid").columns;
jQuery.each(columns, function (index) {
if (counter > 8) {
$("#grid").data("kendoGrid").showColumn(parseInt(counter));
}
else {
$("#grid").data("kendoGrid").hideColumn(parseInt(counter));
}
counter = counter + 1;
});
}
Cheers,
Srini

creating a html table in javascript

I want to create HTML table in java script. Inside a for loop I want to create a dynamic table which can be extended. This is how I am it using now:
function(json)
{
var content= $('#name1').html('').append('<td> Name: ' + json.name + '<td>');
var content= $('#address1').html('').append('<td> address: ' + json.address + '<td>');
var content= $('#age1').html('').append('<td> age: ' + json.age + '<td>');
var content= $('#status1').html('').append('<td> status: ' + json.status + '<td>');
}
HTML file is
<table>
<tr id="name1"></tr>
<tr id="address1"></tr>
<tr id="age1"></tr>
<tr id="status1"></tr>
</table>
now it is just with hardcore values but I want it auto generated and insert more rows if neccessary...

remove id from tr. Because if you need multiple row then id will be duplicated which is not valid.
<table id="mytable">
</table>
function(json)
{
for(i=0;i<json.length;i++){
var newRow= $("<tr></tr>");
newRow.append('<td> Name: ' + json[i].name + '<td>');
newRow.append('<td> address: ' + json[i].address + '<td>');
newRow.append('<td> age: ' + json[i].age + '<td>');
newRow.append('<td> status: ' + json[i].status + '<td>');
$("#mytable").append(newRow);
}
}

i think this will help you
function(json)
{
for(i=0;i<jsn.length;i++){
$('#YOUR_TABLE_ID').append("<tr><td>"+ json.name+"</td></tr>")
}
}

<table id="mytable">
<tr id="name1"><td></td></tr>
</table>
if (results != null && results.length > 0) {
// Build our table header
var content = "";
for(i=0;i<data.length;i++)
{
content += '<tr>';
content += '<td></td>'
}
content += '</tr>';
}
$("#mytable tbody").append(content);
}

You can Use Append Method to create Rows in a table like
for(i=0;i<data.length;i++)
{
$("YOUR_TABLE_ID").append("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['address']+"</td><td>"+data[i]['age']+"</td><td>"+data[i]['status']+"</td></tr>");
}

I'm not clear with your requirement but i can provide you some basic code hope that helps you.
var jsonList = [{name:'Jhon',address:'Jhon Address goes here',age:'27',status:'Single'},
{name:'Smith',address:'Smith Address goes here' ,age:'32', status:'Single' }];
function createTable(){
var table = '<table>';
for(var ind=0;ind< jsonList.length;ind++)
table += fetchRowInformation(jsonList[ind]);
console.log(table+'</table>');
}
function fetchRowInformation(json){
return '<tr><td> Name: ' + json.name + '<td>'+'<td> address: ' + json.address + '<td>'+ '<td> age: ' + json.age + '<td>'+'<td> status: ' + json.status + '<td></tr>';
}
JS Fiddle Demo

function tableCreate(rows, columns) {
var body = document.body
tbl = document.createElement('table');
tbl.style.width = '20%';
tbl.style.border = '1px solid black';
for (var i = 0; i < rows; i++) {
var tr = tbl.insertRow();
for (var j = 0; j < columns; j++) {
var td = tr.insertCell();
td.appendChild(document.createTextNode('Cell'));
td.style.border = '1px solid black';
}
}
tbl.style.marginTop = '10px'
tbl.style.borderCollapse = 'collapse'
td.style.padding = '2px'
body.appendChild(tbl);
}
tableCreate(15, 10);

Drag/drop & delete dynamic text on HTML canvas

I've found a number of tutorials online for dragging and dropping images and shapes within an HTML canvas. But they all seem to be aimed at moving objects that are generated within the canvas when the page loads. I'm building an app that lets the user click a button on a virtual keyboard, then click on the canvas to have the corresponding number or character appear. This is my code:
<script type="text/javascript">
var mathCanvas = document.getElementById("matharea");
var ctx = mathCanvas.getContext("2d");
ctx.font="20px Arial";
var placementCallback = function(){}
mathCanvas.onselectstart = function(){return false;}
function insertOne(){placementCallback = function(x, y){ctx.fillText('1', x-6,y+6);}};
function insertTwo(){placementCallback = function(x, y){ctx.fillText('2', x-6,y+6);}};
function insertThree(){placementCallback = function(x, y){ctx.fillText('3', x-6,y+6);}};
mathCanvas.onclick = function(event){
placementCallback(event.offsetX, event.offsetY);
}
</script>
I cut out some of the insert functions to keep this shorter (the buttons in my HTML have an onclick attribute that calls these functions). I need to be able to select the characters that are placed on the screen and implement drag/drop and delete functionality, but I can't think of a way to do this for text that gets placed on the screen after the page loads (I'm fairly new to Javascript). How would I do this? I'm not expecting anyone to give me the code to do this, but if I could get a push in the right direction, that'd be great.

The problem is that canvas is immediate-mode. Whatever you tell it to put on the canvas it will put on the canvas, instantly. It will not give you the ability to modify that value in any way, shape or form.
Think of it like the difference between MS Paint (or your OS' equivalent) and Photoshop.
In PS, you can have layers which can be moved around and edited, and when you decide your image is done, you save it and it flattens all of that data.
When you make an image in MS Paint, as soon as you click or type, that thing that you put there is there, and it's not moving/being edited unless you erase it, draw over it, or draw a rectangle around a section and move that whole rectangle (including the pixels around what you're trying to edit).
Just calling fillText will paint the words on, that instant, but will not remember what it drew, where it is, what it is, how the text is different from the surrounding pixels, et cetera.
So your generalized solution is that you need to turn your text into objects, and then draw an aspect (the text-content) of those objects to the screen.
If your text changes, you can make a change in the object, and redraw it (because your object will have its X and Y coordinates stored, and will have its width value stored, using the context.measureText(textObj.text).width method/property), and when you click on the canvas, you can check the coordinates of the click, and if those coordinates intersect with your text-object's stored coordinates, then you can modify its position on the screen.
In that regard, you should look into those examples which deal with dragging objects on the canvas.
The button click should be treated as a way to CREATE one of those objects.

I know this is a lot of code ... But I didn't want to go through it .. It's PART of something I built a long time ago ... Just copy and paste into a html file ... I hope it helps with what you need:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script>
;(function($) {
$.fn.insertAtCaret = function (myValue) {
return this.each(function() {
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
} else if (this.selectionStart || this.selectionStart == '0') {
//MOZILLA / NETSCAPE support
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
})(jQuery);
$(function go_prev() {
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" />');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 90) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'top' : 10,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<script>
var NumIms = 0;
var NumTxts = 0;
//IMAGE VARIABLES
var ImIds=[];
var ImNm=[];
var ImWdth=[];
var ImHght=[];
//TEXT VARIABLES
var TxtIds=[];
var Txt=[];
var TxtFnt=[];
var TxtCol=[];
var TxtSz=[];
var MyWidth;
var MyHeight;
var img;
function MoveOver(id,Rid) {
var img = new Image();
img.src = Rid;
MyWidth = img.width;
MyHeight = img.height;
$("#UpIm" + id).append("W=" + MyWidth + " H=" + MyHeight);
$("#containment-wrapper").append('<div id="AdIm' + id + '" class="draggable ui-widget-content" style="width:' + MyWidth + 'px; height:' + MyHeight + 'px; background-image: url(' + Rid + '); position:absolute; left:18px; top:18px;"></div>');
ImIds[id]="AdIm" + id;
ImNm[id]=Rid;
ImWdth[id]=MyWidth;
ImHght[id]=MyHeight;
$( "#AdIm" + id ).draggable();
var f = document.getElementById('UpIm' +id);
var Olddiv = document.getElementById('ul' + id);
f.removeChild(Olddiv);
}
</script>
<script>
function removeIm(id) {
var f = document.getElementById('files');
var Folddiv = document.getElementById('UpIm' + id);
f.removeChild(Folddiv);
var d = document.getElementById('containment-wrapper');
var Dolddiv = document.getElementById('AdIm' + id);
d.removeChild(Dolddiv);
ImIds.splice(id,1,"deleted");
}
</script>
<script type="text/javascript" >
var iid = -1;
var pic_real_width, pic_real_height, img;
function removeFormIm(Rid,id) {
var f = document.getElementById('files');
var Folddiv = document.getElementById('UpIm' + id);
f.removeChild(Folddiv);
var d = document.getElementById('containment-wrapper');
var Dolddiv = document.getElementById('AdIm' + id);
d.removeChild(Folddiv);
}
</script>
<style>
#containment-wrapper { width: 845px; height:150px; border:2px solid #ccc; }
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.t_t{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
<script>
function changeTxt(id){
var my_txt;
my_txt = document.getElementById('TxtIn' + id).value;
document.getElementById('AdText' + id).innerHTML = my_txt;
Txt[id] = my_txt;
}
</script>
<script>
function makebold(id){
$('#TxtIn' + id).insertAtCaret('<b></b>');
changeTxt(id);
}
function makeitalic(id){
$('#TxtIn' + id).insertAtCaret('<i></i>');
changeTxt(id);
}
function makecenter(id){
var my_txt;
my_txt = document.getElementById('TxtIn' + id).value;
$("textarea#TxtIn" + id).val('<center>' + my_txt + '</center>');
changeTxt(id)
}
function makebr(id){
$('#TxtIn' + id).insertAtCaret('<br>');
changeTxt(id);
}
function makelink(id){
get_color = document.getElementById('fcolor' + id).value;
$('#TxtIn' + id).insertAtCaret('');
changeTxt(id);
}
function makeh2(id){
$('#TxtIn' + id).insertAtCaret('<H2></H2>');
changeTxt(id);
}
function makeh3(id){
$('#TxtIn' + id).insertAtCaret('<H3></H3>');
changeTxt(id);
}
</script>
<script>
function callFontType(id){
var type;
type = document.getElementById('ftype' + id).value;
document.getElementById('AdText' + id).style.fontFamily=type;
TxtFnt[id] = type;
}
</script>
<script>
function CxColor(id){
var Clor;
Clor = document.getElementById('fcolor' + id).value;
Clor = '#' + Clor;
document.getElementById('AdText' + id).style.color=Clor;
TxtCol[id] = Clor;
}
</script>
<script>
function changeFSize(id){
var my_size;
my_size = document.getElementById('SizeIn' + id).value;
my_size = my_size + 'px';
document.getElementById('AdText' + id).style.fontSize = my_size;
TxtSz[id] = my_size;
}
</script>
<script>
var id = -1;
function addFormField() {
id = id + 1;
$("#divTxt").append("<span id='row" + id + "'><small>Add: to textbox:</small><input value=\"b\" onclick=\"makebold(" + id + ")\" title=\"bold: <b>text</b>\" type=\"button\"><input value=\"i\" onclick=\"makeitalic(" + id + ")\" title=\"italic: <i>text</i>\" type=\"button\"><input value=\"center\" onclick=\"makecenter(" + id + ")\" title=\"center: <center>text</center>\" type=\"button\"><input value=\"BR\" onclick=\"makebr(" + id + ")\" title=\"BR: <br>\" type=\"button\"><input value=\"link\" onclick=\"makelink(" + id + ")\" title=\"link: <a href= >URL</a>\" type=\"button\"><input value=\"H2\" onclick=\"makeh2(" + id + ")\" title=\"H2: <H2>text</H2>\" type=\"button\"><input value=\"H3\" onclick=\"makeh3(" + id + ")\" title=\"H3: <H3>text</H3>\" type=\"button\"><br><table><tr><td><a onClick='removeFormField(\"#row" + id + "\",\"" + id + "\"); return false;'>REMOVE</a></td><td> <textarea cols=50 rows=5 name='txt[]' id='TxtIn" + id + "' onKeyUp=\"changeTxt(" + id + ");\">Text " + id + "</textarea></td><td>Font:<select onChange=\"callFontType(" + id + ");\" id=\"ftype" + id + "\"><option value=\"Arial, Helvetica, sans-serif\">Arial</option><option value=\"Impact, Charcoal, sans-serif\">Impact</option><option value=\"Palatino Linotype, Book Antiqua, Palatino, serif\">Palatino</option><option value=\"Tahoma, Geneva, sans-serif\">Tahoma</option><option value=\"Century Gothic, sans-serif\">Century Gothic</option><option value=\"Lucida Sans Unicode, Lucida Grande, sans-serif\">Lucida Grande</option><option value=\"Arial Black, Gadget, sans-serif\">Arial Black</option><option value=\"Times New Roman, Times, serif\">Times New Roman</option><option value=\"Arial Narrow, sans-serif\">Arial Narrow</option><option value=\"Verdana, Geneva, sans-serif\">Verdana</option><option value=\"Copperplate, Copperplate Gothic Light, sans-serif\">Copperplate</option><option value=\"Lucida Console, Monaco, monospace\">Lucida Console</option><option value=\"Gill Sans, Gill Sans MT, sans-serif\">Gill Sans</option><option value=\"Trebuchet MS, Helvetica, sans-serif\">Trebuchet</option><option value=\"Courier New, Courier, monospace\">Courier New</option><option value=\"Georgia, Serif\">Georgia</option></select><br>Color: <input id=\"fcolor" + id + "\" class=\"color\" value=\"000000\"><img src=\"go.png\" style=\"vertical-align:middle;\" onClick='CxColor(" + id + ");'><br>Size: <input type='text' size='4' value=\"12\" name='txt[]' id='SizeIn" + id + "' onKeyUp=\"changeFSize(" + id + ");\"></td></tr></table><br><hr style=\"width:800px; float:left;\"><br></span>");
$("#containment-wrapper").append('<span id="AdText' + id + '" class="draggable ui-widget-content" style="position:absolute; left:18px; top:18px; font-size:16px; font-family:Arial, Helvetica, sans-serif;">Text ' + id + '</span>');
$( "#AdText" + id ).draggable();//{ containment: "#containment-wrapper", scroll: true }
$('#fcolor' + id).load(jscolor.init());
TxtIds[id] = "AdText" + id;
Txt[id] = "Ad Text";
TxtFnt[id] = "Arial";
TxtCol[id] = "#000000";
TxtSz[id] = "16";
$('#row' + id).highlightFade({
speed:1000
});
document.getElementById("id").value = id;
}
function removeFormField(Rid,id) {
$(Rid).remove();
var d = document.getElementById('containment-wrapper');
var olddiv = document.getElementById('AdText' + id);
d.removeChild(olddiv);
TxtIds.splice(id,1,"deleted");
}
function GetURL(id) {
var gurl;
var Ims = "";
var len=ImIds.length;
NumIms = 0;
NumTxts = 0;
//############ Start Get Images for URL ##############
for(var i=0; i<len; i++) {
NumIms++;
var value = ImIds[i];
Ims += '&ImName' + i + '=' + value;
if (value != "deleted"){
value = ImNm[i];
Ims += '&ImNm' + i + '=' + value;
value = ImWdth[i];
Ims += '&ImWidth' + i + '=' + value;
value = ImHght[i];
Ims += '&ImHeight' + i + '=' + value;
value = $('#AdIm' + i).position().left - $('#AdIm' + i).closest('#containment-wrapper').position().left;
Ims += '&ImLt' + i + '=' + value;
value = $('#AdIm' + i).position().top - $('#AdIm' + i).closest('#containment-wrapper').position().top;
Ims += '&ImTop' + i + '=' + value;
}
}
//########### End Get Images For URL #####################
len=TxtIds.length;
//############ Start Get Texts for URL ##############
for(var i=0; i<len; i++) {
NumTxts++;
var value = TxtIds[i];
Ims += '&TxtName' + i + '=' + escape(value);
if (value != "deleted"){
value = Txt[i];
Ims += '&Txt' + i + '=' + escape(value);
value = TxtFnt[i];
Ims += '&TxtFnt' + i + '=' + escape(value);
value = TxtCol[i];
value = value.substring(1);
Ims += '&TxtCol' + i + '=' + escape(value);
value = TxtSz[i];
Ims += '&TxtSz' + i + '=' + escape(value);
value = $('#AdText' + i).position().left - $('#AdText' + i).closest('#containment-wrapper').position().left;
Ims += '&TxtLt' + i + '=' + value;
value = $('#AdText' + i).position().top - $('#AdText' + i).closest('#containment-wrapper').position().top;
Ims += '&TxtTop' + i + '=' + value;
}
}
//########### End Get Texts For URL #####################
gurl = "ad.php?AdType=hero&ImNum=" + NumIms + "&TxtNum=" + NumTxts;
gurl = gurl + Ims;
//alert(gurl);gurl = escape( gurl );
$("#genurl" + id).html('<textarea id="fe_text" cols=50 rows=5 name="ad_url">' + gurl + '</textarea><br><br><table><tr><td><font style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#009999">Preview Gernerated Ad:</font></td><td><img src="view.png"></td></tr></table><br>');
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform1").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform1").serialize(), function(data) {
$('#results').fadeIn('fast');
var mySplitResult = data.split("|||");
if(mySplitResult[1] !== "fail" && mySplitResult[1] !== "disable"){
$('#upd1').html('<textarea id="fe_text" cols=50 rows=5 readonly="readonly">' + mySplitResult[1] + '</textarea><br />');
}
$('#results').html(mySplitResult[0]);
$('#prev1').html(mySplitResult[1]);
setTimeout(function() {
$('#results').fadeOut('slow');
}, 2500);
});
}
});
});
</script>
<script type="text/javascript" src="jscolor.js"></script>
</head>
<body>
<div id="containment-wrapper">
<!--<span id="AdText0" class="draggable ui-widget-content">For Testing ... </span> -->
</div>
<div style="margin-left:50px;">
<center><p style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#FF0099">Text Field Input</p>
<p>Add Text Field</p></center>
<form action="#" method="get" id="form1" style="font-family:Arial, Helvetica, sans-serif; font-size:16px;">
<input type="hidden" id="id" value="1">
<div id="divTxt"></div>
</form>
</div>
<!-- End Hidden Divs -->
</body>
</html>

sending post with no callback, getting too much recursion

So I'm working on a pre-existing site and I'm trying to add in a point where the code sends out some data. When it gets to my .post() I get the following error:
too much recursion
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
Line 16
Here's the flow:
Some link text has the following onclick handler:
<a class="lucida_12pxBlueLH16" onclick="changeCipherAdmin(6); return false;" href="#">Keyword: SLEEP</a>
function changeCipherAdmin(num) {
tempHTML = '';
tempHTML += '<select id="select_cipher' + num + '" name="select_cipher' + num + '" class="select_tanbg" onchange="updateKeyFieldsAdmin(this.value,' + num + ',1);">';
tempHTML += ' <option id="option' + num + '_admin1" value="1">Additive</option>';
tempHTML += ' <option id="option' + num + '_admin2" value="2">Affine</option>';
tempHTML += ' <option id="option' + num + '_admin3" value="3">Caesar</option>';
tempHTML += ' <option id="option' + num + '_admin4" value="4">Keyword</option>';
tempHTML += ' <option id="option' + num + '_admin5" value="5">Multiplicative</option>';
tempHTML += ' <option id="option' + num + '_admin6" value="6">Vigenère</option>';
tempHTML += '</select>';
document.getElementById('admin_cipher' + num).innerHTML = tempHTML;
document.getElementById('option' + num + '_admin' + ciphers[num]).selected = true;
updateKeyFieldsAdmin(ciphers[num], num, 0);
}
Based on that it runs the following function
function updateKeyFieldsAdmin(cipherNum, selectNum, resetNum) {
//tempHTML=''+possible_ciphers[cipherNum]+'';
//document.getElementById('admin_cipher'+selectNum).innerHTML=tempHTML;
if (resetNum == 0) {
keyA = keysA[selectNum];
keyB = keysB[selectNum];
}
if (cipherNum == 1) {
//0-25
//change letter to number, add encryption key (two characters?), reduce mod 26
//additive: use a:number
if (resetNum == 1) {
keyA = "";
keyB = "";
}
tempHTML = '<strong class="helvetica11pxTanB">Key (0-25)</strong> <input type="text" id="key_a' + selectNum + '" maxlength="2" class="form_field11px" style="width:19px; height:12px; text-align:right; color:#000000;" value="' + keyA + '" onkeyup="checkKeysAdmin(1,' + selectNum + '); return false;" autocapitalize="off" autocorrect="off" />';
}
else if (cipherNum == 6) {
//vigenere: use a:word--26 letters or less
if (resetNum == 1) {
keyA = "";
keyB = "";
}
tempHTML = '<strong class="helvetica11pxTanB">Keyword</strong> <input type="text" id="key_a' + selectNum + '" maxlength="26" class="form_field11px" style="width:99px; height:12px; text-align:right; color:#000000;" value="' + keyA + '" onkeyup="checkKeysAdmin(event,6,' + selectNum + '); return false;" autocapitalize="off" autocorrect="off" />';
}
document.getElementById('admin_key' + selectNum).innerHTML = tempHTML;
if ((cipherNum == 2 || cipherNum == 5) && !isNaN(keyA) && keyA != "") {
//update select field
if (cipherNum == 2) {
$('#key_a' + selectNum).val(keyA);
}
else {
for (i = 1; i < odd_nums_prime26.length; i++) {
if (keyA * 1 == odd_nums_prime26[i]) {
document.getElementById('key_a' + selectNum).selectedIndex = i;
document.getElementById('option' + selectNum + '_mult' + i).selected = true;
break;
}
}
}
}
if (resetNum == 1) {
checkKeysAdmin(cipherNum, selectNum);
}
}
Which then calls the below:
function checkKeysAdmin(e, cipherNum, row) {
encrypt_ready = true;
if (encrypt_ready == true) {
//keyA and keyB should already be updated...so:
keysA[row] = keysA;
keysB[row] = keysB;
ciphers[row] = cipherNum;
ciphertext[row] = encryptTextAdmin(plaintext[row], cipherNum);
document.getElementById('cipher' + row).innerHTML = ciphertext[row];
// This is my code where Im trying to send my data out
if (e.keyCode == 13 ) {
alert( 'here2' );
$.post('/challenges/save.php', { action:'updateJokeMessage',
messageId:message_ids[row],
joke:message_text[row],
punchline:plaintext[row],
encryptedPunchline:ciphertext[row],
cipherId:cipherNum,
keyA:keysA[row],
keyB:keysB[row]
});
alert( 'Done' );
}
return;
}
else {
//alert("not ready to encrypt");
document.getElementById('cipher' + row).innerHTML = '';
}
// me trying to stop the recursion
event.stopPropagation();
}
I've tried adding in a call back and putting in event.stopPropagation or returning etc. But can't figure out why. Any thoughts/help would be appreciated.

So it ended up being a var typo:
keysA[row] = keysA;
keysB[row] = keysB;
Which was basically assigning the object to one of it's elements, which caused the recursion when jquery tried to process that.

I strongly suspect that your problem is here:
keysA[row] = keysA;
keysB[row] = keysB;
You're making a circular structure, and jQuery is losing its mind when it's trying to trace its way through the parameter object.

We Keep Coding

JavaScript is the programming language of the Web.