4 Replies - 3180 Views - Last Post: 21 October 2007 - 06:54 AM

#1 sandman85048  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 20-October 07

Adding a new combobox and incrementing a variable

Posted 20 October 2007 - 11:31 AM

I have a page where there is initially one combobox with three choices. But, there is an option to make another combobox with the same options. When the link to create a new box is clicked, a new combobox is created with the same values. The comboboxes need to have different values, because all the info will be sent via POST to a page (although the form elements are not included in my code). Okay, here's what I have so far:
<script type="text/javascript">
	cur = 1;
	function newBox() {
		cur++;
		document.write("<br/><select name='"+cur+"'><option value='one'>One</option><option value='two'>Two</option><option value='three'>Three</option></select>");
	}
</script>
<select name="1">
	<option value="one">One</option>
	<option value="two">Two</option>
	<option value="three">Three</option>
</select>
<a href="#" onclick="newBox()">Add more</a>
That doesn't work, though... when I click 'Add more' it looks like it is created, but then it just disappears. I'm not really sure what's wrong here.. I've just gotten back into web development and I'm just stumbling along :)

Is This A Good Question/Topic? 0
  • +

Replies To: Adding a new combobox and incrementing a variable

#2 Martyr2  Icon User is online

  • Programming Theoretician
  • member icon

Reputation: 4424
  • View blog
  • Posts: 12,293
  • Joined: 18-April 07

Re: Adding a new combobox and incrementing a variable

Posted 20 October 2007 - 07:55 PM

You might want to give this little code a try. It adds combo boxes for you and shows you how to add an option. Now if you want to dynamically build options you can throw the option building code into a loop or read the first select.

The code is meant to show you what you need to do to build the combo and populate it with options.

<script type="text/javascript">
	cur = 1;
	function newBox() {
		cur++;
		
		// Lets create a new select box and give it the name of our counter
		var newSelect = document.createElement("select");
		newSelect.name = cur;
		
		// Lets add it to the body of the page (could insert before and after elements too)
		document.body.appendChild(newSelect);
		
		// Create an option and set its name and value, then add it to the select box.
		var optionname = document.createElement("option");
		optionname.text ="one";
		optionname.value = "one";
		
		// Add the new option to the combo
		newSelect.options.add(optionname);
		
}
</script>



Just read the comments in the code to see what I have done. This will work for both FireFox and IE.

Enjoy! :)

"At DIC we be coding ninjas... just like you would see on hidden tiger crouching dragon but ten times cooler!" :snap:

This post has been edited by Martyr2: 20 October 2007 - 07:56 PM

Was This Post Helpful? 0
  • +
  • -

#3 sandman85048  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 20-October 07

Re: Adding a new combobox and incrementing a variable

Posted 20 October 2007 - 10:40 PM

Thanks so much for your reply, but one more thing that I forgot to add in my first post:

Since it will be going to a POST handler, I would like it to send along a value of how many boxes were used. Something like this:
<input type="hidden" name="numboxes" value="1"/>
I'm such a n00b for not knowing this, but how can I increment that value each time a combobox is added? Something like document.getElementById('numboxes').value?
Was This Post Helpful? 0
  • +
  • -

#4 Martyr2  Icon User is online

  • Programming Theoretician
  • member icon

Reputation: 4424
  • View blog
  • Posts: 12,293
  • Joined: 18-April 07

Re: Adding a new combobox and incrementing a variable

Posted 20 October 2007 - 11:49 PM

Give it an id and use something like this...

// Get a reference to the field
var field = document.getElementById("theidofhiddenfield");

// Increment the value and set it back to the field's value
field.value = field.value + 1;



I am sure you get the idea now. You could put this in your function newbox()

Enjoy! :)
Was This Post Helpful? 0
  • +
  • -

#5 sandman85048  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 0
  • View blog
  • Posts: 34
  • Joined: 20-October 07

Re: Adding a new combobox and incrementing a variable

Posted 21 October 2007 - 06:54 AM

Thanks a lot :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1