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个部分。我想要实现的是，如果我选择其中一个单选按钮，在文本区域中写入内容并单击“提交”，它应该出现在所选部分中。因此，如果编写hello world并标记第5节，则hello world应出现在第5节下。

是否有任何天真的方法可以在HTML5中实现这一目标？如果没有，是否有人可以指向任何教程/链接或提供任何建议？

提前致谢！

Answer 1

为了解决这个问题，你最好使用表单中的simplejavascript代码来执行此操作，并使用单选按钮

Answer 2

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

    }
});

}）;

在同一页面上发布html表单的结果

2 个答案: