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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts

    InnerHTML Save Data Question

    Hi, I got the following script to work the way I want it by adding new text inputs with new name values, but if there is data added and the add button is clicked again everything disappears. Is there any way to keep the data from going AWAL?

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <script>
    var counter = 0;
    function generateRow() {
    counter += 1;
    var d=document.getElementById("add_new");
    d.innerHTML+="<p><input type='text' name='new_item" + counter + "'>";
    }
    
    </script>
    </head>
    
    <body>
    <form id="form1" name="form1" method="get" action="">
    <div id="add_new"></div>
    <p><input type="button" value="Add" onclick="generateRow()"/></p>
    <p>
    <label>
    <input type="submit" name="Submit" value="Submit" />
    </label>
    </p>
    </form>
    </body>
    </html>
    Thanks much!

    EDIT: I was looking on Google and saw a JQuery method of doing it if someone has an idea of how to get this one to hold up..

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript"><!--
    
    
        $(document).ready(function(){
    
        var counter = 2;
        $("#add").click(function () {
        if(counter==11){
            alert("Too many boxes");
            return false;
        }   
            $("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' name='t"+counter+"' id='t"+counter+"' > </div>\n");
            ++counter;
        });
    
        $("#remove").click(function () {
        if(counter==1){
            alert("Can u see any boxes");
            return false;
        }   
            --counter;
            $("#d"+counter).remove();
        });
      });
    // --></script>
    
    
    </head>
    
    <body>
    
    <form id="form1" name="form1" method="get" action="">
    <div id='textBoxes'>
    <div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' name='t1' id='t1' ></div>
    </div>
    <input type='button' value='add' id='add'>
    <input type='button' value='remove' id='remove'>
    
    <br/>
    <input type="submit" name="Submit" value="Submit" />
    
    </form>
    
    </body>
    
    </html>

    Thanks again
    Last edited by theflyingminstr; 01-05-2011 at 07:25 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Posts
    191
    Thanks
    0
    Thanked 0 Times in 0 Posts


  •  

    Posting Permissions

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