Appending jQuery selector variable into a table

Question

total jquery/programming newbie here.

I have a bunch of text boxes that can be selected. Once the box is selected, I would like to append a new row to my table, and add the h4 from my text box into the first column of the new row. Having some trouble with the variables..

The text box looks like this:

<div class="boxed" data-price="7">
    <h4 class="boxTitle">Lemons</h4>
    <p>blahblahblah</p>
</div>

and the table looks like this:

<tbody>
    <table class="table table-hover" id="theOrder">
    <tr>
        <th>Name</th>
        <th>Quantity</th>       
        <th>Price</th>
    </tr>
    <tr>
        <td>Product1</td>
        <td><input type="text" class="form-control" value="1"></td> 
    </tr>
    <tr>
        <td>Product2</td>
        <td><input type="text" class="form-control" value="1"></td> 
    </tr></table></tbody>

and my jquery looks like this, but how can I get it to print my variable productName instead of the string?

$(document).ready(function() {

  $( ".boxed" ).click(function( event ) {
        var productName = $(this).find('.boxTitle');
        // highlighting - this works fine
$(this).toggleClass("highlightedBox");
        productName.toggleClass("boxTitleHl");

        // adds new row to the end of the table
        $('#theOrder').append('<tr><td class="newLine">productName</td><td><input type="text" class="form-control" value="1"></td></tr>');
    });
});

I even tried doing this instead, but it just print out [object][object].. I am not sure why. Do I need to convert the object into a string?

$('#theOrder').append('<tr><td class="newLine">zzzz</td><td><input type="text" class="form-control" value="1"></td></tr>');
$(".newLine").text(productName);

Made a jfiddle!! http://jsfiddle.net/hBuck/

Answer 1

You can use jQuery text() or html() to get content inside the tag

Change

var productName = $(this).find('.boxTitle');

to

var productName = $(this).find('.boxTitle').html();

or

var productName = $(this).find('.boxTitle').text();

Also change this line

$('#theOrder').append('<tr><td class="newLine">'+productName+'</td><td><input type="text" class="form-control" value="1"></td></tr>');

Try this code

  $( ".boxed" ).click(function( event ) {
        var puddingN = $(this).find('.boxTitle');
        puddingName=puddingN.text();
        // highlight the box and the pudding name
        $(this).toggleClass("highlightedBox");
        puddingN.toggleClass("boxTitleHl");

        // TEST: changes title of table to pudding name..
        $(".orderTitle").text(puddingName);

        // adds new row to the end of the table
        //$('#theOrder').append('<tr><td class="newLine">EEEEK</td><td><input type="text" class="form-control" value="1"></td></tr>');
        // changes text to the name of the pudding but doesn't work :()
        //$(".newLine").text(puddingName);

        $('#theOrder').append('<tr><td class="newLine">'+puddingName+'</td><td><input type="text" class="form-control" value="1"></td></tr>');
    });

Fiddle Demo

Answer 2

You need to concatenate the string with the variable

var productName = $(this).find('.boxTitle').text();
 $('#theOrder').append('<tr><td class="newLine">'+productName+'</td><td><input type="text" 
class="form-control" value="1"></td></tr>');