Adding a new line to SerializeArray output

StackOverflow https://stackoverflow.com/questions/10107192

Question

I'm trying to create a form which returns a sum of the items selected (done) and a list of the items selected. My item values are formatted as follows:
input name="Door" type="radio" value="260~~Stable Door"
I'm using serializeArray to split the value of the items for the selected list output. It works, but I'd like to put a line break in after each item, so instead of:

You have chosen wood, stable door, pine floor

I'd get:

You have chosen wood stable door pine floor

I've tried adding +"\n" and even +"\r\n" when appending the values to the array, but the output remains on a single line.

I've based the code on W3C schools code below, including where I've been trying to put the \n. Either it's not possible because it's an array, or I'm missing something obvious. Sorry for asking such a basic question :/

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("form").serializeArray();
    $.each(x, function(i, field){
      $("#results").append(field.name + ":" + field.value + " \n");
    });
  });
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Mickey" /><br />
Last name: <input type="text" name="LastName" value="Mouse" /><br />
</form>

<button>Serialize form values</button>
<div id="results"></div>
</body>
</html>
Was it helpful?

Solution

Can't you just use the BR tag?

$(document).ready(function(){
  $("button").click(function(){
    x=$("form").serializeArray();
    $.each(x, function(i, field){
      $("#results").append(field.name + ":" + field.value + " <br />");
    });
  });
});​

JSFiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top