CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
john
john

Reputation: 777

How to get value of TouchSpin inside table

How do I get the value of a Bootstrap TouchSpin element inside of a table? I'm currently getting nothing as I don't believe it is finding the element.

Creation of the touchspin and inserting into table

var table = document.getElementById("createOrderTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.id = 'row' + rowCount;

// TouchSpin element
var cell1 = row.insertCell(1);
var touchSpinID = 'touchspin' + rowCount;
cell1.innerHTML = "<input id='" + touchSpinID +"' type='text' value='1'  name='" + touchSpinID +"'>";
cell1.id = 'cell' + touchSpinID;

//Init TouchSpin
$("input[name='" + touchSpinID +"']").TouchSpin({
verticalbuttons: true,
min: 0,
max: 100000000,
});

Iterating through the table and getting the value of the Touchspin, neither method below works. 

var table = document.getElementById("createOrderTable");
var rowCount = table.rows.length;
var productArray = [];

for(i = 1; i < table.rows.length; i++){
    var touchspinID = 'touchspin' + i;
    var touchspinValue = 0;        
    cellID = 'cell' + touchspinID;

    $(cellID).find(touchspinID).each(function(){
        touchspinValue = this.val();
        console.log(touchspinValue);
    });

    $("#createOrderTable tr").each(function () {
        $('td', this).each(function () {
            var value = $(this).find(touchspinID).val();
            console.log(value);
        })
    })
}

Upvotes: 0

Views: 987

Answers (1)

Yass
Yass

Reputation: 2668

Looking at your code, I believe the issue lies with touchspinID and cellID in that they're both missing the '#' to indicate that you're looking for elements with those specific ids.

Changing these two lines from:

var touchspinID = 'touchspin' + i;
cellID = 'cell' + touchspinID;

to:

var touchspinID = '#touchspin' + i;
cellID = '#cell' + touchspinID;

should fix your issue. Also, you don't need to use .each after the call to .find as the cell will only ever have one "touchspin" element and ids must always be unique:

var touchspinValue = $(cellID).find(touchspinID).val();
console.log(touchspinValue);

If the above doesn't solve your issue, include the table html in your question.

Upvotes: 1

Related Questions