CODEWITHSUNDEEP
javascripthtmlcssforms
Lake
Lake

Reputation: 89

Text input creates selection options

Was able to get the input to create an output. However, can't seem to get the text you type in the input to show up as the option's dropdown name. 

function addSku() {
  let tableRef = document.getElementById('sku_list');
  let newRow = tableRef.insertRow(-1);
  let newCell = newRow.insertCell(0);
  let newText = document.createTextNode(document.querySelector('#sku_input').value);
  var op = new Option();
  op.value = newText;
  op.text = newText;
  sku_dropdown.options.add(op);
  newCell.appendChild(newText);
}

document.getElementById('add_sku').onclick = addSku;
<form>
  <input required id="sku_input" type="text" placeholder="Sku #" />
  <input id="add_sku" name="add_sku" value="Add" type="button" />
</form>

<table>
  <tbody id="sku_list">
    <tr>
      <th>Sku</th>
    </tr>
  </tbody>
</table>
<form>
  <select id="sku_dropdown">
    <option disabled>Select Sku</option>
  </select>
</form>

https://jsfiddle.net/8pq7d5aw/2/

Upvotes: 0

Views: 36

Answers (2)

Vishnu
Vishnu

Reputation: 897

function addSku() {
  let tableRef = document.getElementById('sku_list');
  let newRow = tableRef.insertRow(-1);
  let newCell = newRow.insertCell(0);
  let newText = document.querySelector('#sku_input').value;
  var op = new Option();
  op.value = newText;
  op.text = newText;
  sku_dropdown.options.add(op);
  newCell.appendChild(document.createTextNode(newText));
 
}
console.log(document.getElementById('add_sku'))
document.getElementById('add_sku').addEventListener('click', addSku);
<form>
  <input required id="sku_input" type="text" placeholder="Sku #" />
  <input id="add_sku" name="add_sku" value="Add" type="button" />
</form>

<table>
  <tbody id="sku_list">
    <tr>
      <th>Sku</th>
    </tr>
  </tbody>
</table>
<form>
  <select id="sku_dropdown">
    <option disabled>Select Sku</option>
  </select>
</form>

Upvotes: 0

obscure
obscure

Reputation: 12891

There are a couple mistakes in your code.

let newText = document.createTextNode( document.querySelector('#sku_input').value);
var op = new Option();
op.value = newText;
op.text = newText;

In the above you're creating a new TextNode. This is actually a HTML element so you can't assign it to the Option's .value and .text properties. Do it like this instead:

let newText = document.createTextNode( document.querySelector('#sku_input').value);
var op = new Option();
op.value = document.querySelector('#sku_input').value;
op.text = document.querySelector('#sku_input').value;

Lastly

sku_dropdown.options.add(op);

sku_dropdown is undefined so get the actual html element using it's id

document.getElementById('sku_dropdown').options.add(op);

Upvotes: 1

Related Questions