Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2003
    Location
    Jewett City, CT
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Trouble using createElement for new button with onclick

    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:
    Code:
    <!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" />&nbsp;<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

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,720
    Thanks
    80
    Thanked 4,515 Times in 4,479 Posts
    Code makes no sense:
    Code:
                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:
    Code:
                xmlhttp.onreadystatechange=function() {
                    if (xmlhttp.readyState==4) {
                        document.getElementById("newCN").value = xmlhttp.responseText;
                    }
                }

  • #3
    New Coder
    Join Date
    May 2003
    Location
    Jewett City, CT
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by chrscote; 05-14-2009 at 03:50 PM. Reason: Forgot some explanative info.

  • #4
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    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.
    Code:
    <!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>
    Last edited by 12 Pack Mack; 05-15-2009 at 05:26 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •