Dawie de Villiers
asked on
Add control using javascript
I would like to add a textbox control on a from using javascript. my code is below and my problem is i cant see the textbox i have created. what am i suppose to do to make it visible.
there are no errors generated.
var txt5 = document.createElement ("input");
txt5.setAttribute ('type', 'text');
txt5.setAttribute ('id', name);
txt5.value = "defValue";
txt5.name = "name";
txt5.top = 25;
txt5.left = 5
txt5.width = 100;
txt5.height = 100;
Thanks
there are no errors generated.
var txt5 = document.createElement ("input");
txt5.setAttribute ('type', 'text');
txt5.setAttribute ('id', name);
txt5.value = "defValue";
txt5.name = "name";
txt5.top = 25;
txt5.left = 5
txt5.width = 100;
txt5.height = 100;
Thanks
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks guys but one last thing the txt5.style.top=5; and txt5.style.left=5; properties are not working.
the textbox is written after everything else has been displayed(there is a table on the form and i wanted txt5 to be written inside the table)
i have tried to add a div and assign it ID DIVID and changed the add line to this:
document.forms(0).DIVID.ap pendChild( txt5);
but i get an error that divid is null or not an object.
the textbox is written after everything else has been displayed(there is a table on the form and i wanted txt5 to be written inside the table)
i have tried to add a div and assign it ID DIVID and changed the add line to this:
document.forms(0).DIVID.ap
but i get an error that divid is null or not an object.
ASKER
this didnt work either: document.forms(0).getEleme ntById("DI VID").appe ndChild(tx t5);
object does not support this property or method
object does not support this property or method
ASKER
hi guys, i finally gto it to work, but the textbox just appears and disappears immediately.
var txt5 = document.createElement("in put");
var di =document.getElementById(" DIVID");
txt5.setAttribute ('type', 'text');
txt5.setAttribute ('id', "name");
txt5.value = "defValue";
txt5.name = "name";
txt5.style.top=5;
txt5.style.left=5;
txt5.style.width=100;
txt5.style.height=100;
di.appendChild(txt5);
var txt5 = document.createElement("in
var di =document.getElementById("
txt5.setAttribute ('type', 'text');
txt5.setAttribute ('id', "name");
txt5.value = "defValue";
txt5.name = "name";
txt5.style.top=5;
txt5.style.left=5;
txt5.style.width=100;
txt5.style.height=100;
di.appendChild(txt5);
Are you having any style applied to the div for it to get dissappeared?
ASKER
no im not, here is the div property
<div id="DIVID" style="width: 433px; height: 107px">
</div>
its inside a table row(im not setting visible property to anyone control on the table )
below is the complete page
<div id="DIVID" style="width: 433px; height: 107px">
</div>
its inside a table row(im not setting visible property to anyone control on the table )
below is the complete page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="frmSearchGrid.aspx.cs" Inherits="frmSearchGrid" %>
<%@ Register Assembly="RadGrid.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>
<%@ Register Assembly="RadInput.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<script language ="javascript" type ="text/javascript" >
function AddButon()
{
var txt5 = document.createElement("input");
var di =document.getElementById('DIVID');
txt5.setAttribute ('type', 'text');
txt5.setAttribute ('id', "name");
txt5.value = "defValue";
txt5.name = "name";
txt5.style.top=5;
txt5.style.left=5;
txt5.style.width=100;
txt5.style.height=100;
txt5.style.visibility = 'visible';
var newdiv = document.createElement('div');
//var divIdName = my+num+Div;
newdiv.setAttribute('id',"divIdName");
newdiv.appendChild(txt5);
//newdiv.innerHTML = '<input type="text" name="TextBox' + "txt5" + '" value="TextBox'+ "txt5" +'" >';
di.appendChild(newdiv);
alert(txt5.id);
//
//newdiv.innerHTML = <input type=text name=TextBox+num+ value=TextBox+num+ >;
}
function OpenGrid(txt2)
{
alert(txt2);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Search</title>
<link href="../StyleSheets/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body enableviewstate="True" style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; clip: rect(0px 0px 0px 0px); width: 100%; height: 100%;">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table cellpadding="0" cellspacing="0" style="height: 95%; width: 100%; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; clip: rect(0px 0px 0px 0px); padding-top: 0px; background-color: #eef0f6;" border="0">
<tr>
<td class="Header" colspan="2" style="height: 30px">
<asp:Label ID="lblContacts" runat="server" Text="Search" ForeColor="White"></asp:Label>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
</td>
<td style="padding-left: 10px; height: 40px; border-right: navy 1px solid; border-top: navy 1px solid; border-left: navy 1px solid; border-bottom: navy 1px solid;">
<TABLE style="padding-right: 0px; height: 80%;width: 100%; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px; background-color: #eef0f6;" cellSpacing=0 cellPadding=0
border=0 id="tblView" runat="server"><TBODY><TR>
<td colspan="4" style="padding-right: 5px; padding-left: 5px; font-weight: bold;
font-size: 11px; padding-bottom: 5px; padding-top: 5px; font-family: tahoma; vertical-align: top; width: 100%; height: 90%;" rowspan="4">
<table frame="void "
style="background-color: #eef0f6; width: 100%; height: 80%; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; clip: rect(0px 0px 0px 0px); padding-top: 0px;" cellpadding="0" cellspacing="0" border="0" id="MyTable">
<tr>
<td style="font-size: 11px; font-family: Tahoma; height: 4%">
<table border="0" cellpadding="0" cellspacing="0" class="table" style="height: 80%" id="MyTable">
<tr>
<td>
<asp:Label ID="lblLook" runat="server" Text="Look For:" style="font-weight: normal; font-size: 9pt; font-family: tahoma" ForeColor="Chocolate"></asp:Label></td>
<td>
<telerik:RadTextBox ID="tboSearch" runat="server" Width="260px" Skin="Outlook">
</telerik:RadTextBox></td>
<td>
<asp:Button ID="btnSearch" runat="server" Text=" Find " OnClick="btnSearch_Click" Height="18px" Width="80px" style="font-size: 11px; font-family: tahoma" />
<asp:Button ID="btnRefresh" runat="server" Text="Refresh List" OnClick="btnRefresh_Click" Height="19px" Width="6px" style="font-size: 11px; font-family: tahoma" Visible="False" />
<asp:TextBox ID="tboLength" runat="server" Width="0px"></asp:TextBox></td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="font-size: 11px; font-family: Tahoma">
</td>
</tr>
<tr>
<td style="font-size: 11px; font-family: Tahoma;">
<hr />
</td>
</tr>
<tr>
<td>
<div id="DIVID" style="width: 433px; height: 107px">
</div>
<tr>
<td style="font-size: 11px; font-family: Tahoma;">
<table style="width: 100%; height: 90%;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 40px">
<asp:Button ID="btnEdit" runat="server" Text="Edit" OnClick="btnEdit_Click" OnClientClick = "AddButon()" Width="70px" Height="20px" />
<asp:Button ID="btnNew" runat="server" Text="New" Width="70px" OnClick="btnNew_Click" Height="20px" /></td>
<td style="height: 40px">
</td>
<td style="height: 40px">
<asp:TextBox ID="TextBox2" runat="server" Width="0px"></asp:TextBox>
</td>
<td style="height: 40px">
<asp:TextBox ID="TextBox1" runat="server" Width="0px"></asp:TextBox></td>
</tr>
<tr>
<td style="height: 1%" colspan="4"><hr/>
<asp:GridView ID="rdgAccounts" runat="server" AutoGenerateColumns="False" OnRowDataBound="rdgAccounts_RowDataBound" AllowPaging="True" AllowSorting="True" OnRowCommand="rdgAccounts_RowCommand" OnPageIndexChanged="rdgAccounts_PageIndexChanged" OnRowEditing="rdgAccounts_RowEditing" OnSelectedIndexChanged="rdgAccounts_SelectedIndexChanged" OnPageIndexChanging="rdgAccounts_PageIndexChanging" OnSelectedIndexChanging="rdgAccounts_SelectedIndexChanging">
<Columns>
<asp:BoundField DataField="ID" />
<asp:BoundField DataField="Name" />
<asp:BoundField DataField="Date" />
<asp:TemplateField>
<AlternatingItemTemplate>
<asp:TextBox ID="txt" runat="server" Text='<%# Eval("ID") %>' ></asp:TextBox>
</AlternatingItemTemplate>
<ItemTemplate>
<asp:TextBox ID="txt" runat="server" Text='<%# Eval("ID") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" />
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style="width: 30%">
</td>
<td style="padding-right: 0px; padding-left: 60px" align ="right">
<asp:Button ID="btnOk" runat="server" Text="OK" OnClientClick = "SaveToParent()" OnClick="btnOk_Click" Width="70px" Height="20px"/>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" Width="70px" Height="20px" /></td>
</tr>
</table>
</td>
</tr>
<tr>
</tr>
<TR></TR>
<tr>
</tr>
</TBODY>
</table>
</td>
</TR>
</TABLE>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Open in new window