www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript - checkbox update textbox

  1. #1
    Join Date
    Jul 2013
    Posts
    2

    Javascript - checkbox update textbox

    Hello

    I am an amateur in javascript but wanted to make a project that you click a checkbox automatically update a textbox.
    I have found an example very similar to what i want and is the following:

    <style type="text/css">
    <!--
    label {display:block; margin:1em 0em}
    input {margin:0ex 1ex}
    -->
    </style>






    <form action="">
    <div>
    <label><input type="checkbox" name="vehicle" value="Bike" onClick="updateArea(this)">sos1</label>
    <label><input type="checkbox" name="vehicle" value="car" onClick="updateArea(this)">sos2</label>
    <label><input type="checkbox" name="vehicle" value="train" onClick="updateArea(this)">sos3</label>
    <label><input type="checkbox" name="vehicle" value="Boat" onClick="updateArea(this)">sos4</label>
    <label><input type="checkbox" name="vehicle" value="plain" onClick="updateArea(this)">sos5</label>


    </div>
    </form>


    <script type="text/javascript">
    <!--
    document.write(' cols="100" id="area" rows="10"></textarea>')


    function updateArea (e) {
    document.getElementById('area').value = "sos";
    for (var i=0; i<e.form.elements.length; i++)


    {if (e.form.elements[i].type == 'checkbox' && e.form.elements[i].checked)


    {document.getElementById('area').value += e.form.elements[i].nextSibling.data; document.getElementById('area').value += '\n';}};
    }
    // -->
    </script>


    My problem is that it updates the textbox with the value of the checkbox label and I wanted to updating it with the checkbox value.
    I have noticed that it is the function "e.form.elements [i]. NextSibling.data" will fetch the value to write in the textbox, just can not put it to fetch the other value ....

    Some precious help?

    thank you

  2. #2
    Join Date
    Jun 2008
    Posts
    106
    Try this.


    Code:
    <form action="" id="the_form">
    <div style="margin: 12px;">
    <label><input type="checkbox" name="vehicle" value="Bike" />sos1</label>
    <label><input type="checkbox" name="vehicle" value="car" />sos2</label>
    <label><input type="checkbox" name="vehicle" value="train" />sos3</label>
    <label><input type="checkbox" name="vehicle" value="Boat" />sos4</label>
    <label><input type="checkbox" name="vehicle" value="plain" />sos5</label>
    <textarea name="area" id="area" style="display: block; width: 400px; height: 200px;"></textarea>
    </div>
    </form>

    Code:
    <script>
    
    window.addEventListener('DOMContentLoaded', function (event) {
        var boxes = document.querySelectorAll('#the_form input[type="checkbox"]'),
            area = document.getElementById('area'), i;
    
        for (i = 0; i < boxes.length; i += 1) {
            boxes[i].addEventListener('change', function (event) {
                var e = event.target;
                if (e.checked) {
                    area.value += e.value + '\n';
                } else {
                    area.value = area.value.replace(e.value + '\n', '');
                }
            }, false);
        }
    }, false);
    
    </script>

  3. #3
    Join Date
    Jul 2013
    Posts
    2
    Works fine...

    thanks a lot...its what i looking for...

    thanks

  4. #4
    Join Date
    Jun 2008
    Posts
    106
    You're welcome

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles