Add new item to <p> tag and assign to drop down list dynamically

user_16606039 0
Viewed 64

I'm doing a website that allow user to add new group to the existing group. In the existing group it already have three fixed group which are It, cleaning, accountant, so my idea was letting user to add group name by clicking submit and their input field will be sent to empty's <p> tag (eg： nurse, doctor.. and so on differentiate which a coma ,). Other than that, after I able to get the existing and new added group, I need to dynamically add the full groups to a drop down list. (eg: It, cleaning, accountant, nurse, doctor).

I know stackoverflow is not a code writing service, but I do make own research before posting this question and I couldn't found any useful resources. So anyone who willing to guide me will be much appreciate. Thanks in advance

Current template:

enter image description here

Expected Output:

enter image description here

Full code:

<!DOCTYPE html>
<html>
   <body>
      <h1>Existing Group</h1>
      <p>IT, Cleaning, Accountant</p>
      <h1>Add New Group</h1>
      <p></p>
      <input type="tel" id="group" name="group" placeholder="enter group name">
      <br><br>
      <button type="button" class="btn btn-primary btn-sm">Submit</button>
      <h1>Drop Down List</h1>
      <label for="group">Choose a group:</label>
      <select name="group" id="group">
         <option value="IT">IT</option>
         <option value="Cleaning">Cleaning</option>
         <option value="Accountant">Accountant</option>
      </select>
   </body>
</html>
html javascript
2 Answers

In this case, you will need to use some javascript depending on your requirements to add the extra node as follows:

Pure JS:

   var result = document.getElementById("group");
   var tag = document.createElement("option");
   tag.setAttribute("value",result.value)
   var text = document.createTextNode(result.value);
   tag.appendChild(text);
   var element = document.getElementById("groupSelect");
   element.appendChild(tag);

Keep in mind you have 2 elements with the same ID (group), which will cause most of your JS to crash. Also note that you can also use Jquery which might be a bit easier as well

user_66086670

You need to use JavaScript.

First, you use addEventListener() to listen when the user clicks the submit button. Then, we get the value of the input and separate it by commas with input.value.split(','). Then, we loop through the values, create a new <option> tag and add it to the <select> tag.

Also, you have two elements with id="group", so you need to change one of them. I changed the <select> to id="group-select".

const submit = document.querySelector('button');
const input  = document.querySelector('input');
const select = document.querySelector('select');
const myP    = document.querySelector('p#myP');

submit.addEventListener('click', function(e)
{
  const values = input.value.split(',');
  
  if (myP.innerText == '')
  {
    myP.innerText = values;
  }
  else
  {
    myP.innerText += ', ' + values;
  }
  
  for (let i in values)
  {
    const new_option = document.createElement('option');
    
    new_option.value     = values[i];
    new_option.innerText = values[i];
    
    select.appendChild(new_option);
  }
});
<!DOCTYPE html>
<html>
   <body>
      <h1>Existing Group</h1>
      <p>IT, Cleaning, Accountant</p>
      <h1>Add New Group</h1>
      <p id="myP"></p>
      <input type="tel" id="group" name="group" placeholder="enter group name">
      <br><br>
      <button type="button" class="btn btn-primary btn-sm">Submit</button>
      <h1>Drop Down List</h1>
      <label for="group">Choose a group:</label>
      <select name="group" id="group-select">
         <option value="IT">IT</option>
         <option value="Cleaning">Cleaning</option>
         <option value="Accountant">Accountant</option>
      </select>
   </body>
</html>

user_155847430
Related