reset all inputs from field when checkbox is checked with javascript

Question

Here is the whole code

<html>
<head>
<title> Add/Remove dynamic rows in html table </title>
</head>
<body>  
<label><input type="checkbox" id='checkboxId'>N/A</label>   
<br>
<div id="div-table-id">
    <table id='table-id' border="1">
        <tr>
            <th>Subject</th>
            <th>Section Code</th>
            <th>Room</th>
            <th>Days</th>
            <th>Start Time</th>
            <th>End Time</th>
            <th>Hours Per Week</th>
            <th>No of Students (A)</th>
            <th>Course Credit w/o multiplier(B)</th>
            <th>Student Credit Units (AxB)</th>
            <th>Teaching Load Credits with Multiplier</th>
            <th>Delete?</th>
        </tr>
        <tr>
            <td>
                <select name="subject" >
                    <option value="cmsc2">CMSC2</option>
                    <option value="cmsc11" selected="selected">CMSC11</option>
                    <option value="cmsc121">CMSC121</option>
                </select>
            </td>
            <td><input type="text" id="password" value="sample"/></td>
            <td><input type="text" id="password2" value="sample"/></td>
            <td>
                <input type="checkbox" name="days" value="m" checked>M
                <input type="checkbox" name="days" value="t">T
                <input type="checkbox" name="days" value="m">W
                <input type="checkbox" name="days" value="th">Th
                <input type="checkbox" name="days" value="f">F
                <input type="checkbox" name="days" value="s">S
            </td>
            <td><input type="time" name="start_time"></td>
            <td><input type="time" name="end_time"></td>
            <td><input type="number" name="hpw"></td>   
            <td><input type="number" name="nos"></td>
            <td><input type="number" name="ccm"></td>
            <td><input type="number" name="scu"></td>
            <td><input type="number" name="tlcm"></td>
            <td><input type="checkbox" name="chk"></td>
        </tr>
    </table>
    <input type="button" value="Add Row" onclick="addRow('table-id')" />
    <input type="button" value="Delete Row" onclick="deleteRow('table-id')"/>       
    <input type="button" value="Save"/>

</div>

<script type="text/javascript">
    function addRow(tableID) {

        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;

        for( var i=0; i < colCount; i++ ){

            var newcell=row.insertCell(i);
            newcell.innerHTML=table.rows[1].cells[i].innerHTML;

            resetChildren( newcell );
        }
    }

    function resetChildren( parentEl ){
        var len = parentEl.childNodes.length,
            i = 0,
            el;

        for(i = 0; i < len; i++){

            el = parentEl.childNodes[i];

            console.log( i, el.type, el );

            switch( el.type ){
                case "text":
                    el.value = "";
                    break;
                case "checkbox":
                    el.removeAttribute('checked');
                    break;
                case "select-one":
                    el.selectedIndex = 0;
                    break;
                case "number":
                    el.value = '';
                    break;
            }
        }
    }
    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var colCount = table.rows[0].cells.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[colCount-1].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 2) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            } 
        }
        }catch(e) {
            alert(e);
        }
    }
    document.getElementById('checkboxId').onchange = function () {
        var elems = document.getElementById('div-table-id').querySelectorAll('input,select,textarea');
        if (document.getElementById('checkboxId').checked) {
            for (var i = 0; i < elems.length; i++) {
                elems[i].disabled = true;
            }
        } else {
            for (var i = 0; i < elems.length; i++) {
                elems[i].disabled = false;

            }    
        }
    }
    document.getElementById('password2').disabled = true;
    document.getElementById('password').onblur = function(){
        if(document.getElementById('password').value != '')
            document.getElementById('password2').disabled = false;
        else{
            document.getElementById('password2').value = '';
            document.getElementById('password2').disabled = true;
        }
        document.getElementById("password2").select();
    }
    document.getElementById('password2').onblur = function (){
        if(document.getElementById('password').value == '')
            return;
        check();
    }

    function check() {
        if (document.getElementById('password2').value != document.getElementById('password').value) {
            alert('The two passwords must match.');
            document.getElementById("password").select();
            document.getElementById('password2').value = '';
        }
        else 
            alert('The two passwords matched.');
    }
</script>
</body>
</html>

Now, I have the function that when I check the box, it disables all input fields.

Additionally, I want the input fields' values to reset after disabling it.

Including the newly added. And when I uncheck, it just enables all the field back again with empty fields.

How can I do that?

Justin George · Accepted Answer · 2014-05-15 07:38:26Z

1

This can be implemented with jquery.

I have set up a jsfiddle. Find the jsfiddle.

$('.Disable').change( function() {
var isChecked = this.checked;

if(isChecked) {
    $(this).parents("tr:eq(0)").find(".textbox").prop("disabled",true);
   $('.textbox').val('');
} else {
    $(this).parents("tr:eq(0)").find(".textbox").prop("disabled",false);
}

});

It achieves your requirements. All you have to do is implement this in your code.

edited May 15, 2014 at 7:38

answered May 15, 2014 at 4:24

Justin George

3445 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

asprin Over a year ago

The OP hasn't included the jQuery tag. You should highlight that dependency in your answer

user1730941 Over a year ago

I really forgot to mention., I only use javascript.. i dont use jquery

user1730941 Over a year ago

and also, this didn't work when i tried it, there is no error but nothing happened

Justin George Over a year ago

@vaizaren. You want two textbox(named sample1 AND sample 2)disabled on any of the checkbox click. Right ? and the value should clear off .?

Justin George Over a year ago

@vaizaren atleast you could add some id to the textboxes. Because you want the time to be set as --:--:--. How can you set that without even having an id ?

|

user1730941 · Accepted Answer · 2014-05-16 06:00:47Z

1

before disabling, just insert this snippet..

switch( elems[i].type ){
    case "text":
        elems[i].value = "";
        break;
    case "checkbox":
        elems[i].removeAttribute('checked');
        break;
    case "select-one":
        elems[i].selectedIndex = 0;
        break;
    case "number":
        elems[i].value = '';
        break;
}

answered May 16, 2014 at 6:00

user1730941

Comments

Akshay Hazari · Accepted Answer · 2014-05-15 04:25:02Z

0

What you need to do is first put all the stuff in a form

 <form name="myForm"> 

   <script>
    function uncheck(var x)
    {
        document.getElementById("myForm").reset();
        if((document.getElementById(x).checked == true)
        document.getElementById(x).checked = false;

}

 </script>

answered May 15, 2014 at 4:25

Akshay Hazari

3,2874 gold badges56 silver badges98 bronze badges

2 Comments

user1730941 Over a year ago

i wish not to change my html. just add a js function

user1730941 Over a year ago

and i tried it, but it just resets to the original copied row, not to reseting the fields to blank

Collectives™ on Stack Overflow

reset all inputs from field when checkbox is checked with javascript

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related