javascript - 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>

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>

Share Improve this question edited Sep 2, 2016 at 11:38 Your Common Sense 158k42 gold badges225 silver badges368 bronze badges asked Sep 2, 2016 at 10:41 mhmd 2542 gold badges3 silver badges14 bronze badges

you need to elaborate but it didn't work. What did you try to do and what did not work ? Update your question so people here can focus on particular problem. – Jigar Commented Sep 2, 2016 at 11:50

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

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./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./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>

I'm not sure that will answer your question but if you want your inputs to be enabled/disabled on click, you might want to use this :

<input type='button' name='edit' value='edit' onclick='myFunction()'>


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

As a submit input will reload your page, there is no need to disable your input again, this is also why you can't use a submit input for your edit button.

Please see the example here. Use .disabled property in both functions:

function mysaveFunction() {   
    document.getElementById('category').disabled = true;
    document.getElementById('stage').disabled = true;
    document.getElementById('approve').disabled = true;
    }
function myFunction() {   
document.getElementById('category').disabled = false;
    document.getElementById('stage').disabled = false;
    document.getElementById('approve').disabled = false;
}

<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='button' name='edit' value='edit' onclick='myFunction()'>
<input type='submit' name='save' value='save' onclick='mysaveFunction()'>
</form>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Disable and enable textbox for edit and save information - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)