Reputation:

reset all inputs from field when checkbox is checked with javascript

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?

Upvotes: 0

Answers (3)

user1730941

Reputation:

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;
}

Upvotes: 1

Justin George

Reputation: 344

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.

Upvotes: 1

Akshay Hazari

Reputation: 3267

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>

Upvotes: 0

reset all inputs from field when checkbox is checked with javascript

Answers (3)

Related Questions