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 gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

create input tags at runtime

Status
Not open for further replies.
tinac99

tinac99

Programmer
Jan 17, 2002
58
US
Hi,

I have a project which contains a task to create input tags at runtime. The number of input tags as well as the labels beside it are determined by a dropdownlistbox. Upon change of value of the dropdownlistbox, the system will go to the database to retrieve the labels and the number of input tags to create.

I got this code from a another website:

<html>
<head>
<title></title>
<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
document.getElementById('text').innerHTML += "<input type='text' value='' /><br />";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput()" name="add" value="Add input field" />
</form>
<div id="text">

</div>
</body>
</html>

This code works as long as the user allows blocked content upon clicking of the button. Steps are as follows:
1) Click Add Input Field Button
2) This message shows on top of the screen: "To help protect your security, Internet Explorer has restricted this webpage from running scripts or ActiveX controls that could access your computer. Click here for options..."
3) Click on the message and another message pops if the user wants to allow blocked content.

Is there anyway to create input tags dynamically without any interruptions nor changing the from security settings? There may even be an ajax option.

Thanks for your help!

Best,

Tina
 
Sort by date Sort by votes
Hi

No idea if and how works in Explorer, but I would use DOM methods :
Code: 
[b]function[/b] [COLOR=darkgoldenrod]addInput[/color][teal]()[/teal]
[teal]{[/teal]
  [b]var[/b] cont[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'text'[/i][/green][teal])[/teal]
  [b]if[/b] [teal]([/teal]fields [teal]!=[/teal] [purple]10[/purple][teal])[/teal] [teal]{[/teal]
    cont[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'input'[/i][/green][teal]))[/teal]
    cont[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'br'[/i][/green][teal]))[/teal]
    fields [teal]+=[/teal] [purple]1[/purple][teal];[/teal]
  [teal]}[/teal] [b]else[/b] [teal]{[/teal]
    cont[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'br'[/i][/green][teal]))[/teal]
    cont[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]document[teal].[/teal][COLOR=darkgoldenrod]createTextNode[/color][teal]([/teal][green][i]'Only 10 upload fields allowed.'[/i][/green][teal]))[/teal]
    document[teal].[/teal]form[teal].[/teal]add[teal].[/teal]disabled[teal]=[/teal][b]true[/b][teal];[/teal]
  [teal]}[/teal]
[teal]}[/teal]
[small][maroon]Warning[/maroon] The above code was not tested[/small]

Feherke.
 
Upvote 0 Downvote
another option is to build each form at design time and show/hide the forms depending on the drop down selection. this will also be easier if you use a js library like jquery, prototype, etc. The library handles the browser differences for you automatically.

Code: 
<script reference jquery></script>
<script>
   //when the document is ready for jquery
   $(function(){
 
      //hide all forms with the page loads
       $('form').hide();
 
       //when the drop down changes 
       $('#selector').change(function(){

           //get the id of the form from the drop down
           var formId = $(this).find('selected').val();

           //reset and hide all forms
           $('form').hide().reset();

           //display only the selected form
           $('#'+formId).show();
       });
   });
<script>
...
<select id="selector">
   <option value="a">form a</option>
   <option value="b">form b</option>
   <option value="c">form c</option>
</selector>
<form id="a">...</form>
<form id="b">...</form>
<form id="c">...</form>

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259
 
Upvote 0 Downvote
There must be something else going on with your IE, because in mine the code you posted creates the inputs and says absolutely nothing about it.

No Activex alert or anything. It would seem to me that there is more code than you posted that may be causing the Activex alert.

As it is it worked as expected in IE8 and in compatibility view for it.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Thanks for the response, guys.

I tried the DOM methods and it generated the same output. I'll try the show/hide method and I will keep you posted.

Best,

Tina
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
172
feherke
feherke
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
153
chikwendu
chikwendu
AbidingDude
  • Locked
  • Question
Dynamically Create A Table
Replies
3
Views
165
AbidingDude
AbidingDude
damipera
  • Locked
  • Question
Checkboxes - At Least 1 is Selected? 1
Replies
2
Views
136
damipera
damipera
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
182
gmmastros
gmmastros

Part and Inventory Search

Sponsor

Back
Top