I have this ASP.NET web page that makes use of the <asp:TextBox> tag and I would like to use it with my codebehind as well as an a small AJAX code. The text box field will be use to edit/enter data into a database. at the same time, I would like to use the text box field to load table data back into the page via a small AJAX program that will be executed by an onclick event.

Example AJAX

<script language="javascript" type="text/javascript">
    function LoadForm(ContactID)
    {
        var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        var url = "../GeoPlaneServices.asmx/AlertsForm";
        xmlHttp.open("POST", url, true);
        xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlHttp.onreadystatechange = function()
        {
            if(xmlHttp.readystate == 4)
            {
                var response = xmlHttp.responseText;
                var XMLObject = new ActiveXObject("Microsoft.XMLDOM");
                XMLObject.async = false;
                try
                {
                    XMLObject.loadXML(response);
                    var responseStatus = XMLObject.getElementsByTagName("ArrayOfContactDataStructure/ContactDataStructure");
                    for(var index = 0; index < responseStatus.length; index++)
                    {
                        var ContactName = responseStatus[index].getElementsByTagName("UserName").item(0).text;
                        var SMS = responseStatus[index].getElementsByTagName("SMS").item(0).text;
                        var Email = responseStatus[index].getElementsByTagName("Email").item(0).text;
                        
                        //loadcontent into form
                        alert(Email);
                        document.getElementById('txtUser').innerHTML = ContactName;
                        document.getElementById('txtSMS').innerHTML = SMS;
                        document.getElementById('txtEmail').innerHTML = Email;
                        alert(Email);
                    }
                }
                catch(e)
                {
                    alert(e);
                }
            }
        }
        xmlHttp.send('ContactID=' + ContactID);
    }
    </script>

ASP form filed and row control

<td align="left" onmouseover="this.style.backgroundColor='#778899'" onmouseout="this.style.backgroundColor='#efefeb'" onclick='javascript:LoadForm(<%#DataBinder.Eval(Container.DataItem, "ContactID") %>)'><%# DataBinder.Eval(Container.DataItem, "UserName") %></td>
<tr>
                <td>&nbsp;</td>
                <td colspan="9" style="height: 26px">Name: <asp:TextBox ID="txtUser" runat="server" Width="130"></asp:TextBox>
                SMS #: <asp:TextBox ID="txtSMS" runat="server" Width="78"></asp:TextBox>&nbsp;Carrier Name:&nbsp;
                <asp:DropDownList ID="ddlCarrier" runat="server"></asp:DropDownList></td>
            </tr>

The AJAX function works fine with regular HTML tags; but it does not work with the asp:TextBox tag. I think on of the reasons is because the tag is running at a server level and it cannot be access by the AJAX function.

If anyone out there has another view or implementation that would allow me to accomplish this job, I would greatly appreciate it.

Recommended Answers

All 4 Replies

you inspect the code at client side, there u check the property of text box and then try to put id over text box, using this id access the textbox and use it for ajax,
probably it should work.

I already did that and I still can't get my data inside the tag.

hi
dont use innerHTML property with text box. its property of tag element like div.
use
document.getElementById('txtSMS').value="hiiiii";

or see an example;

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
  <script type="text/javascript" >
    function clickMe()
    {
        alert(document.getElementById('id_TB1').value);
        document.getElementById('id_TB1').value="hiiiii";
    }
  </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="id_TB1" runat="server"></asp:TextBox>
    </form>
    <input type='Button' ID="Button1" OnClick="javascript:clickMe();" Text="Click Me" /></div>

</body>
</html>
commented: Nice example +7

I see, it makes sense. I don't know what I was thinking. Text boxes have value properties thus innerHTML would not have worked. I guest I need to take a break from C#/C++ and Java programming and improve on my Java scripting and HTML properties.

Thank you very much for your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.