how can i check ID of a clicked element js

Question

how can i check if an ID of a clicked element is lets say 'target'.

what i am trying to do is actually show and hide comment form on clicking in the text field and hide it when the user clicks out of the form. the problem is that if the user clicks Submit button the form hides and nothing is sent over. so i'll have to check if the submit buttons id matches the clicked element and not hide it in this case.

i am using ruby on rails remote_form_for and onblur and onfocus events now.

this is my bigger form that i am showing.

<div id="bigArea" style="display:none">
<% remote_form_for @horses do |f|%>
<%= f.text_area :description, {:onBlur=>"{$(bigArea').hide();$('smallField').show();}"} %>
<%= f.submit "Submit"%>
<% end %>
</div>

and this is the smaller form field that hides everytime you click in it.

<div id="smallField">
<%= text_field_tag 'sth',"Click to comment, {:onFocus=>"$('bigArea').show();$('smallField').hide();"} %>
</div>

My question is how can i disallow the form to hide when a user clicks submit button? i suppose i should check which element's id has been clicked. and if it's submit button's ID i should not hide the form. Or maybe there is some other way to do all this?

i would greatly appreciate any answers!

Answer 1

In javascript you can use the id attribute on an element to read its associated id take a look at the example below. So you could get the attribute, then check its ID, in the example below we are getting the id of this which would be the div that has an id of foo. Since this.id == 'foo' will return true it will show us an alert.

<div id = "foo" onclick="if(this.id == 'foo'){alert('Guess What everyone This div has an id of Foo')};">
    hello
</div>

Check out more DOM attributes you can get here: http://www.howtocreate.co.uk/tutorials/javascript/domstructure