Click to open another 2 fields

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?

Thanks

You can have an Add button in the form

<p><button id="addTerritory" value="Add territory"></p>

That when it is clicked, adds a field to the form.

document.querySelector('#addTerritory').onclick = addTerritoryHandler;

The handler prevents the default action (of submitting the form) and instead inserts the new field before the button

function addTerritoryHandler(evt) {
    evt.preventDefault();

    var buttonPara = this.parentNode,
        parent = buttonPara.parentNode,
        form = this.form;
    parent.insertBefore(newTerritory(), buttonPara);
}

And lastly the newTerritory function gives us a new field for the form, that looks something like <p><input name="territory[]"></p>

function newTerritory() {
    var p = document.createElement('p'),
        input = document.createElement('input');
    p.appendChild(document.createTextNode('Another territory '));
    input.name = 'territory[]';
    p.appendChild(input);
    return p;
}

You can try it out at http://jsfiddle.net/4ezqfjkp/

wwwwwwow, thanks

! question, though. Would the extra fields be submitter in the POST like to others?

Give them the same name (e.g. name=“territory”) and it’ll be accessible via $_POST[‘territory’] array.

nice!

Although, these days $_POST isn’t used, right?
There is the filter_input command that’s much better to use instead.

And if you are using filter_input to handle an array such as for the above form, then you will also want to use the FILTER_REQUIRE_ARRAY option.

For example:

$territories = filter_input(INPUT_POST, 'territory', FILTER_SANITIZE_STRING, FILTER_REQUIRE_ARRAY);

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;

Im trying to get it to spit out the markup

<div class="form-group">
<label for="state" class="col-sm-offset-4 col-sm-2 control-label">State</label>
<div class="col-sm-2">
<select name="state" id="state" class="form-control">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
...
</select>
</div>
<label for="city" class="col-sm-2 control-label">City</label>
<div class="col-sm-2">
<input type="text" name="city" id="city" class="form-control">
</div>              
</div>

Am i even close?

ok, think im almost thhere.
So now when I click the Add location button, this happens


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…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.