textarea.val() sends original value not edited

Question

I have this textarea in my MVC project

<textarea id="edit-content" name="content" placeholder="Text content goes here">@Model.content</textarea>

but when I try to send this to a Json call like this

<script type="text/javascript">
    function save() {
        var $title = $('#edit-title'),
            $content = $('#edit-content'),
            $messageLoading = $('#message-edit-loading'),
            $messageError = $('#message-edit-error'),
            $id = $('#edit-id');

        updateComment($id.val(), $title.val(), $content.val())
            .done(function (data) {
                if (data.IsValid()) {
                    $messageError.html('');
                    $messageError.removeClass('hidden');
                    $messageLoading.removeClass('hidden');
                    $messageLoading.html('The text is saved');
                } else {
                    $messageError.removeClass('hidden');
                    $messageError.html(data.Message);
                }
            })
            .fail(function (xhr, message) {
                $messageError.removeClass('hidden');
                $messageError.html('Registration failed: ' + message);
            })
    };
</script>

I get the original value of @Model.content instead of the new value.

Edit

my script.js code

function updateComment(id, title, content) {
    return $.get("/Chapter/GetJSON_Update",
        {
            id: id,
            title: title,
            content: content
        },
        'json');
};

the entire code from my Edit.cshtml

@model Academia_Unitate.Models.Chapter
@{
    ViewBag.Title = "Edit " + Model.title;
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Html.Partial("~/Views/Shared/_TinyMCE.cshtml")

<div id="edit">
    <h1>
        Edit @Model.type.name
    </h1>

    <div class="" role="form">
        <div class="form-group">
            <label class="sr-only" for="title">Title</label>
            <input class="form-control" type="text" id="edit-title" placeholder="Enter a title" value="@Model.title" required="required" />
        </div>

        <div class="form-group">
            <label class="sr-only" for="content">Content</label>
            <textarea id="edit-content" name="content" placeholder="Text content goes here">@Model.content</textarea>
        </div>

        <button type="submit" class="btn btn-success" id="save-btn" onclick="save()"><span class="glyphicon glyphicon-ok"></span> Save</button>

        <span id="message-edit-loading" class="alert hidden"></span>
        <span id="message-edit-error" class="alert alert-danger hidden"></span>
    </div>
</div>

<input type="hidden" value="@Model.id" id="edit-id"/>

<script type="text/javascript">
    function save() {
        var $title = $('#edit-title'),
            $content = $('#edit-content'),
            $messageLoading = $('#message-edit-loading'),
            $messageError = $('#message-edit-error'),
            $id = $('#edit-id');

        updateComment($id.val(), $title.val(), $content.val())
            .done(function (data) {
                if (data.IsValid()) {
                    $messageError.html('');
                    $messageError.removeClass('hidden');
                    $messageLoading.removeClass('hidden');
                    $messageLoading.html('The text is saved');
                } else {
                    $messageError.removeClass('hidden');
                    $messageError.html(data.Message);
                }
            })
            .fail(function (xhr, message) {
                $messageError.removeClass('hidden');
                $messageError.html('Registration failed: ' + message);
            })
    };
</script>

Answer 1

You most likely have more than one on your page, either make their id attributes unique or target the index in your jQuery.