Javascript controls html so the external js does not see the html name field

Question

I am building a form using a js+html and I ran into a problem. There's a part of my form where user should be able to click on a textfield and pick a date & time from a calendar(anytime.js by MAM3), and since my form(partial code) is built this way:

third_list = "<table class='table'>";
if (radio_array[genIndex] == reserve) {
    third_list += "<tr><td id='Date:'><label><span id='Date'>Date:</span><input type='text' id='Date' name='_date' size='20' onfocus='showMessage()'/></label></td>";
    third_list += "<td id='Time:'><label><span id='Time'>Time:</span><input type='text' id='Time' name='_time' size='20' /></label></td>";
    document.getElementById("third").innerHTML = third_list;
    l3_value = "";
    return;
}

and by putting this to the html:

    <script type="text/javascript">
    AnyTime.widget
        ( "Date",
            { format: "%m/%d/%Z" }
        );
    AnyTime.widget
        ( "Time",
            { format: "%h:%i:%p" }
        );
    </script>

it does not pop-up a calendar.

Side notes: I have included all of the required js&css files and tried to see if it works on a seperate text field out from js, and it works. I think the reason it doesnt work is it is controlled by js, so the anytime.js does not see it as a html name field.

SN2: onfocus='showMessage()' in my js is to show a message when a user clicks on a text field.

How do I make it work?

Answer 1

A couple of issues:

First, you have more than one element with the id values Date and Time. id values must be unique in the document. I expect the script isn't getting the element it expects and is failing to init. The documentation for AnyTime seems to suggest it uses the first argument you give AnyTime.widget as an id and expects to get an input field. In your case, it usually won't on most browsers, because when faced with an invalid structure featuring duplicate ids, most browsers will return the first one when you ask for "the" element with that id, which in your case is a span rather than an input field.

Your Date elements:

<span id='Date'>Date:</span><input type='text' id='Date' ... />
<!--      ^--- one                                 ^--- two -->

The Time is the same sort of problem.

Separately from that, I suspect you need to ensure that the elements exist when you call AnyTime.widget. I don't know where you have that script tag that calls it, but what you need to do is make this calls after you've executed the line

document.getElementById("third").innerHTML = third_list;

...so that the elements in question exist in the DOM. So for instance:

third_list = "<table class='table'>";
if (radio_array[genIndex] == reserve) {
    third_list += "<tr><td id='Date:'><label><span id='Date'>Date:</span><input type='text' id='Date' name='_date' size='20' onfocus='showMessage()'/></label></td>";
    third_list += "<td id='Time:'><label><span id='Time'>Time:</span><input type='text' id='Time' name='_time' size='20' /></label></td>";
    document.getElementById("third").innerHTML = third_list;
    l3_value = "";
    setUpWidgets();
    return;
}

// ...elsewhere in the same scope or a containing scope:
function setUpWidgets() {
    AnyTime.widget
        ( "Date",
            { format: "%m/%d/%Z" }
        );
    AnyTime.widget
        ( "Time",
            { format: "%h:%i:%p" }
        );
}

That creates a function, which you call when the elements are there.

---

Side note: You also have an id that looks like this:

 <td id='Date:'>

Although that's a valid id in HTML5, it wasn't valid in HTML4 and isn't valid in CSS. So if you try to use that id in a CSS-style selector (for instance, with jQuery), you'll probably run into trouble.