Add field to form dynamically

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>


saturationAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nabsolCommented:
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
nabsolCommented:
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
RainMan82Commented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

nabsolCommented:
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
saturationAuthor Commented:
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
nabsolCommented:
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
smaccariCommented:
Or:

newRadioButton = document.createElement("<INPUT TYPE='text' NAME='TEST' VALUE='First Choice'>");
document.forms[0].appendChild(newRadioButton);
0
smaccariCommented:
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
netsmithcentralCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nabsolCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.