I have a form where I allow users to choose a territory (City, State)
But lets say the users have multiple territories, how can I make it so that the user can simple press a button to add a territory/
And they can add (up to 5 if they want?
I tried to modify the code a bit to include 2 form elements
(I didn’t think to include the state before)
So I tried to modify the above function
function newTerritory() {
//first I create everytyhin I need (3 divs, 2 labels, 1 select box, and an input box
var div = document.createElement('div'),
div1 = document.createElement('div'),
label1 = document.createElement('label'),
state = document.createElement('select');
label2 = document.createElement('label'),
div2 = document.createElement('div'),
city = document.createElement('input')
// then I add the classes to the divs, labels, form elements
// also the names to both form elements
div.className = "form-group";
label1.className = "col-sm-offset-4 col-sm-2 control-label";
label1.appendChild(document.createTextNode('State'));
div1.className = "col-sm-2";
state.name = 'state[]';
state.className = "form-control";
label2.className = "col-sm-2 control-label";
label2.appendChild(document.createTextNode('City'));
div2.className = "col-sm-2";
city.name = 'city[]';
city.className = "form-control";
// this is where I put them on the page
div.appendChild(label1,div1,select,label2,div2,input);
div1.appendChild(select);
div2.appendChild(input);
return div, div1, div2;
}
//what does this function do
function addTerritoryHandler(evt) {
evt.preventDefault();
var buttonPara = this.parentNode,
parent = buttonPara.parentNode,
form = this.form;
parent.insertBefore(newTerritory(), buttonPara);
}
// Add the onClick event to the button/link (Add Location)
document.querySelector('#addTerritory').onclick = addTerritoryHandler;
Only 1 div and label gets created.
Heres my function
function newTerritory() {
//first I create everything I need (3 divs, 2 labels, 1 select box, and an input box
var div = document.createElement('div'),
div1 = document.createElement('div'),
label1 = document.createElement('label'),
state = document.createElement('select');
label2 = document.createElement('label'),
div2 = document.createElement('div'),
city = document.createElement('input')
// then I add the classes to the divs, labels, form elements
// also the names to both form elements
div.className = "form-group";
label1.className = "col-sm-offset-4 col-sm-2 control-label";
label1.appendChild(document.createTextNode('State'));
div1.className = "col-sm-2";
state.name = 'state[]';
state.className = "form-control";
label2.className = "col-sm-2 control-label";
label2.appendChild(document.createTextNode('City'));
div2.className = "col-sm-2";
city.name = 'city[]';
city.className = "form-control";
// this is where I put them on the page
div.appendChild(label1,div1,label2,div2);
div1.appendChild(state);
div2.appendChild(city);
return div;
}
wow, that was fun to troubleshoot…
I found a solution, heres the function
<script type='text/javascript'>//<![CDATA[
function newTerritory() {
//first I create everything I need (3 divs, 2 labels, 1 select box, and an input box
var div = document.createElement('div'),
div1 = document.createElement('div'),
label1 = document.createElement('label'),
state = document.createElement('select');
label2 = document.createElement('label'),
div2 = document.createElement('div'),
city = document.createElement('input'),
al = document.createElement("option"),//I did this for all states
// then I add the classes to the divs, labels, form elements
// also the names to both form elements
div.className = "form-group";
label1.className = "col-sm-offset-4 col-sm-2 control-label";
label1.appendChild(document.createTextNode('State'));
div1.className = "col-sm-2";
state.name = 'state[]';
state.className = "form-control";
label2.className = "col-sm-2 control-label";
label2.appendChild(document.createTextNode('City'));
div2.className = "col-sm-2";
city.name = 'city[]';
city.className = "form-control";
//add options
al.value = "AL"; al.text = "Alabama"; state.add(al);//I did this for all states
// this is where I put them on the page
div1.appendChild(state);
div2.appendChild(city);
div.appendChild(label1);
div.appendChild(div1);
div.appendChild(label2);
div.appendChild(div2);
return div;
}
function addTerritoryHandler(evt) {
evt.preventDefault();
var buttonPara = this.parentNode,
parent = buttonPara.parentNode,
form = this.form;
parent.insertBefore(newTerritory(), buttonPara);
}
document.querySelector('#addTerritory').onclick = addTerritoryHandler;
//]]>
</script>
That was pretty straightforward, when I thought about it, thanks all…