Inputting emoticons in TextAreaFor

Question

I'm trying to implement some emoticons to my forum, but my JS code seems to not be working. JS:

$button = $('button[name="smiley"]')
$('button').on('click', function () {
$('textareafor[name="content"').append(":)")})

Html:

@using Reddit.Models
@model CreateTopicViewModel

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <section id="postForm">

            @using (Html.BeginForm("CreateTopic", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                <div class="form-group">
                    @Html.LabelFor(x => x.Name, new { @class = "control-label" })
                    @Html.TextBoxFor(x => x.Name, new { @class = "form-control" })
                </div>             
                <button name="smiley">s</button>
                <div class="form-group" name="content">
                    @Html.LabelFor(x => x.Content, new { @class = "control-label" })
                    @Html.TextAreaFor(x => x.Content, new { @class = "form-control", @rows = "8" , name = "content" })
                </div>
                <button type="submit" class="btn btn-block btn-primary">Post Topic</button>
            }
        </section>
    </div>
</div>

What is the deal here ? Am I on the wrong track ? Thanks.

score 0 · Answer 1 · answered Dec 15 '17 at 02:28

You're still in right track, but using id attribute is more preferred here since name attribute determines user's input name in POST request.

First, put id attribute on both smiley button & textarea:

<button id="smiley">s</button>

@Html.TextAreaFor(x => x.Content, new { @class = "form-control", @rows = "8", id = "content" })

Then you can use this script to add emoticon into textarea:

<script>
    $('#smiley').click(function () {
        var textarea = $('#content');
        textarea.val(textarea.val() + ":)");
    });
</script>

Live implementation: .NET Fiddle example.

Reference:

How to append text to '<textarea>'?

Inputting emoticons in TextAreaFor

1 Answers1