Duplicate Fields!

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
SheDesigns
Forum Commoner
Posts: 42
Joined: Tue Nov 18, 2008 9:51 am
Location: Buffalo, NY

Duplicate Fields!

Post by SheDesigns »

I need a field to duplicate the other field when the data is entered. An on event is not working. They are asking for the other date to fill in automatically. These forms correspond with small calendars that are attached to them to select a date.

I need for end_date to duplicate start_date, after start_date has been selected. Please help! NO EVENT IS WORKING CORRECTLY. They want this to display instantly. :(

Code: Select all

 
 
  <tr>
    <td>Start Date</td>
    <td>
      <input type="text" name="start_date" id="start_date" readonly/>
    <script language="JavaScript">
    new tcal ({
        // form name
        'formname': 'new_event',
        // input name
        'controlname': 'start_date'
    });
    </script>
    </td>
  </tr>
  <tr>
    <td>End Date</td>
    <td>
      <input type="text" name="end_date" id="end_date" readonly/>
    <script language="JavaScript">
    new tcal ({
        // form name
        'formname': 'new_event',
        // input name
        'controlname': 'end_date'
    });
    </script>
    </td>
  </tr>
 
 
 
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Duplicate Fields!

Post by Christopher »

Where is the rest of he code for your form/page? Are you using a Javascript library?
(#10850)
User avatar
SheDesigns
Forum Commoner
Posts: 42
Joined: Tue Nov 18, 2008 9:51 am
Location: Buffalo, NY

Re: Duplicate Fields!

Post by SheDesigns »

I really don't see why it's relevant.. :(

Code: Select all

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
 
    <script language="JavaScript" src="calendar_us.js"></script>
</head>
I just need to be able to duplicate the result.

Inside of calendar_us.jpg

Code: Select all

 
// Tigra Calendar v4.0.3 (01/12/2009) American (mm/dd/yyyy)
// http://www.softcomplex.com/products/tigra_calendar/
// Public Domain Software... You're welcome.
 
// default settins
var A_TCALDEF = {
    'months' : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    'weekdays' : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
    'yearscroll': true, // show year scroller
    'weekstart': 0, // first day of week: 0-Su or 1-Mo
    'centyear'  : 70, // 2 digit years less than 'centyear' are in 20xx, othewise in 19xx.
    'imgpath' : 'img/' // directory with calendar images
}
// date parsing function
function f_tcalParseDate (s_date) {
 
    var re_date = /^\s*(\d{1,2})\/(\d{1,2})\/(\d{2,4})\s*$/;
    if (!re_date.exec(s_date))
        return alert ("Invalid date: '" + s_date + "'.\nAccepted format is mm/dd/yyyy.")
    var n_day = Number(RegExp.$2),
        n_month = Number(RegExp.$1),
        n_year = Number(RegExp.$3);
    
    if (n_year < 100)
        n_year += (n_year < this.a_tpl.centyear ? 2000 : 1900);
    if (n_month < 1 || n_month > 12)
        return alert ("Invalid month value: '" + n_month + "'.\nAllowed range is 01-12.");
    var d_numdays = new Date(n_year, n_month, 0);
    if (n_day > d_numdays.getDate())
        return alert("Invalid day of month value: '" + n_day + "'.\nAllowed range for selected month is 01 - " + d_numdays.getDate() + ".");
 
    return new Date (n_year, n_month - 1, n_day);
}
// date generating function
function f_tcalGenerDate (d_date) {
    return (
         (d_date.getMonth() < 9 ? '0' : '') + (d_date.getMonth() + 1) + "/"
        + (d_date.getDate() < 10 ? '0' : '') + d_date.getDate() + "/"
        + d_date.getFullYear()
    );
}
 
// implementation
function tcal (a_cfg, a_tpl) {
 
    // apply default template if not specified
    if (!a_tpl)
        a_tpl = A_TCALDEF;
 
    // register in global collections
    if (!window.A_TCALS)
        window.A_TCALS = [];
    if (!window.A_TCALSIDX)
        window.A_TCALSIDX = [];
    
    this.s_id = a_cfg.id ? a_cfg.id : A_TCALS.length;
    window.A_TCALS[this.s_id] = this;
    window.A_TCALSIDX[window.A_TCALSIDX.length] = this;
    
    // assign methods
    this.f_show = f_tcalShow;
    this.f_hide = f_tcalHide;
    this.f_toggle = f_tcalToggle;
    this.f_update = f_tcalUpdate;
    this.f_relDate = f_tcalRelDate;
    this.f_parseDate = f_tcalParseDate;
    this.f_generDate = f_tcalGenerDate;
    
    // create calendar icon
    this.s_iconId = 'tcalico_' + this.s_id;
    this.e_icon = f_getElement(this.s_iconId);
    if (!this.e_icon) {
        document.write('<img src="' + a_tpl.imgpath + 'cal.gif" id="' + this.s_iconId + '" onclick="A_TCALS[\'' + this.s_id + '\'].f_toggle()" class="tcalIcon" alt="Open Calendar" />');
        this.e_icon = f_getElement(this.s_iconId);
    }
    // save received parameters
    this.a_cfg = a_cfg;
    this.a_tpl = a_tpl;
}
 
function f_tcalShow (d_date) {
 
    // find input field
    if (!this.a_cfg.controlname)
        throw("TC: control name is not specified");
    if (this.a_cfg.formname) {
        var e_form = document.forms[this.a_cfg.formname];
        if (!e_form)
            throw("TC: form '" + this.a_cfg.formname + "' can not be found");
        this.e_input = e_form.elements[this.a_cfg.controlname];
    }
    else
        this.e_input = f_getElement(this.a_cfg.controlname);
 
    if (!this.e_input || !this.e_input.tagName || this.e_input.tagName != 'INPUT')
        throw("TC: element '" + this.a_cfg.controlname + "' does not exist in "
            + (this.a_cfg.formname ? "form '" + this.a_cfg.controlname + "'" : 'this document'));
 
    // dynamically create HTML elements if needed
    this.e_div = f_getElement('tcal');
    if (!this.e_div) {
        this.e_div = document.createElement("DIV");
        this.e_div.id = 'tcal';
        document.body.appendChild(this.e_div);
    }
    this.e_shade = f_getElement('tcalShade');
    if (!this.e_shade) {
        this.e_shade = document.createElement("DIV");
        this.e_shade.id = 'tcalShade';
        document.body.appendChild(this.e_shade);
    }
    this.e_iframe =  f_getElement('tcalIF')
    if (b_ieFix && !this.e_iframe) {
        this.e_iframe = document.createElement("IFRAME");
        this.e_iframe.style.filter = 'alpha(opacity=0)';
        this.e_iframe.id = 'tcalIF';
        this.e_iframe.src = this.a_tpl.imgpath + 'pixel.gif';
        document.body.appendChild(this.e_iframe);
    }
    
    // hide all calendars
    f_tcalHideAll();
 
    // generate HTML and show calendar
    this.e_icon = f_getElement(this.s_iconId);
    if (!this.f_update())
        return;
 
    this.e_div.style.visibility = 'visible';
    this.e_shade.style.visibility = 'visible';
    if (this.e_iframe)
        this.e_iframe.style.visibility = 'visible';
 
    // change icon and status
    this.e_icon.src = this.a_tpl.imgpath + 'no_cal.gif';
    this.e_icon.title = 'Close Calendar';
    this.b_visible = true;
}
 
function f_tcalHide (n_date) {
    if (n_date)
        this.e_input.value = this.f_generDate(new Date(n_date));
 
    // no action if not visible
    if (!this.b_visible)
        return;
 
    // hide elements
    if (this.e_iframe)
        this.e_iframe.style.visibility = 'hidden';
    if (this.e_shade)
        this.e_shade.style.visibility = 'hidden';
    this.e_div.style.visibility = 'hidden';
    
    // change icon and status
    this.e_icon = f_getElement(this.s_iconId);
    this.e_icon.src = this.a_tpl.imgpath + 'cal.gif';
    this.e_icon.title = 'Open Calendar';
    this.b_visible = false;
}
 
function f_tcalToggle () {
    return this.b_visible ? this.f_hide() : this.f_show();
}
 
function f_tcalUpdate (d_date) {
    
    var d_today = this.a_cfg.today ? this.f_parseDate(this.a_cfg.today) : f_tcalResetTime(new Date());
    var d_selected = this.e_input.value == ''
        ? (this.a_cfg.selected ? this.f_parseDate(this.a_cfg.selected) : d_today)
        : this.f_parseDate(this.e_input.value);
 
    // figure out date to display
    if (!d_date)
        // selected by default
        d_date = d_selected;
    else if (typeof(d_date) == 'number')
        // get from number
        d_date = f_tcalResetTime(new Date(d_date));
    else if (typeof(d_date) == 'string')
        // parse from string
        this.f_parseDate(d_date);
        
    if (!d_date) return false;
 
    // first date to display
    var d_firstday = new Date(d_date);
    d_firstday.setDate(1);
    d_firstday.setDate(1 - (7 + d_firstday.getDay() - this.a_tpl.weekstart) % 7);
    
    var a_class, s_html = '<div style="position: absolute; top: 70px; left: 300px; background: white; border: 1px solid black;"><table class="ctrl"><tbody><tr>'
        + (this.a_tpl.yearscroll ? '<td' + this.f_relDate(d_date, -1, 'y') + ' title="Previous Year"><img src="' + this.a_tpl.imgpath + 'prev_year.gif" /></td>' : '')
        + '<td' + this.f_relDate(d_date, -1) + ' title="Previous Month"><img src="' + this.a_tpl.imgpath + 'prev_mon.gif" /></td><th><center>'
        + this.a_tpl.months[d_date.getMonth()] + ' ' + d_date.getFullYear()
            + '</th><td' + this.f_relDate(d_date, 1) + ' title="Next Month"><img src="' + this.a_tpl.imgpath + 'next_mon.gif" /></td>'
        + (this.a_tpl.yearscroll ? '<td' + this.f_relDate(d_date, 1, 'y') + ' title="Next Year"><img src="' + this.a_tpl.imgpath + 'next_year.gif" /></td></td>' : '')
        + '</tr></tbody></table><table><tbody><tr class="wd">';
 
    // print weekdays titles
    for (var i = 0; i < 7; i++)
        s_html += '<th>' + this.a_tpl.weekdays[(this.a_tpl.weekstart + i) % 7] + '</th>';
    s_html += '</tr>' ;
 
    // print calendar table
    var n_date, n_month, d_current = new Date(d_firstday);
    while (d_current.getMonth() == d_date.getMonth() ||
        d_current.getMonth() == d_firstday.getMonth()) {
    
        // print row heder
        s_html +='<tr>';
        for (var n_wday = 0; n_wday < 7; n_wday++) {
 
            a_class = [];
            n_date  = d_current.getDate();
            n_month = d_current.getMonth();
 
            // other month
            if (d_current.getMonth() != d_date.getMonth())
                a_class[a_class.length] = 'othermonth';
            // weekend
            if (d_current.getDay() == 0 || d_current.getDay() == 6)
                a_class[a_class.length] = 'weekend';
            // today
            if (d_current.valueOf() == d_today.valueOf())
                a_class[a_class.length] = 'today';
            // selected
            if (d_current.valueOf() == d_selected.valueOf())
                a_class[a_class.length] = 'selected';
 
            s_html += '<td onclick="A_TCALS[\'' + this.s_id + '\'].f_hide(' + d_current.valueOf() + ')"' + (a_class.length ? ' class="' + a_class.join(' ') + '">' : '>') + n_date + '</td>'
 
            d_current.setDate(++n_date);
            while (d_current.getDate() != n_date && d_current.getMonth() == n_month) {
                d_current.setHours(d_current.getHours + 1);
                d_current = f_tcalResetTime(d_current);
            }
        }
        // print row footer
        s_html +='</tr>';
    }
    s_html +='</tbody></table></div>';
    
    // update HTML, positions and sizes
    this.e_div.innerHTML = s_html;
 
    var n_width  = this.e_div.offsetWidth;
    var n_height = this.e_div.offsetHeight;
    var n_top  = f_getPosition (this.e_icon, 'Top') + this.e_icon.offsetHeight;
    var n_left = f_getPosition (this.e_icon, 'Left') - n_width + this.e_icon.offsetWidth;
    if (n_left < 0) n_left = 0;
    
    this.e_div.style.left = n_left + 'px';
    this.e_div.style.top  = n_top + 'px';
 
    this.e_shade.style.width = (n_width + 8) + 'px';
    this.e_shade.style.left = (n_left - 1) + 'px';
    this.e_shade.style.top = (n_top - 1) + 'px';
    this.e_shade.innerHTML = b_ieFix
        ? '<table><tbody><tr><td width="7" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_bl.png\', sizingMethod=\'scale\');"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td><td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + this.a_tpl.imgpath + 'shade_bm.png\', sizingMethod=\'scale\');" height="7" align="left"><img src="' + this.a_tpl.imgpath + 'pixel.gif"></td></tr><tbody></table>'
        : '<table><tbody><tbody></table>';
    
    if (this.e_iframe) {
        this.e_iframe.style.left = n_left + 'px';
        this.e_iframe.style.top  = n_top + 'px';
        this.e_iframe.style.width = (n_width + 6) + 'px';
        this.e_iframe.style.height = (n_height + 6) +'px';
    }
    return true;
}
 
function f_getPosition (e_elemRef, s_coord) {
    var n_pos = 0, n_offset,
        e_elem = e_elemRef;
 
    while (e_elem) {
        n_offset = e_elem["offset" + s_coord];
        n_pos += n_offset;
        e_elem = e_elem.offsetParent;
    }
    // margin correction in some browsers
    if (b_ieMac)
        n_pos += parseInt(document.body[s_coord.toLowerCase() + 'Margin']);
    else if (b_safari)
        n_pos -= n_offset;
    
    e_elem = e_elemRef;
    while (e_elem != document.body) {
        n_offset = e_elem["scroll" + s_coord];
        if (n_offset && e_elem.style.overflow == 'scroll')
            n_pos -= n_offset;
        e_elem = e_elem.parentNode;
    }
    return n_pos;
}
 
function f_tcalRelDate (d_date, d_diff, s_units) {
    var s_units = (s_units == 'y' ? 'FullYear' : 'Month');
    var d_result = new Date(d_date);
    d_result['set' + s_units](d_date['get' + s_units]() + d_diff);
    if (d_result.getDate() != d_date.getDate())
        d_result.setDate(0);
    return ' onclick="A_TCALS[\'' + this.s_id + '\'].f_update(' + d_result.valueOf() + ')"';
}
 
function f_tcalHideAll () {
    for (var i = 0; i < window.A_TCALSIDX.length; i++)
        window.A_TCALSIDX[i].f_hide();
}
 
function f_tcalResetTime (d_date) {
    d_date.setHours(0);
    d_date.setMinutes(0);
    d_date.setSeconds(0);
    d_date.setMilliseconds(0);
    return d_date;
}
 
f_getElement = document.all ?
    function (s_id) { return document.all[s_id] } :
    function (s_id) { return document.getElementById(s_id) };
 
if (document.addEventListener)
    window.addEventListener('scroll', f_tcalHideAll, false);
if (window.attachEvent)
    window.attachEvent('onscroll', f_tcalHideAll);
    
// global variables
var s_userAgent = navigator.userAgent.toLowerCase(),
    re_webkit = /WebKit\/(\d+)/i;
var b_mac = s_userAgent.indexOf('mac') != -1,
    b_ie5 = s_userAgent.indexOf('msie 5') != -1,
    b_ie6 = s_userAgent.indexOf('msie 6') != -1 && s_userAgent.indexOf('opera') == -1;
var b_ieFix = b_ie5 || b_ie6,
    b_ieMac  = b_mac && b_ie5,
    b_safari = b_mac && re_webkit.exec(s_userAgent) && Number(RegExp.$1) < 500;
 
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: Duplicate Fields!

Post by Christopher »

SheDesigns wrote:I need a field to duplicate the other field when the data is entered. An on event is not working. They are asking for the other date to fill in automatically. These forms correspond with small calendars that are attached to them to select a date.
What is the "other date"? Do you mean if they enter either a start or end date the other is filled in with the same date?
(#10850)
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: Duplicate Fields!

Post by jackpf »

Dynamically updating an input doesn't trigger the onchange event. You'll need to edit the calendar either to update the second input, or accept an array of inputs to update. I think.
Post Reply