I need help with a form that allows users to add additional states and text boxes for each added state. The goal is to prevent users from selecting the same state in multiple select boxes.
<form action=state.php method=post>
<a href="javascript:addElement();" style='color:blue; text-decoration:underline;'>Add a State </a>
<a href='javascript:removeElement();' style='color:blue; text-decoration:underline;' >Remove </a><br /><br />
<script type="text/javascript">
var intTextBox=0;
//FUNCTION TO ADD TEXT BOX ELEMENT
function addElement() {
intTextBox = intTextBox + 1;
var contentID = document.getElementById('addresscontent');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML = "<select id='u" + intTextBox + "' name=b_state[" + intTextBox + "][statename]/><option value=''>Select a State</option><option value='AK'>AK</option><option value='AL'>AL</option><option value='AR'>AR</option><option value='AS'>AS</option><option value='AZ'>AZ</option><option value='CA'>CA</option></select> <span style='font-size:12px;'>URL (if different) </span><input style='border:1px solid black; ' size=60 type='text' id='u" + intTextBox + "' name=b__state[" +intTextBox + "][url] /><br>";
contentID.appendChild(newTBDiv);
}
//FUNCTION TO REMOVE TEXT BOX ELEMENT
function removeElement() {
if(intTextBox != 0) {
var contentID = document.getElementById('addresscontent');
contentID.removeChild(document.getElementById('strText'+intTextBox));
intTextBox = intTextBox-1;
}
}
</script>
<div id="addresscontent"></div>
</div>
<input type=submit value='go'>