CODEWITHSUNDEEP
javascripthtml
Pfannkuchen
Pfannkuchen

Reputation: 17

Getting value from Multiselect form and insert it into the same table cell

I want to insert the value of a multiselect option form into the same table cell.

The select form is inside a table so I get the select value using const selectThing = [...document.getElementById('tableIdName').querySelectorAll("#selectIdName :checked")]

This works so far.

So:

  1. I have a table where I can choose a multiselect
  2. I select something and press the button 'add'
  3. The button function adds a new table row to another table and creates cell for each selected option.
  4. BUT I want them all to get inserted into the same cell. I don't want my code to add a cell for each selected option. But how?

I just cannot figure out what the right code is.

Feel free to check out the code!

function add() {
  const inputs = [...document.getElementById('inputs').querySelectorAll("input")]; 
  const selectFruit = [...document.getElementById('inputs').querySelectorAll("#fruit :checked")]; 

  if (isFormValid(inputs)) { 
    const table = document.getElementById('table')
    const newRowIdx = table.rows.length
    const rowId = `row_${newRowIdx}_${Date.now()}`
    const row = table.insertRow(newRowIdx)
    row.id = rowId
    
    inputs.forEach((input, idx) => {
      const cell = row.insertCell(idx)
      cell.appendChild(formatInputValue(input))
    })
    

    selectFruit.forEach((input, idx) => { 
      const cell = row.insertCell()
      
      cell.appendChild(formatInputValue(input))
    })
    
    const actions = { 
      Delete: () => {
        const row = document.getElementById(rowId)
        row.parentNode.removeChild(row)
      }
    }

    
    const actionCell = row.insertCell()
    actionCell.appendChild(formatActionButtons(actions))
    resetInputs(inputs)

  }
}

function formatInputValue(input) {
  return document.createTextNode(input.value)
}


function formatActionButtons(buttons) {
  const wrapper = document.createElement('div')
  
  Object.entries(buttons).forEach(([action, onclick]) => {
    let button = document.createElement('button')
    button.innerText = action
    button.onclick = onclick
    button.id="jsButtonStyle";
    wrapper.appendChild(button)
  })
  
  return wrapper
}
function isFormValid(inputs) {
  return inputs.filter(input => input.value === "").length === 0
}

function resetInputs(inputs) {
  inputs.forEach(input => input.value = "")
}
<table id="inputs">
  <tr>
    <th><label>Name:*</label></th>
    <th><label>Fruit:*</label></th>
  </tr>
  <tr>
    <td><input type="text" id="name" required></td>
         <option value="" selected disabled>Choose Fruit</option>
    <td><select  type="text" id="fruit" multiple required>
         <option value="" selected disabled>Choose Fruit</option>
          <option>Apple</option>
          <option >Plum</option></select>
      </td>
  </tr>
</table>

<div>
  <button id="button" onclick="add()">Add</button>
</div>

<div>
<h2>Here:</h2>
<table id="table" border="2">
  <tr>
    <th>Name</th>
    <th>Fruit</th>
  </tr>
</table>
</div>

Upvotes: 0

Views: 775

Answers (1)

Kaung Khant Zaw
Kaung Khant Zaw

Reputation: 1638

Moving row.insertCell() outside of a loop should solve as you only need one cell for selectFruit.

   ...
    const cell = row.insertCell();
    let arr = [];
    selectFruit.forEach((input, _) => arr.push(input.value));
    const textNode = document.createTextNode(arr.join(","));
    cell.appendChild(textNode);
   ...

Codepen

Upvotes: 0

Related Questions