I am at a complete loss here. I need a form where users can select from a drop down box a certain location and then next to the drop down box is a text field where they can enter information about the location. But, under the text field I want “add another field” option where they can add another field and enter another piece of info for the certain location. Then on top of all of that I want under all of that “add another location”.
Location 1------------- text field 1.1
----------------------- text field 1.2
----------------------- [add another field]
Location 2------------- text field 2.1
----------------------- text field 2.2
----------------------- text field 2.3
----------------------- [add another field]
[Add another location]
I hope this makes sense. I’ve been trying everything I come across on the web but I can’t seem to get anything to work. Any help would be appreciated, thank you.
And, bulevardi, I can’t seem to get your code to work.
This is what I have so far. I can add new drop downs fine, but when it comes to adding a text field that go along with the drop downs it will only add to the first drop down and none of the others. I feel like I need to create unique id names for the divs containing the text fields, but don’t know how.
<script type="text/javascript">
var my_div = null;
var newDiv = null;
function add_text() {
var newdiv=document.createElement("div")
var newtext=document.createElement("input")
newdiv.appendChild(newtext) //append text to new div
document.getElementById("test").appendChild(newdiv) //append new div to another div
}
function add_drop()
{
// create a new div element
// and give it some content
newDiv = document.createElement("div");
newDiv.innerHTML = "<tr><td><select><option>1</option><option>2</option><option>3</option></select></td><td><div id='test'></div><input type='button' onclick='add_text()' value='add text field' /></td></tr>";
// add the newly created element and it's content into the DOM
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
</script>
<body onload="add_drop()">
<table border="1">
<div id='org_div1'></div>
</table>
<input type='button' onclick='add_drop()' value = 'add drop down'/>
Sorry it took so long. Didn’t have spare time to figure it out here…
I simplified something (maybe can be done more simplified).
The button works now and adds the field above the button each time + if you choose another option, it adds the new field above the right button…
<html>
<head>
<title></title>
<script type="text/javascript">
function initialize(){
if(document.getElementById("trigger")){
var button = document.getElementById("trigger");
button.onclick = add_drop;
}
}
function addField(chosenOption){
var showField = document.createElement("div");
showField.innerHTML = "<input type=\\"text\\" />";
var button = document.getElementById(chosenOption);
// paste the field under the last field of the chosen option, before the button
button.parentNode.insertBefore(showField,button);
}
function addButton(chosenOption){
var showField = document.createElement("div");
showField.innerHTML = "<input type=\\"text\\" />";
var showButton = document.createElement("div");
showButton.setAttribute("id", chosenOption);
showButton.innerHTML = "<input type=\\"button\\" value=\\"add text field\\" />";
// trigger the button function to add a new field
showButton.onclick = function (){ addField(chosenOption); }
var orgDiv = document.getElementById("org_div");
orgDiv.parentNode.insertBefore(showField,orgDiv);
orgDiv.parentNode.insertBefore(showButton,orgDiv);
}
function chooseOption() {
var selectedOption = this.options[this.selectedIndex].value;
addButton(selectedOption);
}
function add_drop(){
var newDiv = document.createElement("div");
newDiv.innerHTML = "<select id=\\"options\\"><option value=\\"one\\">1</option><option value=\\"two\\">2</option><option value=\\"three\\">3</option></select>";
var orgDiv = document.getElementById("org_div");
orgDiv.parentNode.insertBefore(newDiv,orgDiv);
var selectedOption = document.getElementById("options");
selectedOption.onchange = chooseOption;
}
</script>
</head>
<body onload="initialize();">
<div id="org_div"></div>
<div id="test"></div>
<input type="button" id="trigger" value="add drop down" />
</body>
</html>
function initialize(){
if(document.getElementById("trigger")){
var button = document.getElementById("trigger");
button.onclick = addField;
}
function addField() {
var newField = document.createElement("input");
newField.setAttribute("id", "theNewField");
newField.innerHTML = ""; // here comes everything that needs to come in your new field
trigger.parentNode.insertAfter(newField,trigger);
}}
