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 Mike Lewis 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
Jun 4, 2008
170
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
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
330
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
750
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
171
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
306
JScannell
JScannell
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
265
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top