Search code examples
javascripthtmltime-select

Programatically accessing HTML attributes with Javascript

I'm using a custom TimeSelector, which I place on the page in HTML as follows:

   <MKB:TimeSelector DisplaySeconds="false" ID="endTimeSelector" runat="server" Visible="True" Date="5:30 PM" />

In a Javascript function, I'd like to update the Date attribute. I've tried these (which don't work):

   var sel = document.getElementById("endTimeSelector");
   sel.Date="6:30 PM";
   sel.setAttribute("Date","6:30 PM");

Since this is a custom selector, I don't expect an answer specific to this component. I guess I'm just asking if there is a general solution for updating HTML attributes from Javascript (without going to the server first).

EDIT: Okay, so the reason it's not working is that that's not the real ID due to ASP. Indeed, here is the real HTML:

<span id="endTimeSelector"><table CellSpacing="0" CellPadding="0" style="border-collapse:collapse;border-style:None;border-width:0px;">
                <tr>
                    <td style="vertical-align:Bottom;"><input id="endTimeSelector_txtHour" name="endTimeSelector" onclick="this.select();lastFocusCtrl=this;" onchange="intOnly(this,12);" onFocus="this.select();lastFocusCtrl=this;" onKeyDown="return updownArrow(event, this,12,15,1);" cols="2" maxlength="2" value="05" style="height:15px;border-bottom:solid 1px Silver;border-left:solid 1px Silver;border-top:solid 1px Silver;background-color:;border-right:none;width:17px;font-size:9pt;" /><input readonly="readonly" cols="1" maxlength="1" value=":" onclick="this.nextSibling.focus();//this.blur();return false;" onfocus="this.nextSibling.focus();//blur();return false;" style="height:15px;border-bottom:solid 1px Silver;border-left:none;border-right:none;border-top:solid 1px Silver;background-color:;font-size:9pt;width:4px;" /><input id="endTimeSelector_txtMinute" name="endTimeSelector_txtMinute" onclick="this.select();lastFocusCtrl=this;" onchange="intOnly(this,12);" onFocus="this.select();lastFocusCtrl=this;" onKeyDown="return updownArrow(event, this,12,15,1);" cols="2" maxlength="2" value="30" style="height:15px;border-bottom:solid 1px Silver;border-left:none;border-top:solid 1px Silver;background-color:;border-right:none;width:17px;font-size:9pt;" /><input id="endTimeSelector_txtAmPm" name="endTimeSelector_txtAmPm" readonly="readonly" onclick="this.select();lastFocusCtrl=this;" onchange="keepAmPm();" onFocus="this.select();lastFocusCtrl=this;" onKeyDown="return updownArrow(event, this,12,15,1);" cols="2" maxlength="2" value="PM" style="height:15px;border-bottom:solid 1px Silver;border-left:none;border-right:solid 1px Silver;border-top:solid 1px Silver;background-color:;width:22px;font-size:9pt;" /></td><td><img id="endTimeSelector_imgUp" onclick="addTime(this,12,15,1);" src="/WebResource.axd?d=tiVFNiu7HJgIVjO35sllj-s8Z6xcGnuxvWjcv0djLK_ZmlnEvSWKeuPozcoAJ1jdWjt3Em28mdAuVmJ3sjSDr9LkBqj6QzQZ5DI3R2uqFhoN8cDn0&amp;t=634103086365158927" onMouseOver="this.src='/WebResource.axd?d=Qwp1CEy_uAYBRj85nDAQgbZhe_gPeEn6uH400SE9Ka9Ba6-0jO725XcMqD-0COZumHZlpEmorXnDALAg08OiLidM1LQwMWqOZjS8k7tAw7ECNag4Bf2m7vLYgXi_qGcGiYyX_A2&amp;t=634103086365158927';" onMouseOut="this.src='/WebResource.axd?d=tiVFNiu7HJgIVjO35sllj-s8Z6xcGnuxvWjcv0djLK_ZmlnEvSWKeuPozcoAJ1jdWjt3Em28mdAuVmJ3sjSDr9LkBqj6QzQZ5DI3R2uqFhoN8cDn0&amp;t=634103086365158927';" style="cursor:pointer;" /><br /><img id="endTimeSelector_imgDown" onclick="subtractTime(this,12,15,1);" src="/WebResource.axd?d=RVSDbruLRZ0XghTuQh3hchhyT2e1a6SFSCXTFMsJE6ux0Q-eu595sEnqVZjLRVJIk8d1eraE2M2gVUNfg53pgpfVC5Zpok9BfW7SZbqS5Cw5--R20&amp;t=634103086365158927" onMouseOver="this.src='/WebResource.axd?d=AKuxDQkfX9IrXbNQV4GNdTNCDKooNjlZXtJpRgDvjUm7-6FL0ZGTizlx50cTntULqw3ZuEaV7CYV4hWPZa9ZdVWCsPfPrSyKMGJNDRWsBYHpdYUH1HrLPbbaesYkf-cDXlZ_-w2&amp;t=634103086365158927';" onMouseOut="this.src='/WebResource.axd?d=RVSDbruLRZ0XghTuQh3hchhyT2e1a6SFSCXTFMsJE6ux0Q-eu595sEnqVZjLRVJIk8d1eraE2M2gVUNfg53pgpfVC5Zpok9BfW7SZbqS5Cw5--R20&amp;t=634103086365158927';" style="cursor:pointer;" /></td>

                </tr>
            </table></span>

Yikes, that's ugly. There is no longer any attribute called "Date".

Edit 2: Does this mean that it's impossible to update the date attribute directly?

What if I do something like set Date to the value of some variable, and update the variable?

Solution

  • to do this you must access the html control itself inside you custom control. try to get the html control then set its value with the value you want.you can do this using jquery as follows:

    $('#HTMLControlID').attr('attributeName','value');

    or 

    $('#HTMLControlID').prop('attributeName','value'); //jquery 1.6