By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,364 Members | 1,576 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,364 IT Pros & Developers. It's quick & easy.

problem with placing the dynamically created textbox

P: 11
I have got a Html form with a table.
The table contains textfield and a button.
When I click the button I want another textfiled to be created.
(I have done till here)

The problem is that I want the new textfield to be created in the same cell (within <TD> tag) where the first textfield is. I have tried to use <span> tag so as to force the new textfield to be created in the table cell. But I could not succeed.
My code goes as follows:


<html>
<head>
<title>testing</title>

<script type="text/javascript">

var counter = 0;

function createTextField(name, id, parentEl) {
if(navigator.userAgent.toLowerCase().indexOf("msie ") != -1) { isIE = true; } else { isIE = false; }

if(isIE) {
newInput = document.createElement('<INPUT name=\''+(name+counter)+'\'>');
} else {
newInput = document.createElement('INPUT');
newInput.name = name + counter;
newInput.size = 10;
}

newInput.type = 'text';
newInput.id = id + counter;

if(parentEl && parentEl != "") {
if(typeof(parentEl) == "string") {
parentEl = document.getElementById(parentEl);
}
parentEl.appendChild(newInput);
parentEl.appendChild(document.createElement('BR')) ; // break line
} else {
document.body.appendChild(newInput);
document.body.appendChild(document.createElement(' BR')); // break line
}

counter++;
}


</script>

</head>
<body>


<table>
<tr>
<td><input type="text" name="username" id="user" size="20" value="" /><span id="putInputElementsHere"></span></td>
<td><input type="button" value="More" onClick="createTextField('myInput', 'myInputId', '');" /></td>
</tr>

</table>

<p>&nbsp;</p>
</body>
</html>
Mar 13 '08 #1
Share this Question
Share on Google+
3 Replies


100+
P: 107
Hi you just need to complete the function call here:

Expand|Select|Wrap|Line Numbers
  1. <input type="button" value="More" onClick="createTextField('myInput', 'myInputId', '');" />
by entering the ID of the element you want to insert the textbox into, ie:

Expand|Select|Wrap|Line Numbers
  1. <input type="button" value="More" onClick="createTextField('myInput', 'myInputId', 'putInputElementsHere');" />
Cheers

Andy
Mar 13 '08 #2

P: 11
sorry for disturbing . I got my mistake .
The corrected code is:
[HTML]<html>
<head>
<title>testing</title>

<script type="text/javascript">

var counter = 0;

function createTextField(name, id, parentEl) {
if(navigator.userAgent.toLowerCase().indexOf("msie ") != -1) { isIE = true; } else { isIE = false; }

if(isIE) {
newInput = document.createElement('<INPUT name=\''+(name+counter)+'\'>');
} else {
newInput = document.createElement('INPUT');
newInput.name = name + counter;
newInput.size = 10;
}

newInput.type = 'text';
newInput.id = id + counter;

if(parentEl && parentEl != "") {
if(typeof(parentEl) == "string") {
parentEl = document.getElementById(parentEl);
}
parentEl.appendChild(newInput);
parentEl.appendChild(document.createElement('BR')) ; // break line
} else {
document.body.appendChild(newInput);
document.body.appendChild(document.createElement(' BR')); // break line
}

counter++;
}


</script>

</head>
<body>


<table>
<tr>
<td><input type="text" name="username" id="user" size="10" value="" /><span id="putInputElementsHere"></span></td>
<td><input type="button" value="More" onClick="createTextField('myInput', 'myInputId', 'putInputElementsHere');" /></td>
</tr>

</table>

</body>
</html>[/HTML]
Mar 13 '08 #3

P: 11
Thanks Andy for your reply

:-)
Mar 13 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.