?
Solved

Add field to form dynamically

Posted on 2006-04-11
10
Medium Priority
?
269 Views
Last Modified: 2008-02-26
I'm trying to use the following code to add a field to my form on the client-side, but the following code is not working.  It's adding the field to the page, but it's not adding it in between the form tags so that I can get the value when it's submitted.  What am I doing wrong?

<script>
    var newRadioButton = document.createElement("<INPUT TYPE='text' NAME='TEST' VALUE='First Choice'>")
    document.body.insertBefore(newRadioButton);
</script>


0
Comment
Question by:saturation
10 Comments
 
LVL 6

Expert Comment

by:nabsol
ID: 16427864
Hi
What you can do is create an empty div inside your form

<form>
<div id="mydiv">
</div>
</form>

and use this code
document.getElementById("mydiv").innerHTML = newRadioButton;

instead of document.body.insertBefore(newRadioButton);


Hope this will help
By Nab
0
 
LVL 6

Expert Comment

by:nabsol
ID: 16427898
Hi
Try this

<head>
<script language="JavaScript">
function a()
{
document.getElementById("mydiv").innerHTML = "<INPUT TYPE='text' NAME='TEST' VALUE='First Choice'>"
}
</script>
</head>

<body onload="a()">
<form>
<div id="mydiv">
</div>
</form>
</body>

By Nab
0
 
LVL 7

Expert Comment

by:RainMan82
ID: 16427917
what about just making the field hidden and then show it when you want it to be seen....rather than forcing it inbetween somewhere....

just a thought...
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 6

Expert Comment

by:nabsol
ID: 16427931
Hi

Try this
<head>
<script language="JavaScript">
function a()
{
newRadioButton = document.createElement("<INPUT TYPE='text' NAME='TEST' VALUE='First Choice'>")
document.getElementById("mydiv").insertBefore(newRadioButton);
alert(document.getElementById("myform").innerHTML)
}
</script>
</head>

<body onload="a()">
<form id="myform">
<div id="mydiv">
</div>
</form>
</body>

By Nab
0
 

Author Comment

by:saturation
ID: 16427949
The problem is that I don't have direct access to the <form> tag--I have to insert the field using the DOM somehow--I'm just unsure.  The reason is that I'm using an app that only allows me to use <script></script>  tags to manipulate fields on the screen...So, given thins, how can I force the field to be added to the form from the <script></script> tags without having any other way to add in a <div></div> tag pre-page loading?
0
 
LVL 6

Expert Comment

by:nabsol
ID: 16427987
Hi
So this will help

<head>
<script language="JavaScript">
function a()
{
newRadioButton = document.createElement("<INPUT TYPE='text' NAME='TEST' VALUE='First Choice'>")
document.forms[0].insertBefore(newRadioButton);

}
</script>
</head>

<body onload="a()">
<form>

</form>
</body>

By Nab
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16428304
Or:

newRadioButton = document.createElement("<INPUT TYPE='text' NAME='TEST' VALUE='First Choice'>");
document.forms[0].appendChild(newRadioButton);
0
 
LVL 9

Expert Comment

by:smaccari
ID: 16428363
Just a precision though: the method createElement, to be fully FF compliant, must takes only the HTML tag as parameter.
You have then to set attributes on the returned object:

newRadioButton = document.createElement("INPUT");
newRadioButton.type = "text";
newRadioButton.name = "test";
newRadioButton.value = "First Choice";
document.forms[0].appendChild(newRadioButton);
0
 
LVL 12

Accepted Solution

by:
netsmithcentral earned 2000 total points
ID: 16428767
You're using the DOM methods incorrectly.  First, let's define a couple of them, then I'll demonstrate the proper usage.

document.body - accesses the body tag of an HTML page
parent.insertBefore(what, where) - insert the node in the first argument as a child node, before the node in the second argument
parent.appendChild(what) - insert the node in the argument as the last child of the parent
document.createElement('TAGNAME') - create a new element node of tagname
element.property = - assign a value to a property of an element


So, following those rules, to add a radio button to a form, do this:

function addRadio(){
 var newRadioButton = document.createElement('INPUT');
 newRadioButton.type = 'text';
 newRadioButton.name = 'test';
 newRadioButton.value = 'First Choice';
 document.forms[0].appendChild(newRadioButton);
}
0
 
LVL 6

Expert Comment

by:nabsol
ID: 16428948
Hi
I think that my solutoin was using same forms[0] and smaccari was also correct anyway netsmithcentral got better luck as he DEMONSTRATED :) ;-)

<html>
<head>
<script language="JavaScript">
function a()
{
newRadioButton = document.createElement("<INPUT TYPE='text' NAME='TEST' VALUE='First Choice'>")
document.forms[0].insertBefore(newRadioButton);

}
</script>
</head>

<body onload="a()">
<form>

</form>
</body>
</html>
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

755 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question