Posting results of html form on the same page - html

Question

I have the following form code in the nav bar:
<form id="form">
<p>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="100" rows="5">
Post here
</textarea>
<input id="button" type="submit" value="Submit!" name="submit" onclick = "get('textfield')"/>
</p>
<p>
<input type="radio" name="radio" id="radio-1" />
<label for="radio-1">Section 1</label>
<input type="radio" name="radio" id="radio-2" />
<label for="radio-2">Section 2</label>
<input type="radio" name="radio" id="radio-3" />
<label for="radio-3">Section 3</label>
<input type="radio" name="radio" id="radio-4" />
<label for="radio-4">Section 4</label>
<input type="radio" name="radio" id="radio-5" />
<label for="radio-5">Section 5</label>
<input type="radio" name="radio" id="radio-6" />
<label for="radio-6">Section 6</label>
</p>
</form>
And in the main body within the webpage,I have 6 sections. What I am trying to achieve is if I select one of the radio buttons, write something in the text area and click submit, it should appear within the selected section. So If write hello world and mark section 5, hello world should appear under section 5.
Is there any naive way of achieving this purely in HTML5? If there isn't, can anyone point to any tutorials/links or offer any suggestions?
Thanks in advance!

Answer 1

try to use this Example
<p>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="100" rows="5"></textarea>
<input id="button" type="submit" value="Submit!" name="submit"
</p>
<p>
<input type="radio" name="radio" id="radio-1" />
<label for="radio-1">Section 1</label>
<input type="radio" name="radio" id="radio-2" />
<label for="radio-2">Section 2</label>
<input type="radio" name="radio" id="radio-3" />
<label for="radio-3">Section 3</label>
<input type="radio" name="radio" id="radio-4" />
<label for="radio-4">Section 4</label>
<input type="radio" name="radio" id="radio-5" />
<label for="radio-5">Section 5</label>
<input type="radio" name="radio" id="radio-6" />
<label for="radio-6">Section 6</label>
</p>
<ul>
<li><section id="radio-1"></section></li>
<li><section id="radio-2"></section></li>
<li><section id="radio-3"></section></li>
<li><section id="radio-4"></section></li>
<li><section id="radio-5"></section></li>
<li><section id="radio-6"></section></li>
</ul
JS
$(function () {
$("#button").click(function(){
var txt = $("#textarea").val();
if(txt.length > 0)
{
var id = $("input[type='radio']:checked").attr("id");
$("li section").text("");
$("li #"+id).text(txt);
}
});
});

Answer 2

for solve this you better use simplejavascript code in your form that do this operation with id of radio buttons