CODEWITHSUNDEEP
javascripthtml
jb1990
jb1990

Reputation: 39

Getting HTML select values into a javascript table

I'm trying to take multiple user inputs from an HTML document and then transfer that data into a table using Javascript. Numerical data will transfer without an issue but dropdown select menus have been showing up as undefined, I've tried many different solutions I've seen on questions here but none of them have yielded any results. Any help anyone can provide would be much appreciated. Here is the relevant code...

HTML

<form class="items" action="" method="post" name="items">
            <ul>

                <li>
                    <label>Paint:</label>
                    <select id="paintColour">
                        <option value="White" selected="selected">White</option>
                        <option value="Blue">Blue</option>
                        <option value="Beige">Beige</option>
                        <option value="Red">Red</option>
                        <option value="Yellow">Yellow</option>
                    </select>
                    <select id="paintType">
                        <option value="Gloss">Gloss</option>
                        <option value="Matte">Matte</option>
                        <option value="Emulsion">Emulsion</option>
                    </select>
                    <input type="number" name="quantity" value="0" size="2" id="paintVolume">
                    <input type="button" value="Add" id="addPaint" onclick="Javascript:addPaints()">
                </li>

Javascript

function addPaints(){

var paintColour = document.getElementById("paintColour").selectedIndex;

var paintType = document.getElementById("paintType").selectedIndex;

var paintVolume = document.getElementById("paintVolume");
var tblPaint = document.getElementById("tblPaint");



var paintRowCount = tblPaint.rows.length;
var paintRow = tblPaint.insertRow(paintRowCount);

paintRow.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick=deletePaint(this) ">';
paintRow.insertCell(1).innerHTML = paintColour.value;
paintRow.insertCell(2).innerHTML = paintType.value;
paintRow.insertCell(3).innerHTML = paintVolume.value;
}


function deletePaint(obj){
var index = obj.parentNode.parentNode.rowIndex;
var tblPaint = document.getElementById("tblPaint");
tblPaint.deleteRow(index);
}

Upvotes: 1

Views: 59

Answers (1)

dotnetstep
dotnetstep

Reputation: 17485

Your problem with select is you are selecting index and then try to get value. Instead choose element and get value.

function addPaints(){

var paintColour = document.getElementById("paintColour");

var paintType = document.getElementById("paintType");

var paintVolume = document.getElementById("paintVolume");
var tblPaint = document.getElementById("tblPaint");



var paintRowCount = tblPaint.rows.length;
var paintRow = tblPaint.insertRow(paintRowCount);

paintRow.insertCell(0).innerHTML = '<input type="button" value="Delete" onClick=deletePaint(this) ">';
paintRow.insertCell(1).innerHTML = paintColour.value;
paintRow.insertCell(2).innerHTML = paintType.value;
paintRow.insertCell(3).innerHTML = paintVolume.value;
}


function deletePaint(obj){
var index = obj.parentNode.parentNode.rowIndex;
var tblPaint = document.getElementById("tblPaint");
tblPaint.deleteRow(index);
}

Upvotes: 1

Related Questions