Trouble using createElement for new button with onclick

chrscote

05-13-2009, 08:13 PM

I am trying to use createElement to create a button that will have code in the onClick event. This onClick function needs to send an id value which it gets from an ASP page thru AJAX. The problem I have is that, although I am sending the correct value to the javascript, the ajax function isn't receiving the correct value. So, when I click the button that is created, I'm not sending the correct value either.
Here is the code I have so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Cable Editing Form</title>
<script type="text/javascript">
function addCN() {
var newCN;
var newID
if (Number(document.getElementById("ecpID").value)>0) {
if (document.getElementById("newCN").value=="") {
alert("Please enter the Change Notice number before clicking the '+' button.");
} else {
if (document.getElementById("ecpID").value!="") {
newCN = document.getElementById("newCN").value;
document.getElementById("cnNum").value=newCN;
newID = ajaxFunction("a");
var tableRef = document.getElementById('myTable');
var rowCount = tableRef.getElementsByTagName("TR").length-1;
var newRow = tableRef.insertRow(rowCount);
var newCell = newRow.insertCell(0);
var newText = document.createTextNode(newCN);
newCell.appendChild(newText);
var newBtn = document.createElement("input");
newBtn.type = "button";
newBtn.id="delete";
newBtn.value = "-";
//Use newID in function here.
newBtn.onclick=function(){removeCN(newID,this.parentNode.parentNode.rowIndex);}
newCell.appendChild(newBtn);
}
}
} else {
alert("You must add a new ECP before adding Change Notice numbers.");
}
}
function removeCN(id, row) {
var rowNum;
var CN_id;

CN_id = id;
rowNum = row;
var tableRef = document.getElementById('myTable');
tableRef.deleteRow(rowNum);
//alert("delete "+CN_id);
ajaxFunction("d", CN_id);
}
function ajaxFunction(addDel, id) {
var xmlhttp;
var newId, cnNum;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.getElementById("newCN").value="";
newId = xmlhttp.responseText;
return newId;
}
}
if (addDel=="a") {
cnNum = document.getElementById("cnNum").value;
ecpID = document.getElementById("ecpID").value;
url = "ECD_CNAdd.asp?ad=a&cnNum="+cnNum+"&ecpID="+ecpID;
} else {
var CNID = id;
if (CNID!=null) {
ecpID = document.getElementById("ecpID").value;
cnNum = document.getElementById("cnNum").value;
url = "ECD_CNAdd.asp?ad=d&cnID="+CNID+"&ecpID="+ecpID;
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
</script>
</head>

<body>

<form id="form1" action="ECD_propsCNSub.asp" method="post">
<input type="hidden" name="id" id="id" value="" />
<input type="hidden" id="ecpID" name="ecpID" value="2143" />
<table id="myTable">
<tr>
<td><b>Associated<br />Change Notices</b></td>
</tr>
<tr>
<td><u>CN Number</u></td>
</tr>

<div id="newVals"></div>
<input type="hidden" name="cnNum" id="cnNum" />
<tr>
<td><input type="text" id="newCN" value="" size="3" class="text" /> <input type="button" onclick="javascript:addCN()" id="add" value="+" /></td>
</tr>
</table>
</form>
</body>
</html>
In my asp page, for testing purposes, I just have it display the number 250, but when I get to the newID line of code, I'm not even sure if I'm using it correctly a few lines down in the onClick line. I hope someone can help me out. I really appreciate it.

Chris

Old Pedant

05-13-2009, 10:40 PM

Code makes no sense:

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.getElementById("newCN").value="";
newId = xmlhttp.responseText;
return newId;
}
}

It makes no sense to return anything from an onreadystatechange function, because that function is invoked by the XMLHTTP object and it has no idea what to do with any returned value. In point of fact, it ignores any value returned.

I *THINK* that what you meant to do was this:

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.getElementById("newCN").value = xmlhttp.responseText;
}
}

chrscote

05-14-2009, 03:48 PM

Actually what I'm trying to do in that code is that first, I reset the input box to being empty then I want to return the value that is given by the ASP page to be used as a value in the "-" function of the button that I create using createElement. I've never used AJAX before to update a web page, so all this help is appreciated.

Chris

12 Pack Mack

05-14-2009, 06:12 PM

chrscote:

IDs must be unique. You cannot assign the same ID to more than one element.

You shouldn't use tables for page layout. Use CSS instead. Tables are meant to be used with tabular data.

I have no idea what you are attempting to do with that AJAX section.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var nForm = "";
var nFloor = "";

function removeField(nField){

nField.parentNode.parentNode.parentNode.removeChild(nField.parentNode.parentNode);
}

function insertField(){

var nClone = nForm.getElementsByTagName('div')[0].cloneNode(true);
nForm.insertBefore(nClone,nFloor);
var deleteBtn = document.createElement('input');
deleteBtn.type = "button";
deleteBtn.value = "Remove";
deleteBtn.className = "deleteBtn";
deleteBtn.onclick = function()
{
removeField(this)
}
var lastLabel = nForm.getElementsByTagName('div')[nForm.getElementsByTagName('div').length-1].getElementsByTagName('label')[0];
lastLabel.getElementsByTagName('input')[0].value = "";
lastLabel.appendChild(deleteBtn);
}

function init(){

nForm = document.forms[0];
var insertBtn = document.getElementById('newFieldBtn')
insertBtn.onclick = function()
{
insertField();
}
nFloor = insertBtn;
}

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

</script>
<style type="text/css">

.fieldContainer {margin-bottom: 8px;}
.deleteBtn {margin-left: 5px;}
.newValue {margin-left: 25px;}

</style>
</head>
<body>
<form action="process.php" method="post">

<div class="fieldContainer">
<label>Something Important:<input type="text" name="vipInfo[]" class="newValue"></label>
</div>

<input type="button" id="newFieldBtn" value="New Field">
<input type="submit" name="submit" value="Submit">

</form>
</body>
</html>