Javascript auto-calculate inside an ASP.NET repeater

Question

I have two textboxes inside a repeater (in the same item). When I enter a value into one, then leave, I want to do some processing on that value, then fill the other with the result of the processing. I'd like to do this client-side.

I'm very new to javascript. I've gotten as far as:

<asp:TextBox ID="txtMarkup" runat="server" onblur='calculateValues(this,"txtPercentage")'></asp:TextBox>
<asp:TextBox ID="txtPercentage" runat="server" onblur='calculateValues(this,"txtMarkup")'></asp:TextBox>

//Some code

<script type="text/javascript">
  function calculateValues(sender, target) {
    //Perform calculations
    var parent = sender.parentNode //get the container, so I can get the appropriate target
    //This is where I'm having trouble
  }
</script>

I can't seem to figure out how to find the other textbox, to update its text. I'm also not even sure this is the best approach, and am open to alternatives if there is a better way.

* EDIT

I got this working using a different approach. I've added it as an answer in case anyone's looking in the future.

Answer 1

You can get the inputs by their tagname and then pick them from the collection returned:

var txtMarkup = sender.parentNode.getElementsByTagName('input')[0];
var txtPercentage= sender.parentNode.getElementsByTagName('input')[1];

I tend to use something like this to get the client id into the javascript:

document.getElementById('<%= txtMarkup.ClientID %>').value = 'some value';

But if youre inside a repeater this might need tweaking.

Answer 2

I ended up changing my approach to my problem and was able to get everything working well. Below is the code I used. It's VB, but it translates easily. ClientIDModes are all set to "Inherit."

Markup:

<asp:Repeater ID="rptEstimateDetails" runat="server">
    <ItemTemplate>
        <asp:TextBox ID="txtPprPriceDtlQuoted" runat="server"></asp:TextBox>
        <asp:TextBox ID="txtPprPriceDtlMarkup" runat="server"></asp:TextBox>
    </ItemTemplate>
</asp:Repeater>

<script type="text/javascript">
    function CalculateValues(sender, target) {
        //Sender & Target come in pointing exactly where they need to be
        //Perform calculations
        document.getElementById(target).value = //Calculated value
    }
</script>

Code-Behind:

Private Sub rptEstimateDetails_ItemCreated(sender As Object, e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptEstimateDetails.ItemCreated    
    Dim quoteTxt As TextBox = e.Item.FindControl("txtPprPriceDtlQuoted")
    Dim markupTxt As TextBox = e.Item.FindControl("txtPprPriceDtlMarkup")
    Const prefix As String = "MainContent_rptEstimateDetails_"

    quoteTxt.Attributes.Add("onblur", "Javascript:CalculateValues('" & prefix & quoteTxt.ClientID & "', '" & prefix & markupTxt.ClientID & "');")
    markupTxt.Attributes.Add("onblur", "Javascript:CalculateValues('" & prefix & markupTxt.ClientID & "', '" & prefix & quoteTxt.ClientID & "');")
End Sub