建立"价值"基于输入和复选框的文本区域

时间:2014-06-25 20:19:13

标签: javascript jquery

正如问题所说,如何构建textarea的上下文,说我不想要或者我不能修改控制器或框架的模型,但我可以更改或添加字段到“views / templates”,所以说这是我的模板:

<form>
    <input name="name" id="name">
    <input name="lastname" id="lastname">
    <textarea name="onservations" id="observations"></textarea>
</form>

说这就是表单的所有内容,但是我需要添加一些其他输入,但额外的输入没有在控制器或模型上定义,它们也需要保存,我只知道一点HTML所以请在这一个上忍受我...

因为我无法添加或修改控制器或模型,我只能假设我可以将额外的字段添加到模板中,然后将它们传递给基本html中的textarea,因为framewok不会剥离基本的html标记,我可以使用pemabstrongitableimg ...所以我的新表格将是这样的:

<form>
    <input name="name" id="name">
    <input name="lastname" id="lastname">
    <div id="original_text" style="display: none;">
        <textarea name="observations" id="observations"></textarea>
    </div>

    <!-- Extra Field -->
    <input type="text" name="what">
    <input type="radio" value="Yes" id="yes_r" name="n_rs">Yes
    <input type="radio" value="No" id="no_r" name="n_rs" >No
    <textarea name="observations_2" id="observations_2"></textarea>
</form>

所以有我的额外字段,现在,我怎样才能将额外字段的值传递给textarea,其ID为“观察”,表示用户检查是,并在“什么”中键入内容,然后打开“观察_2”键入别的东西......
所以原始textarea的价值是这样的:

<p>What happen?: [value from input text name what]</p>
<p>Would you like a candy? [value from the radio buttons named n_rs]</p>
<p>Your observations are: [value from textarea named observations]</p>

并且那3个

被保存在“观察”列下的数据库中,现在,请记住,控制器或模型或帮助程序无法修改我无法将其他列添加到数据库所以我必须使用我所拥有的,我唯一的解决方案是做一个可以将这些值传递给textarea的jquery ...
那么jquery看起来怎么样?
感谢您抽出宝贵时间。

1 个答案:

答案 0 :(得分:0)

这应该连接您的值,然后将格式化的字符串放入textarea。 如果任何元素发生变化,它将“刷新”您的textarea

$('#observations_2, input[name=what], input:radio[name=n_rs]').on("keyup change", function(){
    var allTogether = 
        "What happen?: " + 
        $('input[name=what]').val() +
        "\n" +
        "Would you like a candy? " +
        $('input:radio[name=n_rs]:checked').val() +
        "\n" +
        "Your observations are: " +
        $('#observations_2').val()
    ;
    $('#observations').val(""); // First clear it
    $('#observations').val(allTogether); // Then rebuild it
});

小提琴:http://jsfiddle.net/QWau9/