Web Analytics Made Easy - StatCounter Create calendar textfields onclick problem in Firefox - CodingForum

Announcement

Collapse
No announcement yet.

Create calendar textfields onclick problem in Firefox

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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; Aug 31, 2011, 06:33 AM.
    It's easy once you know how...
    Tags: None
  • #2
    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...

    Comment

    Previous template Next
    Working...
    X
    😀
    🥰
    🤢
    😎
    😡
    👍
    👎