如何使用ajax / javascript在表單中附加文本？

Question

我有一個表格。 我們稱之為myform。

里面有復選框，例如以下兩個：

<input type='checkbox' name='power_convention[]' value='SOME VALUE #1' />
<input type='checkbox' name='power_evidence[]' value='SOME VALUE #2' />

表格末尾有一個文本區域。

<textarea id="elm1" name="comments" rows="15" cols="80" style="width: 80%">

如果選中了power_convention，我希望它立即將該復選框的值附加到具有以下結構的comments復選框中：

<h3>SOME VALUE #1</h3><br />

同樣，如果單擊power_evidence，我希望它執行相同的操作，但是顯然要先於它執行。

我將如何去做呢？

謝謝！

Answer 1

jQuery解決方案：

$('input[type="checkbox"]').change(function() {
    var val = "<h3>" + this.value + "</h3><br />";
    if(this.checked) {
        $('#elm1').val(function(i, v) {
            return v + val;
        });
    }
    else {
        $('#elm1').val(function(i, v) {
            return v.replace(new RegExp(val), '');
        });
    }
});

演示

僅當val不包含任何特殊的正則表達式字符時，此方法才有效。 在這種情況下， 您將不得不逃脫它們 。

更新：實際上，您這里不需要正則表達式， v.replace(val, '')就可以了（感謝@Pinkie）；

正則表達式的替代方法是重新創建文本區域的內容：

var $inputs = $('input[type="checkbox"]');
$inputs.change(function() {
    var val = "<h3>" + this.value + "</h3><br />";
    if(this.checked) {
        $('#elm1').val(function(i, v) {
            return v + val;
        });
    }
    else {
        $('#elm1').val('');
        $inputs.not(this).change();
    }
});

演示2

Answer 2

jQuery的

$('input[name="power_convention[]"]').click(function() {
    // assuming you only want the value if the checkbox is being ticked
    // not when it's being unticked
    if ($(this).is(":checked")) {
        $('#elm1').val("<h3>" + this.value + "</h3><br />");
    }
});

如果您希望它們都插入相同的textarea （並且它們是頁面上唯一以power_開頭的字段 ），則可以更改選擇器以使用jQuery的Attributes Starts選擇器：

`$('input[name^="power_"]`

jsfiddle上的演示 。

Answer 3

首先，您需要在復選框中添加onClick事件處理程序：

<input type='checkbox' onClick="someFunction(this)" name='power_convention[]' value='SOME VALUE #1' />

然后，在頂部的腳本標簽中，

someFunction(checkbox) {
    document.getElementById("elm1").value += "<h3>" + checkbox.value + "</h3>";
}

Answer 4

這是一個jsfiddle

$('input:checkbox[name*=power_]').click(function(){
   value = '<h3>' + $(this).val() + '</h3> <br />'; 
    prevVal = $('#elm1').val();


    $('#elm1').val(prevVal  + value );
});