I have decided to remove all calls to JavaScript event from the html form elements to an external file. In doing this i registered an event for each item. However access the elements attributes using ‘this
‘ can no longer be used what I have decided to use is event.target.value
for value attribute and event.target.name
for name attribute. I think this is not the best implementation since I am getting some adverse results from implementing it.
Under is my implemented code and more on the issue:
JavaScript Inline Event Handler (Before)
<input type="radio" name="rdb_NewUsers" value="1" list="#{'true':'Yes','false':'No'}" onclick="configureItemsForRadioButton(this.value, this.name)"
JavaScript Registered External Event Handler (After)
var configureRadioButtons = { onClick:function(evt){ evt.stopPropagation(); console.log(evt.target.value + '||'+evt.target.name); configureItemsForRadioButton(evt.target.value, evt.target.name); } }; dojo.connect(dojo.byId("rdbNewUser"), "onclick", configureRadioButtons, "onClick");
The problem I am facing is when I click on any button it actually executes the console.log(evt.target.value + '||'+evt.target.name);
even though it is not an registered event for the button. I think using event.target
refers to any event executed on the page. What else can be used instead of evt.target.value
to refer to the object who fired the event’s value and name.
Advertisement
Answer
After reviewing my code i soon realized i had overlooked something very important. My radio buttons actually carry a different id at run time rdb_NewUserstrue
and rdb_NewUsersfalse
and i was not registering events for these elements hence the reason the event kept firing on any click event, it was not finding an element with the id rdb_NewUsers
. My solution is under:
I query the DOM for all radio buttons and got their Ids
and based on the event/radio button clicked i attached a function (all radio buttons are handled by one function). In this way i did not need to hardcode an id
for the radio button.
var configureRadioButtons = { onClick:function(evt){ evt.stopPropagation(); //console.log(evt.target.value + '||'+evt.target.name+ '||'+evt.keyCode); configureItemsForRadioButton(evt.target.value, evt.target.name); } }; var radios = document.querySelectorAll('input[type=radio]'); for (var i = 0 ; i < radios.length ; i++){ //console.log(radios[i].id); dojo.connect(document.getElementById(radios[i].id), "onclick",configureRadioButtons, "onClick"); }