jQuery: How can I add line break to form input?

36,084

Solution 1

I posted my previous answer before I saw your comment that the output is plain text. Now try this:

$(document).ready(function() {  
    $("#formID").submit(function () {
        $(":text").each(function () {
            var value = $(this).val();
            var myname  = $(this).attr('name');
            var newValue = value + " \n";
            var hid   = '<input type="hidden" name="' + myname + '" value="' + newValue + '"/>';
            $(this).removeAttr('name');
            $("#formID").append(hid);
        });
    });
});

Previous Answer

As Mark says, the line break character is not rendered as a line break when viewed in the browser (or email client for that matter), so instead of adding a line break character "\n", you should add a <br/>

$("#formID").submit(function () {
    $(":text").each(function () {
        var value = $(this).val();
        var newValue = value + '<br/>';
        $(this).val(newValue);
    });
})

Solution 2

Textbox doesn't holds "\n" only textarea does. What you can do is post the data yourself to the controller or store the values in hidden fields and submit the form and read the hidden fields in the server, if you don't have much control there match the names to the hidden fields.

Share:
36,084
theJBRU
Author by

theJBRU

Updated on July 27, 2022

Comments

  • theJBRU
    theJBRU almost 2 years

    I'm collecting information in a standard HTML form. I have, for example, <input type="text" name="UserName" id="name"/>. When the form is submitted, I want to add a line break to the value entered. So if the user entered "foo," the form would submit the value "foo\n."

    Here's the jQuery function I'm using:

    $("#formID").submit(function () {
        $(":text").each(function () {
            var value = $(this).val();
            var newValue = value + " \n";
            $(this).val(newValue);
        });
    });
    

    When the form is submitted, however, the value assigned to the form field does not have the line break.

    My goal is for the line break to survive the output of the back-end form processing, which generates an email. Since I don't have control over the script that generates the mail, I'm trying to impose some formatting with what I can control.

    Any assistance is appreciated.