Reading text in textarea line by line

Question

I am using textarea to take user input. and want to read line by line. But it's not displaying anything I want to make a comma seperated list of the text in different lines

JS:

$('input[type=button]').click( function() {
    string = document.getElementById("hi").val();
    alert(string); 
    var html="";
    var lines = $('#id').val().split('\n');
    for(var i = 0;i < lines.length;i++){
        //code here using lines[i] which will give you each line
        html+=lines[i];
        html+=",";
    }
    $("#inthis").html(string);
});

HTML:

<textarea id="hi" name="Text1" cols="40" rows="5" placeholder="enter one wdg in one line" ></textarea>

<input type="button" value="test" />
<div id="inthis"></div>

Here is the jsfiddle:

http://jsfiddle.net/pUeue/1077/

Answer 1

Here's updated js...

Demo Fiddle

$('input[type=button]').click(function () {
    var html = "";
    var lines = $('#hi').val().split('\n');
    for (var i = 0; i < lines.length; i++) {
        //code here using lines[i] which will give you each line
        html += lines[i];
        html += ",";
    }
    html = html.substring(0,html.length-1);
    $("#inthis").html(html);
});

Answer 2

Firstly you have a confused mix of native javascript and jQuery code in your example. A native DOM element has no val() method for example, that's jQuery. Secondly, you could massively simplify your code by just using split() and join(','). Try this:

$('input[type=button]').click( function() {
    var string = $("#hi").val().split('\n').join(',');
    $("#inthis").html(string);
});

Example fiddle