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 olidenia's Avatar
    Join Date
    Oct 2009
    Location
    Sitting In Front Of A Screen
    Posts
    110
    Thanks
    16
    Thanked 4 Times in 4 Posts

    Create calendar textfields onclick problem in Firefox

    Hi, I have the script below working fine in IE but not FF, can any one help me??

    The script creates new fields with calendar in a form, if new information is added to a field and then a new field is created the information is lost in FF

    Live demo: http://hotelendenia.com/sandbox/

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <title>Calendar Text Input</title>
    <script language="javascript" type="text/javascript" src="datetimepicker.js"></script>
    
      <script type="text/javascript">
      function extend(m, e){
        var e = e || this;
        for (var x in m) e[x] = m[x];
        return e;
    };
     
    function create(type, opt, parent){
        var el = document.createElement(type);
     
        if (opt.style){
            extend(opt.style,el.style);
        }
     
        delete opt.style;
     
        extend(opt,el);
     
        if (parent){
            parent.appendChild(el);
        }
     
        return el;
    }
     
    fields = 0;
    function add_input(){
    document.getElementById('input_container').innerHTML += ""+ fields +"<input id=\"cal"+ fields +"\" type=\"text\" size=\"25\"><a href=\"javascript:NewCal('cal"+ fields +"','ddmmyyyy')\"><img src=\"cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pick a date\"></a> <input type=\"text\" name=\"\" value=\"\"><br>";
    fields += 1;
    }
    
      </script>
    
    </head>
    <body>
    
    <div>
    <form>
    <div id="input_container">
    </div>
    <br /><input type="submit" value="submit">
    </form>
    <a href="#" onclick="add_input()">add input</a>
    </div>
    			
    </body>
    </html>
    Last edited by olidenia; 08-31-2011 at 12:33 PM.
    It's easy once you know how...

  • #2
    Regular Coder olidenia's Avatar
    Join Date
    Oct 2009
    Location
    Sitting In Front Of A Screen
    Posts
    110
    Thanks
    16
    Thanked 4 Times in 4 Posts
    Sorted:

    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" xml:lang="en" lang="en">
    <head>
      <title></title>
    
      <script language="javascript" type="text/javascript" src="datetimepicker.js"></script>
      <script type="text/javascript">
    var counter = 0;
    var limit = 12;
    function addInput(divName){
         if (counter == limit)  {
              alert("You have reached the limit of adding " + counter + " inputs");
         }
         else {
              var newdiv = document.createElement('div');
              newdiv.innerHTML = ""+ counter +"<input id=\"cal"+ counter +"\" type=\"text\" size=\"25\"><a href=\"javascript:NewCal('cal"+ counter +"','ddmmyyyy')\"><img src=\"cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pick a date\"></a> <input type=\"text\" name=\"\" value=\"\"><br>";
              document.getElementById(divName).appendChild(newdiv);
              counter++;
         }
    }
      </script>
      
    </head>
    <body>
    
    <form method="POST">
         <div id="dynamicInput"></div>
         <input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
    </form>
    </body>
    </html>
    It's easy once you know how...


  •  

    Posting Permissions

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