I have a row from a html table in the form : $(row

Question

I have two html tables: stockdataTable which gets its data from a database call. result table which is empty initially and dynamically has rows appended to it when a user clicks a row in the stockdataTable.

I capture the selected row using row = $(this).clone(); and append it to resultTable.

I have a html form "buyTrade" which has 3 elements, one of type hidden, a text field to enter a value, and a submit button.

how do I copy the row data of result table onto the hidden element in the form?

<script type="text/javascript">

var row

$(document).ready(function () {
    $("#tabs").tabs();

    $('#stockdataTable tr').click(function (event) {
        row = $(this).clone();
        $('#resultTable').append(row);
        $("#resultTable").on("append", "tr", function () {
            alert($(this) + " was added");
        }, function () {
            alert($(this) + " was removed");
        });
        $(row).click(function (event) {
            $(this).remove();
            var row = $(this).text();
        });
    });
});

function reg() {
    alert($(row).text());
    $('tradeDetail').val("$(row).text()");
    return true
}

</script>

Form code:

<form name="buyTrade" method="GET" action="/Stock/BuyServlet" onsubmit="return reg()">
    <input type="hidden" name="tradeDetail" value="" id="tradeDetail"></input>Qty:
    <input type="text" name="qty">
    <input type="submit" value="Buy">
</form>

Answer 1

Check this out:

    var row

    $(document).ready(function () {
        $("#tabs").tabs();

        $('#stockdataTable tr').click(function (event) {
            row = $(this).clone();
            $('#resultTable').append(row);
            $("#resultTable").on("append", "tr", function () {
                alert($(this) + " was added");
            }, function () {
                alert($(this) + " was removed");
            });
            $(row).click(function (event) {
                var row = $(this).text().replace(/ /g,''); // replace whitespaces
                $(this).remove();
                reg(row); // call to reg function
            });
        });
    });

    function reg(text) {
        alert(text);
        $('#tradeDetail').val(text);
        return true
    }

You need to declare a function with arguments, and then call it when you need. I change $('#tradeDetail').val(text) because you miss #. Note that $(this).remove() is moved after reading his properties, otherwise you can't get the text if it's removed.