SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    DHTML Button onclick event issue

    I am dynamically building a button but I am having difficulty having this button have an onclick function. The problem is that I have to dynamically build a variable it passes the onclick method.

    Here is what I have...

    Code:
    var newButton = document.createElement('input');
    newButton.setAttribute('type', 'button');
    newButton.setAttribute('value', 'Delete');
    Now I have seen 2 different ways this can be accomplished.

    Code:
    newButton.setAttribute("onclick", "removeDIV(Number);");
    
    or
    
    newButton.onclick = function() { removeDIV(Number) };
    The problem is that I need to dynamically build Number and the above 2 examples do not work. The second one actually works but I can not get it to work if I have to dynamically add a Number.

    For example... this does NOT work.

    Code:
    newButton.onclick = new function( "removeDIV(" + Number + ")" );
    Can someone provide me with some assistance on how to build a onclick event into a button using DHTML?

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got this to work, it might be because a Function object has a capital F and you had a lower case one.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var buttonNumber = 1;
    
    function makeButton() {
    	var newButton = document.createElement('input');
    	newButton.setAttribute('type', 'button');
    	newButton.setAttribute('value', 'Delete ' + buttonNumber);
    	newButton.onclick = new Function("removeDIV(" + buttonNumber++ + ");");
    	
    	document.body.appendChild(newButton);
    }
    
    function removeDIV(id) {
    	alert(id);
    }
    
    window.onload = function() {
    	makeButton();
    	makeButton();
    	makeButton();
    }
    </script>
    </head>
    <body></body>
    </html>
    Having said that, is your button going to be inside the div that you want to remove? You could get rid of the id all together and traverse the DOM to get to the div from the button and then remove it.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your response but that was not the issue for me. The big difference between what I have and what you posted is that my JavaScript creates the text boxes after the page loads. Yours does it on page load.

    Attached is my code. See the addFFDelete function. If you can get it to work, I would very much appreciate you pointing out what I have done wrong.

    Thanks

    Code:
    <html>
    
    <head>
    <title>Dynamic Text Box Generation</title>
    
    <script language="javascript">
    
    function addFFInfo()
    {
       //--- get the last number created 
       var lastNumber = document.getElementById('lastNumber');
       lastNumber.value = lastNumber.value + 1;   
    
       addFFShortName(lastNumber);
    
       addFFMgmtCompany(lastNumber);
    
       addFFDelete(lastNumber);
    }
    
    function addFFShortName(lastNumber)
    {
       //--- DIV element will place the text box on the next line and allow it to be deleted
       var divIdName = "myDiv" + lastNumber; 
       var newDiv = document.createElement('div');
       newDiv.setAttribute("id", divIdName);
    
       //--- get the element reference for the FF Short Name 
       var elFFShort = document.getElementById("ffShortName"); 
    
       //--- build the new text box
       var newText = document.createElement('input');
       newText.setAttribute('type', 'text');
       newText.setAttribute('name', 'ffShortNameVal');
       newText.setAttribute('id', 'ffShortNameVal');
       newText.setAttribute('size', 15);
    
       //--- maxlength does not work - will handle with Java
       newText.setAttribute('maxlength', 15);
    
       //--- add the text box to the DIV element
       newDiv.appendChild( newText ); 
    
       //--- add the DIV element box to the element node 
       elFFShort.appendChild( newDiv );
    }
    
    function addFFMgmtCompany(lastNumber)
    {
       //--- DIV element will place the text box on the next line and allow it to be deleted
       var divIdName = "myDiv" + lastNumber; 
       var newDiv = document.createElement('div');
       newDiv.setAttribute("id", divIdName);
    
       //--- get the element reference for the FF Short Name 
       var elFFMgmt = document.getElementById("ffMgmt"); 
    
       //--- build the new text box
       var newText = document.createElement('input');
       newText.setAttribute('type', 'text');
       newText.setAttribute('name', 'ffMgmtVal');
       newText.setAttribute('id', 'ffMgmtVal');
       newText.setAttribute('size', 8);
       
       //--- maxlength does not work - will handle with Java
       newText.setAttribute('maxlength', 8); 
    
       //--- add the text box to the DIV element
       newDiv.appendChild( newText ); 
    
       //--- add the DIV element box to the element node 
       elFFMgmt.appendChild( newDiv );
    }
    
    function addFFDelete(lastNumber)
    {
       //--- DIV element will place the text box on the next line and allow it to be deleted
       var divIdName = "myDiv" + lastNumber; 
       var newDiv = document.createElement('div');
       newDiv.setAttribute("id", divIdName);   
    
       
    
       //--- build the new text box
       var newButton = document.createElement('input');
       newButton.setAttribute('type', 'button');
       newButton.setAttribute('value', 'Delete');
       
       //---*** this line is not working ***---
       newButton.onclick = new Function("removeDIV(" + lastNumber + ");");
       
       //newButton.onclick = function() { removeDIV( document.getElementById('lastNumber') ) };
    
       //newButton.setAttribute("onclick", "removeDIV(1);"); 
    
       //newButton.onclick = new function( "removeDIV(" + lastNumber + ")" );   
       
       //newButton.onclick = function() { removeDIV() };
       
    
       //--- get the element reference for the Delete link 
       var elFFDelete = document.getElementById("ffDelete");
    
       //--- add the link to the DIV element
       newDiv.appendChild( newButton );
    
       elFFDelete.appendChild( newDiv );
    }
    
    function removeDIV(id)
    {
       alert("id = " + id);   
    }
    
    function buildValues()
    {
       buildFFVPMGMT();   
    
       buildMultipleShortNames();
    }
    
    function buildFFVPMGMT()
    {
       var commaDelimited;   
    
       //--- get the element reference for the FF Mgmt Name array
       var elFFMgmtListVal = document.getElementsByName("ffMgmtVal");
       
       //--- build first value
       commaDelimited = elFFMgmtListVal[0].value 
    
       //--- loop through each array value
       for ( var i = 1; i < elFFMgmtListVal.length; i++ )
       {
          commaDelimited = commaDelimited + "," + elFFMgmtListVal[i].value  
       }  
    
       alert("commaDelimited = " + commaDelimited);
    }
    
    function buildMultipleShortNames()
    {
       var commaDelimited;
    
       //--- get the element reference for the FF Mgmt Name array
       var elFFMgmtListVal = document.getElementsByName("ffMgmtVal");
    
       //--- get the element reference for the FF Short Name array
       var elFFShortListVal = document.getElementsByName("ffShortNameVal");
    
       //--- build first value
       commaDelimited = elFFMgmtListVal[0].value + "_SHORT_NAME=" + elFFShortListVal[0].value 
       
       //--- loop through each array value
       for ( var i = 1; i < elFFMgmtListVal.length; i++ )
       {
          commaDelimited = commaDelimited + "," + elFFMgmtListVal[i].value + "_SHORT_NAME=" + elFFShortListVal[i].value  
       }  
    
       alert("commaDelimited = " + commaDelimited);
    } 
    
    </script>
    
    </head>
    
    <body>
    
       <table cellpadding="0" cellspacing="0" border="0">
          <tr>
             <td colspan="4" align="Center">
                <a href="javascript: addFFInfo();">Add additional</a>
             </td>
          </tr>
          <tr>
             <td colspan="4" height="5"></td>
          </tr>
          <tr>
             <td valign="Top">
                Field 1 &nbsp;
             </td>
             <td id="ffMgmt">
                <input type="text" name="ffMgmtVal" id="ffMgmtVal" size="8" maxlength="8">
             </td>
             <td valign="Top">
                &nbsp; Field 2 &nbsp;
             </td>
             <td id="ffShortName">
                <input type="text" name="ffShortNameVal" id="ffShortNameVal" size="15" maxlength="15"> 
             </td>
             <td id="ffDelete">
                <input type="button" onclick="javascript: removeDIV(0);" value="Delete" id="ffDeleteVal">
             </td>
          </tr>
       </table>
    
       <p>
    
       <a href="javascript: buildValues()">Test</a>
    
       <input type="hidden" value="1" id="lastNumber" /> 
        
    </body>
    
    </html>

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK... I figured it out... the problem was not with my onclick event. It was the lastNumber value I was trying to use. In the addFFInfo function I grabbed the reference to the object lastNumber instead of the value of last number and that was causing my problem when I added the variable lastNumber to my onclick event as an attribute to my JavaScript.

    Here is what I changed to get it to work.

    var lastNumber = document.getElementById('lastNumber').value;

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's another way of doing it a little easier. You don't need all those ids really.

    Code:
    <html>
    
    <head>
    <title>Dynamic Text Box Generation</title>
    
    <script language="javascript">
    
    function buildValues()
    {
       buildFFVPMGMT();   
    
       buildMultipleShortNames();
    }
    
    function buildFFVPMGMT()
    {
       var commaDelimited;   
    
       //--- get the element reference for the FF Mgmt Name array
       var elFFMgmtListVal = document.getElementsByName("ffMgmtVal");
       
       //--- build first value
       commaDelimited = elFFMgmtListVal[0].value 
    
       //--- loop through each array value
       for ( var i = 1; i < elFFMgmtListVal.length; i++ )
       {
          commaDelimited = commaDelimited + "," + elFFMgmtListVal[i].value  
       }  
    
       alert("commaDelimited = " + commaDelimited);
    }
    
    function buildMultipleShortNames()
    {
       var commaDelimited;
    
       //--- get the element reference for the FF Mgmt Name array
       var elFFMgmtListVal = document.getElementsByName("ffMgmtVal");
    
       //--- get the element reference for the FF Short Name array
       var elFFShortListVal = document.getElementsByName("ffShortNameVal");
    
       //--- build first value
       commaDelimited = elFFMgmtListVal[0].value + "_SHORT_NAME=" + elFFShortListVal[0].value 
       
       //--- loop through each array value
       for ( var i = 1; i < elFFMgmtListVal.length; i++ )
       {
          commaDelimited = commaDelimited + "," + elFFMgmtListVal[i].value + "_SHORT_NAME=" + elFFShortListVal[i].value  
       }  
    
       alert("commaDelimited = " + commaDelimited);
    } 
    
    function cloneIt() {
    	var cloneThis = document.getElementById("cloneMe");
    	var theClone = cloneThis.cloneNode(true);
    	
    	// remove the id so we don't duplicate
    	theClone.setAttribute("id","");
    
    	// get rid of the values in the cloned textboxes
    	var inputs = theClone.getElementsByTagName("input");
    	for( var i=0; i < inputs.length; i++ ) {
    		if( inputs[i].type == "text" ) {
    			inputs[i].value = "";
    		}
    	}
    	
    	cloneThis.parentNode.appendChild(theClone);
    }
    
    function removeMe(obj) {
    	var theTR = obj.parentNode.parentNode;
    	
    	// don't allow the default tr to be removed
    	if( theTR.getAttribute("id") != "cloneMe" ) {
    		theTR.parentNode.removeChild(theTR);
    	}
    }
    
    </script>
    
    </head>
    
    <body>
    
       <table cellpadding="0" cellspacing="0" border="0">
          <tr>
             <td colspan="4" align="Center">
                <a href="blah" onclick="cloneIt();return false;">Add additional</a>
             </td>
          </tr>
          <tr>
             <td colspan="4" height="5"></td>
          </tr>
          <tr id="cloneMe">
             <td valign="Top">
                Field 1 &nbsp;
             </td>
             <td>
                <input type="text" name="ffMgmtVal" size="8" maxlength="8" />
             </td>
             <td>
                &nbsp; Field 2 &nbsp;
             </td>
             <td>
                <input type="text" name="ffShortNameVal" size="15" maxlength="15"/> 
             </td>
             <td>
                <input type="button" onclick="removeMe(this);" value="Delete"/>
             </td>
          </tr>
       </table>
    
       <p>
    
       <a href="blah" onclick="buildValues();return false;">Test</a>
    
    </body>
    
    </html>

  6. #6
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the response. I am learning more and more about what JavaScript can do. After a peer code review, I decided to change my design. Instead of using text boxes, I changed my design to use a listbox (<select> in HTML). I took me 1/8 of the time to code it then my first example. The select object works just like an array so it took care of a lot of the work for me.


Bookmarks

Posting Permissions

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