How to show input (name + value) in textarea?

Question

I'm working on this project where I need to have the value of a textarea change when one of the input values in the same form changes.

HTML:

<form id="form" action="" method="">
<textarea readonly class="overview"></textarea>
<input type="text" class="add" name="product1" />
<input type="text" class="add" name="product2" />
<input type="text" class="add" name="product3" />
<input type="text" class="add" name="product4" />
</form>

The customer is allowed to change the input.class. The textarea-value should change whenever one of the inputs changes.

The textarea should show something like:
3 x product1
1 x product3
4 x product4

Anybody got an idea?

Thanks in advance,

Joel

add a blur event for "add" class and when this event is triggered u can update the text area dynamically . before adding the content make sure input tag`s value is non empty :) — dreamweiver, Apr 04 '13 at 13:41
$('.add').blur(function(){ if($(this).text().length) {$('.overview').val(content) } }); content is your dynamically generated data eg : 3Xproduct1 ..... — dreamweiver, Apr 04 '13 at 13:43
@dreamweiver i think the right event would be `blur` or `keyup` — Rodrigo Siqueira, Apr 04 '13 at 13:44
Rodrigo : ya on blur was the right event , thanks for the correction :) Happy coding — dreamweiver, Apr 04 '13 at 13:47

score 1 · Answer 1 · answered Apr 04 '13 at 13:42

1

<textarea readonly class="overview" id="mytxtarea"></textarea>
   $("#product1").blur(function(){
   if($("#product1").val()!='')
     {
      $("#mytxtarea").val('test value');
     }
});

answered Apr 04 '13 at 13:42

웃웃웃웃웃

11,829
15
59
91

manuAcl · Answer 2 · 2013-04-04T13:58:22.563

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Test</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#form .add').on('keyup', function(){
                console.log('test');
                var string1 = $('#form .product1').val() + ' x product1\n';
                var string2 = $('#form .product2').val() + ' x product2\n';
                var string3 = $('#form .product3').val() + ' x product3\n';
                var string4 = $('#form .product4').val() + ' x product4';

                $('#form textarea').val(string1 + string2 + string3 + string4);
            });
        });
    </script>
</head>
<body>
    <form id="form" action="" method="">
        <textarea readonly class="overview"></textarea>
        <input type="text" class="add product1" name="product1" />
        <input type="text" class="add product2" name="product2" />
        <input type="text" class="add product3" name="product3" />
        <input type="text" class="add product4" name="product4" />
    </form>
</body>
</html>

score 0 · Answer 3 · 2013-04-09T12:29:59.000

0

$('input').keyup(function () {
    var inputedValue = $(this).val();
    var name = $(this).attr('name');
    $(".overview").text(inputedValue+name);
});

edited Apr 09 '13 at 12:29

answered Apr 04 '13 at 13:47

score 0 · Answer 4 · answered Apr 04 '13 at 13:54

0

This will do what you want...

$("input.add").keyup(function() {
    var msg = "";
    $("input.add").each( function() {
        if( $(this).val() ) {
            msg += $(this).val() + "x " + $(this).attr("name") + "\n";
        }
    });
    $("textarea.overview").text(msg)
});

I used this with your HTML here: http://jsfiddle.net/XYXpp/

answered Apr 04 '13 at 13:54

Smern

18,746
21
72
90

i looked through the other answers and this is currently the only one that will both work and dynamically generate all the data – Smern Apr 04 '13 at 14:06

Nirmal · Accepted Answer · 2013-04-04T14:08:15.263

0

  $(".add").keyup(function () {
 var app=""
 $(".add").each(function () {
       if( $(this).val() ) {
     var value=$(this).val();
     var name=$(this).attr('name');
     app +=value+"*"+name+ "\n" ;     
       }
 });
  $(".overview").text(app);

});

Watch this.

Hope this will give you some solution.

edited Apr 04 '13 at 14:08

answered Apr 04 '13 at 13:56

Nirmal

2,340
21
43

score 0 · Answer 6 · answered Mar 08 '22 at 11:18

var fd = new FormData()
fd.append('csrfmiddlewaretoken', document.getElementsByName('csrfmiddlewaretoken')[0].value)
fd.append('field_name', $("input[name='field_name']").serialize())

will return

['field_name=9&field_name=15&field_name=10']

you will then have to parse the info in your view

How to show input (name + value) in textarea?

6 Answers6