CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvcasp.net-mvc-3
ps__
ps__

Reputation: 365

Add text from textarea to a table with jquery

In my view I want to add the text user enter in a textarea to be added to my table.

User enter type in the text in a textarea and then click on a button and then the text appears into a table.

I have to following code in my view.

    <p>Custom Question</p>
<div class="editor-field">
@Html.TextAreaFor(model => model.CustomQuestionText)
@Html.ValidationMessageFor(model => model.CustomQuestionText)
</div>
<div><p><input type="button" value="Lägg till" /></p></div>
</div>

And this is the table that I want the text to filled in:

<table id="CustomTable">
<thead><tr><th>Custom questions</th></tr></thead>
<tbody>
</tbody>
</table>

Any solutions with Jquery is appreciated, thanks in advance.

Upvotes: 1

Views: 1792

Answers (2)

Darren
Darren

Reputation: 70728

Give your button an ID and then use the JQuery click function to capture the textbox value and append to the table:

<input type="button" id="btnAppend" value="Lägg till" />


<script>
    $("#btnAppend").click(function() {
        var textboxVal = $("#CustomQuestionText").val();

        $("#CustomTable").append("<tr><td>" + textboxVal + "</td></tr>");
 });

</script>

Upvotes: 4

Darin Dimitrov
Darin Dimitrov

Reputation: 1038770

$(function() {
    $(':input[type="button"]').click(function() {
        $('#CustomTable tbody').append(
            $('<tr/>', {
                html: $('<td/>', {
                    text: $('#CustomQuestionText').val()
                })
            })
        );
        return false;
    });
});

And here's a live demo.

Upvotes: 2

Related Questions