We Keep Coding

javascript changing style attribute breaks events chain?

I have the following html:
<span style="display:none" id="progressBar">HELLO</span>
<span id="statusPremium">NULL</span>
<span id="statusLink">NULL</span>
<table>
<tr>
<td>
<input type="text" value="12345" onchange="document.getElementById('statusPremium').innerHTML='ONCHANGE';document.getElementById('progressBar').style.display='block';"/>
</td>
</tr>
<tr>
<td>
CLICK
</td>
</tr>
</table>
I enter input item then editing it and then click link. I expect both text ie. ONCHANGE ONCLICK appears. However I can see only ONCHANGE.
If I remove:
document.getElementById('progressBar').style.display='block';
the behaviour is as I expected. But if then I remove all table, tr and td tags there is again only ONCHANGE.
Could please some enlighten me why it works that way?

Validation of visible text field in ruby on rails

I have some hidden text fields in my table which become visible one by one when I click the add button. I want to validate(in rails) only those rows which are visible.
<div class="info_type">
Internet<hr>
<table id="email_add">
<tr id="email_1">
<th><%= f.label(:email1,"Email :") %></th>
<td><input id="contact_email1" type="text" name="contact[email1]"></input>
</td>
</tr>
<tr id="email_2">
<th><%= f.label(:email2,"Email 2:") %></th>
<td><input id="contact_email2" type="text" name="contact[email2]"></input>
</td>
</tr>
<tr id="email_3">
<th><%= f.label(:email3,"Email 3:") %></th>
<td><input id="contact_email3" type="text" name="contact[email3]"></input>
</td>
</tr>
</table>
<input type="button" id="add_email" value="Add Email"/>
<input type="button" id="delete_email" value="Delete Email"/>
</div>
I hide rows email_2 and email_3 using jquery and display when add is clicked.
Is there any method of checking the text field visibility while using validates email tag or will I have to do it in jquery only??

Send a list of the hidden fields to the request then in the create method you can remove the fields you do not want to save from the params before you save.
To determine the hidden fields use JQuery's $("#contact_email1").is(":visible")
Then in the controller before saving remove the hidden elements variables using params[:info].delete :email1 or params.delete :email1 depending where it is located.
So, just create a list using some logic to keep track of the hidden elements, possibly by just using an int. Then iterate over that list and remove them from the params.

Where do you put the form element if you have editable rows of a table in AngularJS?

We have a table(A) and we want a specific row to become editable on click. Currently we have a directive that inserts a new table into the td of table(A) where it is called. We do this so we can use the <form> element around the table.
uneditable-table.html
<table>
<tbody>
<tr>
<td ng-show="editing" class="editing" colspan="2">
<div edit-form-directive
model="thing"
on-success="thingUpdated(thing); editing=false;"
on-cancel="editing=false; setUpdating(false);"
enabled="editing" />
</td>
</tr>
</tbody>
</table>
edit-template.html inserted via the editFormDirective
<form ng-submit="save(thingCopy)" name="EditForm">
<table>
<tbody>
<tr>
<td>
<input ng-model="thing.field1"/>
</td>
<td>
<input ng-model="thing.field2"/>
</td>
</tr>
</tbody>
<table>
</form>
Question:
We have tried putting the <form> element around each row to be editable, and this works, however, this is not semantically correct with the <form> around a <tr> within a table.
We also considered putting the <form> around the entire table in uneditable-table.html. This causes a form validation issue, where we may have many errors per non-unique form node, so we would have to index the nodes to get specific errors.
We settled on the code as it is here, with having the <form> element around a whole new table (in edit-template.html) and inserting that into a <td>, as this seemed the least harmful.
We do have to have the form tag so we can access validation based on the form name and nodes.
Is there a more Angular (or elegant) way to do this?
Thank you!

Angular way. Form tag isn't needed:
<table ng-form="EditForm">
...
</table>
http://docs.angularjs.org/api/ng.directive:ngForm

how to traverse the element in <tr>

html:
<tr id="head-58">
<td style="width:150px;">
<input type="button" name="delete" class="delete_person" value="58" />name<button type="button" style="margin: 1px 35px 5px;" name="delete" value="58" class="delete_icon button_style">Delete</button>
</td>
<td>
<input type="checkbox" name="first_aid" id="id_first_aid" />FirstAid
</td>
<td>
<input type="checkbox" name="sick_bay" id="id_sick_bay" /Sick bay
</td>
<td>
<input type="checkbox" name="ambulance" id="id_ambulance" />Ambulance
</td>
</tr>
Here onclicking the delete_person class,i want to show the hidden button with class delete_icon.Since class delete_icon can have more than one,i need to show the hidden button form clicked element.I tried with $this.closest('tr').find(".delete_icon").toggle(); which is not working.

Use:
$this.parents('tr').find(".delete_icon").toggle();

Your delete button is not a child of tr. Move it into tr, or use:
$(this).closest('tr').next('.delete_icon')

There is no $this variable unless you create it yourself. this refers to the target of the event, so use it in the jQuery function to create a jQuery object containing it:
$(this).closest('tr').find(".delete_icon").toggle();
However, you also need to move the button inside the table row for that to work. Now it looks like it's inside the table but outside any table cell, which is invalid HTML. (Some browsers may put it inside some table cell, other may move it outside the table entirely. The result is unpredictable, so unless you move the button inside a cell, it's not possible to write code that accesses it.)

Since the button is after the <tr>...</tr>
Use:
$(this).parent().next().toggle()

Setting elements in a table to be focused by tabbing

I have a table that I need to make focusable by tabbing. Right now as I tab through my page it will jump over the table entirely. I have added a href="#" and that allows tab focus on the element I put that on, but that breaks my onclick Javascript that I have. Is there any other way to do this other then doing tab indexing?

I didn't understand your questions entirely but if you are talkinf about form fill ups then use this method, and tab the input fields with a tab.. You can also change tab numbers accordingly,
<form>
<table>
<tr>
<td><input tabindex="1" name=""/></td>
<td><input tabindex="3" name=""/></td>
</tr>
<tr>
<td><input tabindex="2" name=""/></td>
<td><input tabindex="4" name=""/></td>
</tr>
</table>