CODEWITHSUNDEEP
jquery
luke-sully
luke-sully

Reputation: 323

jQuery - Adding a line break when value is added to textarea

At present, when you click on the dropdown, select an option and click on any of the checkboxes, it adds a value to the textbox. However when I add a second value, it's entered directly next to the first value. How would i go about adding a line break?

Fiddle

jQuery

 $(document).ready(function () {
        $('.group').hide();
        $('#selectMe').change(function () {
            $('.group').hide();
            $('#' + $(this).val()).show();
        })
    });

    var courses = {
        course1: 'BIS 445 UCC lvl8 ',
        course2: 'Commerce 475 UCC lvl8 ',
        course3: 'Economics 350 UCD lvl8 ',
        course4: 'Government 405 UL lvl8 ',
        course5: 'Medicine 600 UCC lvl8',
        course6: 'Nursing 500 UCC lvl8'
    }

    var $mytextbox = $('#courses');

    $("input[type='checkbox'][name*='course']").change(function () {
        var $chk = $(this);
        if ($chk.prop('checked')) {
            $mytextbox.val($mytextbox.val() + courses[$chk.attr('name')]);
        } else {
            $mytextbox.val($mytextbox.val().replace(courses[$chk.attr('name')], ""));
        }
    });

Upvotes: 2

Views: 9837

Answers (2)

War10ck
War10ck

Reputation: 12508

In <textarea> inputs, a line break is created by inserting a \n at the end of the line, thus creating a new line.

Modify your code to look like the following:

$("input[type='checkbox'][name*='course']").change(function () {
    var $chk = $(this);
    if ($chk.prop('checked')) {
        $mytextbox.val($mytextbox.val() + courses[$chk.attr('name')] + "\n");
    } else {
        $mytextbox.val($mytextbox.val().replace(courses[$chk.attr('name')] + "\n", ""));
    }
});

I've updated your JSFiddle here to demo how this works. It's important to remember to update both the insert and removal of the \n character as the courses are checked and unchecked. Without inserting and removing the \n character in both places, you may experience undesired results such as multiple lines between courses.

Upvotes: 6

Stephen King
Stephen King

Reputation: 836

You can just add a line feed. See:

Add a linebreak in an HTML text area

"\n" or &vbCrLf

So something like

$mytextbox.val($mytextbox.val() + "\n" +  courses[$chk.attr('name')]);

Upvotes: 1

Related Questions