Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

add textbox using javascript

Status
Not open for further replies.
kurie

kurie

Programmer
Joined
Jun 4, 2008
Messages
170
Location
ZA
hi all,
im adding a textbox using the code below, but the textbox just appears and disappears immediately after being displayed. does anyone know what im doing wrong here.

var txt = document.createElement("input");
var mydiv =document.getElementById("div1");
txt.setAttribute ('type', 'text');
txt.setAttribute ('id', "name");
txt.value = "defValue";
txt.name = "name";
txt.style.top=50;
txt.style.left=50;
txt.style.width=10;
txt.style.height=10;
mydiv.appendChild(txt);

Regards
 
Sort by date Sort by votes
Hi

By the way, the value of [tt]top[/tt], [tt]left[/tt], [tt]width[/tt] and [tt]height[/tt] must contain the unit of measurement too.
Code: 
      txt.style.top=[red]'[/red]50[red]px'[/red];
      txt.style.left=[red]'[/red]50[red]px'[/red];
      txt.style.width=[red]'[/red]10[red]px'[/red];
      txt.style.height=[red]'[/red]10[red]px'[/red];

Feherke.
 
Upvote 0 Downvote
be aware that this might not work in IE:

Code: 
 txt.name  = "name";


I normally have a 'createInput' function which does browser sniffing and uses the IE-safe version (see above URL) or standards-compliant code.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Tech Snippets & Info:
 
Upvote 0 Downvote
my div/span is inside a table with no visibility properties set,
here is my whole html page

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

<%@ 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='50px';
txt5.style.left='50px';
txt5.style.width='100px';
txt5.style.height='100px';
txt5.style.visibility = 'visible';
var newdiv = document.createElement('span');
newdiv.setAttribute('id',"divIdName");
//newdiv.appendChild(txt5);
//di.innerHTML = '<input type="text" name="TextBox' + "txt5" + '" value="TextBox'+ "txt5" +'" >';
di.appendChild(txt5);
alert(txt5.id);
//
//newdiv.innerHTML = ‘<input type=”text” name=”TextBox’+num+‘” value=”TextBox’+num+‘” >’;
}
function OpenGrid(txt2)
{
alert(txt2);
}
</script>

<html xmlns=" >
<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>
<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>
<span id="DIVID" runat ="server" style="width: 433px; height: 107px">
</span>

<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/>

</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td style="width: 30%">
&nbsp; &nbsp;&nbsp;&nbsp;
</td>
<td style="padding-right: 0px; padding-left: 60px" align ="right">
&nbsp;<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>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question Question
Javascript events
Replies
1
Views
624
Daniel K
Daniel K
Marclem
  • Locked
  • Question Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
643
Marclem
Marclem
JScannell
  • Locked
  • Question Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
950
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top