CODEWITHSUNDEEP
javascriptcheckboxtextarea
Jae Eun
Jae Eun

Reputation: 57

Display value of checkbox in textarea

I have here a code that will display the value of the checkbox when checked. My problem is I don't know how I will add up all the numbers, that when I checked a checkbox the number or value will display automatically to the text area and when I checked another checkbox it will add up to the first checkbox that I checked and when I checked another checkbox it should also add up from the first two checkbox. How will I do that?

                <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
            <html>
            <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
            <script type="text/javascript">
            function add_sub(el)
            {
                if (el.checked)
                {
                    var total = el;
                    total.form.elements['type'].value+=el.value;
                }
                else
                {
                    var re=new RegExp('(.*)'+el.value+'(.*)$');
                    el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
                }
            }
            </script>
            </head>

            <body>
                <form name="form1" method=post>
                    <textarea name="type" rows="5" cols="35" onclick="this.focus();this.select();"></textarea><br>
                    <input type="checkbox" name="mis1" id="id1" value="1" onclick="add_sub(this);"><label>1</label><br>
                    <input type="checkbox" name="mis2" id="id2" value="2" onclick="add_sub(this);"><label>2</label><br>
                    <input type="checkbox" name="mis6" id="id3" value="3" onclick="add_sub(this);"><label>3</label><br>
                    <input type="checkbox" name="mis6" id="id4" value="4" onclick="add_sub(this);"><label>4</label>
                </form>
            </body>

Upvotes: 0

Views: 4433

Answers (3)

teamnorge
teamnorge

Reputation: 794

The solutions proposed above are based on an assumption that the checkbox values are numbers, in case you are in need of string values. You may suggest this.

function add_sub(el)
{

  var cbs = document.getElementById('checkboxes').getElementsByTagName('input');
  var textareaValue = '';  
  for (var i = 0, len = cbs.length; i<len; i++) {
    if ( cbs[i].type === 'checkbox' && cbs[i].checked) {
          textareaValue += cbs[i].value + ' ';
    }
  }

   document.getElementById('textarea').value = textareaValue;            
}

and

<textarea id="textarea" name="type" rows="5" cols="35" onclick="this.focus();this.select();"></textarea><br>
<div id="checkboxes">
     <input type="checkbox" name="mis1" id="id1" value="1" onclick="add_sub(this);"><label>1</label><br>
     <input type="checkbox" name="mis2" id="id2" value="2" onclick="add_sub(this);"><label>2</label><br>
     <input type="checkbox" name="mis6" id="id3" value="3" onclick="add_sub(this);"><label>3</label><br>
     <input type="checkbox" name="mis6" id="id4" value="4" onclick="add_sub(this);"><label>4</label>
</div>

And the working plunker: http://plnkr.co/edit/HWHRsBn7s7vJ9KI4UauU

Upvotes: 1

Oriol
Oriol

Reputation: 288600

Some tips:

  • Don't listen to click events to detect changes in checboxes. They can change in other ways, e.g. with the keyboard. You can listen to change events instead.
  • Don't use event handler content attributes in the HTML source. Add event listeners using JS.
  • Don't add the same event listener to all events. Delegate it to a common ancestor instead.
  • br elements are ugly. Better use display: block.

var sum = 0,
    form = document.forms.form1,
    text = form1.elements.type;
text.addEventListener('focus', text.select.bind(text));
form.addEventListener('change', function(e) {
  if(e.target.type == 'checkbox') {
    sum += e.target.value * (e.target.checked ? 1 : -1);
    text.value = sum;
  }
});
label { display: block; }
<form name="form1" method="post">
  <textarea name="type" rows="5" cols="35">0</textarea>
  <label><input type="checkbox" name="mis1" id="id1" value="1">1</label>
  <label><input type="checkbox" name="mis2" id="id2" value="2">2</label>
  <label><input type="checkbox" name="mis6" id="id3" value="3">3</label>
  <label><input type="checkbox" name="mis6" id="id4" value="4">4</label>
</form>

Upvotes: 0

Saar
Saar

Reputation: 2306

Please check this fiddle if this is what you meant: http://jsfiddle.net/zyfmt4at/5/

this is the script:

var currNum = 0;
var txtArea = document.getElementById("txtArea");
var form = document.getElementById("mainForm");
function add_sub(el){
    debugger;
                if (el.checked)
                {
                    currNum += parseInt(el.value,10);
                }
                else
                {
                    currNum -= parseInt(el.value,10);
                }
                txtArea.value = currNum;
}

form.addEventListener("click", function(ev){
    if(ev.target.getAttribute("type") == "checkbox"){
        add_sub(ev.target);
    }
},false);

this is the HTML:

    <body>
        <form id="mainForm" name="form1" method=post>
            <textarea id="txtArea" name="type" rows="5" cols="35" onclick="this.focus();"></textarea><br>
            <input type="checkbox" name="mis1" id="id1" value="1"><label>1</label><br>
            <input type="checkbox" name="mis2" id="id2" value="2"><label>2</label><br>
            <input type="checkbox" name="mis6" id="id3" value="3"><label>3</label><br>
            <input type="checkbox" name="mis6" id="id4" value="4"><label>4</label>
        </form>
    </body>

Upvotes: 2

Related Questions