SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    adding a tag to page

    I have a page with some buttons I want add some textbox near each button onclick of the buttons (Add code not visiblity)

    How can I do it?

  2. #2
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what?
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  3. #3
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, I'm confused
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think he means to have a bunch of buttons on the page, when clicking the buttons, textarea fields will show up?

    If that is the case use JS to show hide like:
    document.getElementById('your_element_id').style.display = 'block'; // to show or 'none' to hide

  5. #5
    SitePoint Evangelist pip's Avatar
    Join Date
    Jun 2001
    Location
    Cape Town, South Africa
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok... or maybe he means that he wants them dynamically created?
    - Pip
    ---------------------------------------------------------------------------------
    Nothing takes the taste out of peanut butter quite like unrequited love.

  6. #6
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is it a bunch of toggling show hide of textarea? or in place editor?

  7. #7
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not show up I want create them dinamicly,

    and I have some textboxes too in other page that on load of page I want add some button for each textbox

  8. #8
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      
    <script type="text/javascript">
    
    function addTextbox (t) {
    
    var el = document.createElement("input");
    el.type="text";
    // el.style.display="none";
    t.parentNode.insertBefore(el,t.nextSibling);
    
    // alert(t.parentNode.parentNode.innerHTML);
    }
     </script>
    
    
    
    <body>
    <button onclick="addTextbox (this)">add textbox</button>
    <button onclick="addTextbox (this)">add textbox</button>
    <button onclick="addTextbox (this)">add textbox</button>
    Code:
      
    <script type="text/javascript">
    window.onload = function () {
    var el = document.getElementsByTagName('button');
    for(var i = 0; i< el.length; i++) {
    el[i].onclick= function () {
    var txt = document.createElement('input');
    txt.type="text";
    this.parentNode.insertBefore(txt, this.nextSibling)
    }
    } 
    }
    </script>
    
    <body>
    
    <button>button - 0 </button>
    <button>button - 1 </button>
    <button>button - 2 </button>
    <button>button - 3 </button>
    Last edited by muazzez; Apr 12, 2007 at 08:00.

  9. #9
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much ,
    I will test it now

  10. #10
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now How can I import an string that contain some HTML codes ?

  11. #11
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
     
    <script type="text/javascript">
    window.onload = function () {
    var el = document.getElementsByTagName('button');
    for(var i = 0; i< el.length; i++) {
    el[i].onclick= function () {
    var txt = document.createElement('input');
    txt.type="text";
    
    this.parentNode.insertBefore(txt, this.nextSibling)
    var bold = document.createElement('b');
    var boldText = document.createTextNode('my bold text');
    bold.appendChild(boldText);
    this.parentNode.insertBefore(bold, this.nextSibling)
    
    
    var italic = document.createElement('i');
    var italicText = document.createTextNode('my italic text');
    italic.style.color="red";
    italic.appendChild(italicText);
    this.parentNode.insertBefore(italic, this.nextSibling)
    
    }
    } 
    }
    </script>
    
    <body>
    
    <button>button - 0 </button>
    <button>button - 1 </button>
    <button>button - 2 </button>
    <button>button - 3 </button>

    Code:
      
    <script type="text/javascript">
    window.onload = function () {
    var el = document.getElementsByTagName('button');
    for(var i = 0; i< el.length; i++) {
    el[i].onclick= function () {
    var span = document.createElement('span');
    this.parentNode.insertBefore(span, this.nextSibling);
    var str = "text text text <b style='color:red;'>my bold text</b><i style='color:blue;'> my italic text</i><div style='color:green;'>my div</div>";
    this.nextSibling.innerHTML = str;
    
    }
    } 
    }
    </script>
    
    <body>
    
    <button>button - 0 </button>
    <button>button - 1 </button>
    <button>button - 2 </button>
    <button>button - 3 </button>

    Code:
      
     
    <script type="text/javascript">
    window.onload = function () {
    var el = document.getElementsByTagName('button');
    for(var i = 0; i< el.length; i++) {
    el[i].onclick= function () {
    var str = "text text text <b style='color:red;'>my bold text</b><i style='color:blue;'> my italic text</i><div style='color:green;'>my div</div>";
    this.nextSibling.innerHTML = str;
    
    }
    } 
    }
    </script>
    
    <body>
    
    <button>button - 0 </button><span></span>
    <button>button - 1 </button><span></span>
    <button>button - 2 </button><span></span>
    <button>button - 3 </button><span></span>
    Last edited by muazzez; Apr 29, 2007 at 10:33.

  12. #12
    SitePoint Evangelist
    Join Date
    Dec 2005
    Posts
    527
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed this code like this :

    Code:
    <input type="textbox" id="123">
    
    <script language="javascript" >
    	addCode('123');
    	function addCode(obj){
    			var str = "<b>My HTML code</b>";
    			texta = document.getElementById(obj);
    			texta.nextSibling.innerHTML = str;
    	}
    </script>
    But can not work what is the problem /?

  13. #13
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As far as I know,
    <input type="text" id="a123">
    id value don't begin with a number.
    <script type="text/javascript">
    Code:
      
    <body>
    <input type="text" id="a123">
    <script type="text/javascript" >
    addCode('a123');
    	function addCode(obj){
    			var str = "<b>My HTML code</b>";
    			texta = document.getElementById(obj);
    			alert(texta.nextSibling.nodeName); 
    			// Message box displays "SCRIPT" in Internet Explorer.
    		       // Message box displays "#text" in Firefox and Opera.
    			texta.nextSibling.innerHTML = str;
    							
    	}	
    </script>
    </body>
    Code:
      
    <body>
    
    <input type="text" id="a123">
    
    <script type="text/javascript" >
    addCode('a123');
    	function addCode(obj){
    			var str = "<b>My HTML code</b>";
    			texta = document.getElementById(obj);
    			var span = document.createElement('span');
    			
    			texta.parentNode.insertBefore(span,texta.nextSibling);
    			texta.nextSibling.innerHTML = str;
    			alert(texta.nextSibling.nodeName);  
    			alert(texta.parentNode.innerHTML);				
    	}
    </script>
    </body>
    Code:
    <body>
    
    <input type="text" id="a123">
    
    <script type="text/javascript" >
    addCode('a123');
    	function addCode(obj){
    			var str = "<b>My HTML code</b>";
    			texta = document.getElementById(obj);
    			var t = document.createTextNode(str);
    			texta.parentNode.insertBefore(t,texta.nextSibling);
    			 
    	}
    	alert(texta.parentNode.innerHTML);
    		
    </script>
    </body>
    Last edited by muazzez; May 1, 2007 at 05:40.


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
  •