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']
}

• Madnx: In fact, I'm just updating a code which I didn't write so I know that it was not the good approach and that's why I want to change. Thank you for your answer, I didn't even think about XSS. I think I'll do it with JSON then ;).