Getting HTML select values into a javascript table

Question

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);
}

dotnetstep · Accepted Answer · 2014-12-11 16:02:02Z

1

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);
}

answered Dec 11, 2014 at 16:02

dotnetstep

17.5k6 gold badges61 silver badges80 bronze badges

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

1 Comment

jb1990 Over a year ago

Had to wait 10 minutes before I could for some reason.

Collectives™ on Stack Overflow

Getting HTML select values into a javascript table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related