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.

What exactly didn't you understand from code of the linked thread? You can use the DOM-Inspector for Firefox to understand what your linked thread talked about. For that create a very simple html page. The DOM-Inspector can show the elements hirachy of your created site. — Reporter
– Reporter, Commented Aug 4, 2014 at 13:28

Sérgio Bernardo · Accepted Answer · 2014-08-04 14:35:30Z

0

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 :)

answered Aug 4, 2014 at 14:35

Sérgio Bernardo

662 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hawk Over a year ago

My primary idea was, that the user select the option in the dropdown and add the parameter as text. Via Javascript I want only write the checkbox with the value from the menu and the textfiled with the parameter.

Collectives™ on Stack Overflow

javascript: create dynamic checkbox from dropdown menu

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related