CODEWITHSUNDEEP
javascripthtmlhtml-table
HookUp
HookUp

Reputation: 413

Change selectbox to textfield and vice versa

I have a table in which there are three columns (A: datefield, B: selectbox, C: checkbox).

Now when someone checks on the checkbox, the column(B) having selectbox should convert to a column textfield. That means I want to convert selectbox to textfield and vice versa on change of the checkbox event. Is that possible?? If so how? (using js, no jquery please)

Reply is greatly appreciated.

Upvotes: 0

Views: 95

Answers (2)

Manjunath D R
Manjunath D R

Reputation: 371

Try as below,

<html>
<body>
    <script type="text/javascript">
function toggleSelect() {
    var isChecked = document.getElementById("check").checked;
        if(isChecked) {
    document.getElementById("toggle").innerHTML = "<input type='text' id='txt'></input>";
    } else {
    document.getElementById("toggle").innerHTML = "<select> <option value='1'>1</option> </select> ";
    }
    //alert(isChecked);
}
</script>
    <table> 
        <tr> 
            <td> DateField </td>
            <td id="toggle"> 
                <select> <option value="1">1</option> </select> 
            </td>
            <td> <input type="checkbox" id="check" onchange="javascript:toggleSelect();">change</input></td>
        </tr>
    </table>
</body>
</html>

Upvotes: 1

practice2perfect
practice2perfect

Reputation: 507

Place two div tags where

one contains the component which you want to change (for this div give a class name "comp1 visible" and in the CSS set the style has display: block )

and another one div with the component you would want to replace ( for this div give a class name "comp2 hidden" and in the CSS set the style has display:none )

use the onclick event to call the function ...

function insertitem(rvalue){
            if(rvalue.value==1){
                var temp=document.getElementsByClassName("comp1");


            temp[0].classList.remove("hidden");
            temp[0].classList.add("visible");
            }
            else if(rvalue.value==2){
                var temp=document.getElementsByClassName("comp2");

            temp[0].classList.remove("hidden");
            temp[0].classList.add("visible");

            }
        }

this should work.. PS: since you dint post any of ur code .. i couldnt explain much

Upvotes: 0

Related Questions