SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    add or remove textbox on button click

    Hi all,
    I want to add or remove textbox on button click and i am succeded in doing that....but the only problem is whenever i click on add or remove button the textbox get added/removed on new page instead on the same page....so how can i do that thing so that on bttn click it gets added on same page..here is my code............


    <html>
    <head>
    <script language="javascript" type="text/javascript">

    function incrementCount()
    {
    document.frm.txt.value=parseInt(document.frm.txt.value) + 1;
    addtxtBox();
    }

    function decCount()
    {
    document.frm.txt.value=parseInt(document.frm.txt.value) - 1;
    addtxtBox();
    }


    function addtxtBox()
    {
    //var count=10;
    var b="";
    var a=document.frm.txt.value;

    for(var i=1;i<=a;i++)
    {
    document.write('<table width="40%">');
    document.write('<tr><td>Name /td>');
    document.write('<td><input type="text" name="txt"></td></tr>');
    document.write('</table>');


    }

    </script>

    <body>

    <table width="40%" border="1">
    <form name="frm">
    <tr>
    <td>Name/td>
    <td><input type="text" name="txt" value="0" readonly ></td>
    <!-- <td><textarea name="msg" id="message" rows="5" cols="40"></td>-->
    <td><INPUT type="button" value="ADD" name="add" onClick="incrementCount()"></td>
    <td><INPUT type="button" value="Remove" name="remove" onClick="decCount()"></td>

    </tr>



    </table>

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

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do not use document.write, use DOM manipulation instead:
    Code:
    function addTextBox() {
      var form = document.frm;
      form.appendChild(document.createElement('div')).innerHTML = "<table width=\"40&#37;\">"
        + "<tr><td>Name</td><td><input type=\"text\" name=\"txt\"></td></tr>"
        + "</table>";
    }
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  3. #3
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by alex.w747 View Post
    Do not use document.write, use DOM manipulation instead:
    Code:
    function addTextBox() {
      var form = document.frm;
      form.appendChild(document.createElement('div')).innerHTML = "<table width=\"40%\">"
        + "<tr><td>Name</td><td><input type=\"text\" name=\"txt\"></td></tr>"
        + "</table>";
    }
    thanx for ur reply but still itz not working properly can u send me the whole code along with the modification u have done.............thanx in advance

  4. #4
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <html>
    <head>
    <script language="javascript" type="text/javascript">
    
    function incrementCount() {
    	document.frm.count.value = parseInt(document.frm.count.value) + 1;
    	addTextBox();
    }
    
    function decCount() {
    	document.frm.count.value = parseInt(document.frm.count.value) - 1;
    	removeTextBox();
    }
    
    function addTextBox() {
    	var form = document.frm;
    	form.appendChild(document.createElement('div')).innerHTML = "<table width=\"40&#37;\">"
    		+ "<tr><td>Name</td><td><input type=\"text\" name=\"txt\"></td></tr>"
    		+ "</table>";
    }
    
    function removeTextBox() {
    	var form = document.frm;
    	if (form.lastChild.nodeName.toLowerCase() == 'div')
    		form.removeChild(form.lastChild);
    }
    
    </script>
    
    <body>
    <table width="40%" border="1">
    <form name="frm">
    <tr>
    <td>Name: </td>
    <td><input type="text" name="count" value="0" readonly ></td>
    <td><INPUT type="button" value="ADD" name="add" onClick="incrementCount()"></td>
    <td><INPUT type="button" value="Remove" name="remove" onClick="decCount()"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  5. #5
    SitePoint Member
    Join Date
    Jun 2008
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx alex............it is now it is working perfectly fine..............thanxxxxx

    Quote Originally Posted by alex.w747 View Post
    Code:
    <html>
    <head>
    <script language="javascript" type="text/javascript">
    
    function incrementCount() {
    	document.frm.count.value = parseInt(document.frm.count.value) + 1;
    	addTextBox();
    }
    
    function decCount() {
    	document.frm.count.value = parseInt(document.frm.count.value) - 1;
    	removeTextBox();
    }
    
    function addTextBox() {
    	var form = document.frm;
    	form.appendChild(document.createElement('div')).innerHTML = "<table width=\"40%\">"
    		+ "<tr><td>Name</td><td><input type=\"text\" name=\"txt\"></td></tr>"
    		+ "</table>";
    }
    
    function removeTextBox() {
    	var form = document.frm;
    	if (form.lastChild.nodeName.toLowerCase() == 'div')
    		form.removeChild(form.lastChild);
    }
    
    </script>
    
    <body>
    <table width="40%" border="1">
    <form name="frm">
    <tr>
    <td>Name: </td>
    <td><input type="text" name="count" value="0" readonly ></td>
    <td><INPUT type="button" value="ADD" name="add" onClick="incrementCount()"></td>
    <td><INPUT type="button" value="Remove" name="remove" onClick="decCount()"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>


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
  •