javascript: create dynamic checkbox from dropdown menu

Question

I have a dropdown menu which get the values dynamically from an array with a foreach loop. I know that the javascript "getElementById" need a unique key. The problem is that my unique key is a combination of "service_select" and "$value2" . So that every service can be more than one.

The only unique key I have from the dropdown elements is the variable $value .

<?php
echo'<select id="service_name" name="service_select">';
foreach($array_name_new as $key=>$value)
{
   echo'<option value="'.$value.'">'.$value.'</option>';
}
echo'</select>';

echo'<p>Parameter:  <input name=\"$value2\" value=\"$value2\'/></p>';    
?>

For each selected value in the dropbox I want a "checkbox" with the dropbox selection as name and value. I need although a seperate textfield with "$value2" as value.

I have already found this thread ( How to create list of checkboxes dynamically with javascript ), but I'm a newbe to javascript and don't understand the code completely.

• What does the if clause in function "function populate()" ? Is this for generating the checkboxes?
• Where has the codepart in the answer be added into the original code?

According to the mentioned thread I tried to modify my code like this:

<?PHP
.
.
.   
echo'<select id="service" name="service_select" onchange="add_service(this.id,$_POST['service_select'],$value2)">';
  foreach($array_command_name_new as $key=>$value)
  {
  echo'<option value="'.$value.'">'.$value.'</option>';
  }
echo'</select>';

$key2 = array_search($value,$command_in_hostfile[0]);
$value2 = $command_in_hostfile[1][$key2];

$id2 = compact("$_POST['service_select']", "value2");

<script type="text/javascript">         
function add_service($id2, $_POST['service_select'], $value2)
{
foreach($array_command_name_new as $key=>$value)
  {         
  var elementid = docuemnt.getElementById($id2);
  var checkbox = document.createElement('id');
  checkbox.type = "checked";
  checkbox.name = "$_POST['service_select']";
  checkbox.value = "$_POST['service_select']";
  checkbox.id = "$id";
  var label = document.createElement('$_POST['service_select']')
  label.htmlFor = "id";
  label.appendChild(document.createTextNode('$_POST['service_select']');
  container.appendChild(checkbox);
  container.appendChild(label);
  }

echo'<p>Parameter:  <input id="parameter" name=\"$value2\" value=\"$value2\' onclick="addService('value_parameter')" /> </p>';
var s1 = document.getElementById($id2);
}
</script>
.
.
.
?>

I would be pleased if anyone can help me.

Answer 1

I'm afraid the solution will be a bit more complex... you need to add inputs to your form for every value the user selects...

Something like this:

[Option a]     Parameter: [__________]    [X]
[Option b]     Parameter: [__________]    [X]

[Please select... ][v]

Every time a user selects a new option you must add a new line to allow the parameter to be entered.

You will then need a [X] button in each line so the user can remove unwanted entries.

This is Javascript intensive :)