Как добавить текст в форму, используя 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), '');
        });
    }
});

DEMO

Это работает, только если 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();
    }
});

DEMO 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 начинается с селектор:

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

Демонстрация на jsfiddle .

Answer 3

Вот вам jsfiddle

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


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

Answer 4

Во-первых, вам нужно добавить обработчик события onClick к вашему флажку:

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

Затем, в разделе head, в теге script, поместите

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