mhmd mhmd - 3 months ago 16
Javascript Question

Disable and enable textbox for edit and save information

I have this form i try when i click the button edit the input field will be enable and i can edit the information on it

And when i click the save button the input field will be saved on mysql database and the text field will be disabled

i try with this code below but it didn't work

any suggestion please?

<form name='' id='' action='' method='post'>
<input type='text' name='txt_category' id='category' value='$category' disabled>
<input type='text' name='txt_stage' id='stage' value='$stage' disabled>
<input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
<input type='submit' name='edit' value='edit' onclick='myFunction()'>
<input type='submit' name='save' value='save' onclick='mysaveFunction()'>
</form>


/***********************************/

<script>
function myFunction() {
document.getElementById('category').readOnly = true;
document.getElementById('stage').readOnly = true;
document.getElementById('approve').readOnly = true;
}
</script>


/**********************************/

<script>
function mysaveFunction() {
document.getElementById('category').disabled = true;
document.getElementById('stage').disabled = true;
document.getElementById('approve').disabled = true;
}
</script>

Answer

Try This :

$(document).ready(function(){

     $("form input[type=text],form input[type=checkbox]").prop("disabled",true);

     $("input[name=edit]").on("click",function(){

             $("input[type=text],input[type=checkbox]").removeAttr("disabled");
     })

     $("input[name=save]").on("click",function(){

         $("input[type=text],input[type=checkbox]").prop("disabled",true);
     })


 })

Final code :

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <form name='' id='' action='' method='post'>
        <input type='text' name='txt_category' id='category' value='$category' disabled>
        <input type='text' name='txt_stage' id='stage' value='$stage' disabled>
        <select disabled>
            <option>I am Option 1</option>
             <option>I am Option 2</option>
        </select>
        <input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
        <input type="button" name='edit' value='edit'>
        <input type="button" name='save' value='save'>
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        
     $(document).ready(function(){

         $("form input[type=text],form input[type=checkbox]").prop("disabled",true);

         $("input[name=edit]").on("click",function(){

                 $("input[type=text],input[type=checkbox],select").removeAttr("disabled");
         })

         $("input[name=save]").on("click",function(){

             $("input[type=text],input[type=checkbox],select").prop("disabled",true);
         })


     })
    </script>
</body>
</html>

If you want use it in table ,

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <form name='' id='' action='' method='post'>
        
        <table>
            <tr>
                <td>
                    <input type='text' name='txt_category' id='category' value='$category' disabled>
                    <input type='text' name='txt_stage' id='stage' value='$stage' disabled>
                    <select disabled>
                        <option>I am Option 1</option>
                         <option>I am Option 2</option>
                    </select>
                    <input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
                    <input type="button" name='edit' value='edit'>
                    <input type="button" name='save' value='save'>
                </td>
            
            </tr>
            
            <tr>
                <td>
                    <input type='text' name='txt_category' id='category' value='$category' disabled>
                    <input type='text' name='txt_stage' id='stage' value='$stage' disabled>
                    <select disabled>
                        <option>I am Option 1</option>
                         <option>I am Option 2</option>
                    </select>
                    <input type='checkbox' name='txt_approve' id='approve' value='$approve' disabled>
                    <input type="button" name='edit' value='edit'>
                    <input type="button" name='save' value='save'>
                </td>
            
            </tr>
        
        </table>
    
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        
     $(document).ready(function(){

         $("form input[type=text],form input[type=checkbox]").prop("disabled",true);

         $("input[name=edit]").on("click",function(){

             $(this).closest("td").find("input[type=text],input[type=checkbox],select").removeAttr("disabled");
         })

         $("input[name=save]").on("click",function(){

            $(this).closest("td").find("input[type=text],input[type=checkbox],select").prop("disabled",true);
         })


     })
    </script>
</body>
</html>

Comments