Javascript not showing .value?

Question

I am trying to use JavaScript to set a textbox text equal to "" or NULL. I am using visual studio 2013 and have created an asp.net web application. I am also using telerik controls(not sure if that will affect anything). I currently have a combobox(ddlMaritalStatus) and a textbox(txtSpouseName). I currently have JavaScript that when ddlMaritalStatus selected text is set to single then txtSpouseName is disabled. I would also like to have txtSpouseName have its text erased when ddlMaritalStatus is changed back to single. I have been researching through Google and through stack overflow and have not come across an option that works. Every answer I have found says to use document.getElementById("txtSpouseName").value = ""; but my program is not reading the .value with JavaScript.

<telerik:RadComboBox ID="ddlMaritalStatus" runat="server" EmptyMessage="--Select--" OnClientSelectedIndexChanged="DisableBox" TabIndex="15" AutoPostBack="false"></telerik:RadComboBox>
                <script type="text/javascript">
                    function DisableBox() {
                        var TextBox = $find("<%=txtSpouseName.ClientID %>");
                        var Location = $find("<%=ddlMaritalStatus.ClientID %>");
                                if (Location.get_text().length < 7) {
                                    TextBox.disable();
                                    document.getElementById("txtSpouseName").value = "";
                                }
                                else {
                                    TextBox.enable();
                                }
                            }
                </script>

<telerik:RadTextBox ID="txtSpouseName" runat="server" Enabled="false" AutoPostBack="false" TabIndex="16"></telerik:RadTextBox>

Here is the code that I have so far. Any help or suggestions would be great! Thanks!

EDIT I am using IE 11.

Answer 1

Please try with the below code snippet.

<script type="text/javascript">

    function ClientSelectedIndexChanged(sender, args) {
        if (sender.get_selectedItem().get_value() == "Single") {
            document.getElementById(sender.get_id().replace("ddlMaritalStatus", "txtSpouseName")).value = "";
            document.getElementById(sender.get_id().replace("ddlMaritalStatus", "txtSpouseName")).disabled = "disabled";
        }
        else {
            document.getElementById(sender.get_id().replace("ddlMaritalStatus", "txtSpouseName")).value = "";
            document.getElementById(sender.get_id().replace("ddlMaritalStatus", "txtSpouseName")).disabled = "";
        }
    }

</script>
...........
...........
<asp:Panel ID="Panel1" runat="server">
    <telerik:RadComboBox ID="ddlMaritalStatus" runat="server" OnClientSelectedIndexChanged="ClientSelectedIndexChanged">
        <Items>
            <telerik:RadComboBoxItem Value="Married" Text="Married" />
            <telerik:RadComboBoxItem Value="Single" Text="Single" />
        </Items>
    </telerik:RadComboBox>
    <asp:TextBox ID="txtSpouseName" runat="server"></asp:TextBox>
</asp:Panel>

Let me know if any concern.

Answer 2

This is the answer I found from another post. This disables the textbox when "Married" is selected and erases and disable the textbox when "Single" is selected. Thank you to everyone who tried to help me!

function DisableBox(sender, args) {

var TextBox = $find("<%=txtSpouseName.ClientID %>");

if (args.get_item().get_text() == "Married") {

    TextBox.enable();

}

else {

    TextBox.clear();

    TextBox.disable();

}

}