在同一页上张贴html表单的结果。

Question

我在导航栏中有以下表单代码：

<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>

在网页的主体部分，我有6个部分。我想要实现的是，如果我选择一个单选按钮，在文本区域中写一些东西，然后点击submit，它应该出现在选定的部分中。因此，如果写你好世界和标记第5节，你的世界应该出现在第5节。

有什么简单的方法可以在HTML5中实现这一点吗？如果没有，有人能指出任何教程/链接或提供任何建议吗？

提前感谢！

Answer 1

尝试使用此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

要解决这个问题，最好在表单中使用simplejavascript代码，使用id of单选按钮执行此操作。