how to enable textfield to edit using javascript and html?

43
October 09, 2019, at 4:50 PM

I am getting value on my textfield from the database and it works perfectly fine.

  1. I want to create a checkbox, when checkbox click the values comming from database will be clear in textfield and textfiled allow user to enter the new values.
  2. If checkbox not clicked then the values comming from the database will be readonly/untouched/disable. Textfield don't allow the user to edit.

I am using this code:

<div>
Enter New Details: <input type="checkbox" id="myCheck"  onclick="myFunction()">
<p id="textdis" style="display:none">Checkbox is CHECKED!</p>
<hr><br>
<label for="full_name">Full Name:</label>
<input class="form-control" type="text" name="full_name"  id="full_name" value="<?=$fullname;?>" readonly>
</div>


<!-- // Check Box Functionality For Enter New Address -->
<script>
function myFunction() {
var checkBox = document.getElementById("myCheck");
var text = document.getElementById("textdis");
if (checkBox.checked == true){
 text.style.display = "block";
<!-- Here I want If the checkbox is clicked allow the user to enter value in the textfield-->
<input class="form-control" type="text" name="full_name"  id="full_name" disabled="enabled">

} else {
  text.style.display = "none";

<!-- Here I want If the checkbox unclicked take value from the database and don't allow user to edit the textfield-->
<input class="form-control" type="text" name="full_name"  id="full_name" value="<?=$fullname;?>" readonly>

}
}
</script>

when checkbox is clicked the textfield not allow to edit.

Answer 1

Change "onclick" to "onchange"

onchange="myFunction()"

Toggle disabled attribute of your input according to the checkbox value

function myFunction() {
   var checkBox = document.getElementById("myCheck");
   var text = document.getElementById("textdis");
   var field= document.getElementById("full_name");
   if (checkBox.checked == true){
      text.style.display = "block";
      field.disabled=false;
   } else {
      text.style.display = "none";
      field.disabled=true;
   }
}

I suggest you to add some server side validation as well in whichever language you are using.

Answer 2

I would suggest that you put a disabled state on your text box when the checkbox is not checked and toggle this disabled state onChange of the checkbox.

HTML

<input type="checkbox" id="myCheck"  onChange="myFunction()">

JS

var nameText = document.getElementById('full_name');
var checkBox = document.getElementById('myCheck');
function myFunction() {
    if (checkBox.checked) {
         nameText.disabled = false;
     } else {
        nameText.disabled = true;
     }
    }
READ ALSO
I have create some prepopulated text in a text fiel that is read only however I want to be able to add text after it

I have create some prepopulated text in a text fiel that is read only however I want to be able to add text after it

I have create some prepopulated text in a text field that is read only however I want to be able to add text after it in jqueryAttached works perfectly fine for readonly

35
How to login a specific user to selected activity

How to login a specific user to selected activity

This app can register 2 main users student and teacher after registering the users they can login if the user is a teacher there will be a toast msg saying teacher if it's a student there will be a toast saying student in the register page student and teacher...

51
How can I load an image from URL without extension

How can I load an image from URL without extension

I'd like to load an image from a URL but it doesn't work because the link doesn't have an extension Can this be solved??? URL example : http://d1s5a4e3za7rnicloudfront

33
How to get value from TypedArray without passing default value

How to get value from TypedArray without passing default value

I'm using the below code to retrieve values from TypedArray in a custom view, but there is something I don't getIf I'm passing default style as 4th parameter then why I have to use getXXXX(R

33