Listing with JSON or plain HTML

Question

I have a website which has reviews about games. Right now, to list the advantages (+) and disadvantages (-) of that game, there's a textarea in the admin panel with a WYSIWYG editor with only element. So my users list their (+) with list elements :

<ul>
    <li>Game is too slow</li>
    <li>Game is very hard</li>
</ul>

I want to update it and I was wondering if it wouldn't be a better way to have input fields to add their (+) and (-) about the game and each time they want to add one, they click on a button which adds an input field. Then, when the form is submitted, I could encode the datas with JSON like :

[
    ['Game is too slow'],
    ['Game is very hard']
]

Would be like:

<input name="advantages[]" /> <a href="#" data-add>+</a>
<script>
$('[data-add]').click(function(){
    $(this).before('<br /><input name="advantages[]" />')
});
</script>

and then:

// encode    
$list = json_encode($_POST['advantages']);
//decode
echo '<ul>';
foreach($list as $item) {
    echo '<li>'.$item.'</li>';
}
echo '</ul>';

And when I want to show the datas, I could decode them and display them as a list, which would be like the first option. My point would be to get rid of the WYSIWYG and maybe have a more flexible system.

What do you think?

Answer 1

First of all, there's a problem with the HTML approach you have:

• That's risky (XSS most of the time)
• Do you expect them to be web developers? I can be a gamer/reviewer with zero HTML knowledge.
• We're writing a review, we should only write reviews, not HTML. Leave HTML to the developers.

---

Now, as you said, you can do JSON, and your other approach seems to be right:

Form

<form>
  <h3>Advantages</h3>
  <button>Add</button> // get nextAll advantages, find the last and append after
  <input type="text" name="advantages[]" />
  <input type="text" name="advantages[]" />
  <input type="text" name="advantages[]" />

  <h3>Disadvantages</h3>
  <button>Add</button> // get nextAll disadvantages, find the last and append after
  <input type="text" name="disadvantages[]" />
  <input type="text" name="disadvantages[]" />
  <input type="text" name="disadvantages[]" />
</form>

Data structure to server

{
  advantages : ['foo','bar','baz'],
  disadvantages : ['foo','bar','baz']
}