I know you can add readonly="readonly" to an input field so its not editable. But I need to use javascript to target the id of the input and make it readonly as I do not have access to the form code (it's generated via marketing software)
I don't want to disable the input as the data should be collected on submit.
Here is the page I have added in the below suggestion with no luck so far:
Make sure you use <body onload="onLoadBody();"> for anyone using this in the future.
You can get the input element and then set its readOnly property to true as follows:
document.getElementById('InputFieldID').readOnly = true;
Specifically, this is what you want:
<script type="text/javascript">
function onLoadBody() {
document.getElementById('control_EMAIL').readOnly = true;
}
</script>
Call this onLoadBody() function on body tag like:
<body onload="onLoadBody">
View Demo: jsfiddle.
readonly (all lower case) and in Javascript it is readOnly (with capital O). Thanks for the answer. –
Direction The above answers did not work for me. The below does:
document.getElementById('input_field_id').setAttribute('readonly', true);
And to remove the readonly attribute:
document.getElementById('input_field_id').removeAttribute('readonly');
And for running when the page is loaded, it is worth referring to here.
setAttribute('readonly', false) does not work -- it will still be true! You have to remove it. –
Alleviation document.getElementById('TextBoxID').readOnly = true; //to enable readonly
document.getElementById('TextBoxID').readOnly = false; //to disable readonly
Try This :
document.getElementById(<element_ID>).readOnly=true;
This is another working example with jQuery:
$(document).ready(function() {
$('.yourClassName').prop('readonly', true);
});
<!DOCTYPE html>
<html>
<body>
<input id="balloons" type="number" step="10" min="1" max="1000" size="25" value="60" >
<input id="bloquear" type="checkbox" onclick="validate()" />
<p id="demo1"></p>
<p id="demo2"></p>
<script type=text/javascript>
function validate(){
document.getElementById("bloquear").checked == (bloquear.checked == 1 ? false : true );
document.getElementById("demo1").innerHTML = bloquear.checked;
document.getElementById("demo2").innerHTML = balloons.readOnly;
if (balloons.readOnly) document.getElementById("balloons").removeAttribute("readonly");
else balloons.setAttribute("readonly", "readonly");
}
</script>
</body>
</html>Here you have example how to set the readonly attribute:
<form action="demo_form.asp">
Country: <input type="text" name="country" value="Norway" readonly><br>
<input type="submit" value="Submit">
</form><html><body><form><input type="password" placeholder="password" valid="123" readonly=" readonly"></input>
© 2022 - 2024 — McMap. All rights reserved.
element.setAttribute("readonly", "readonly");? jsfiddle.net/DerekL/e8yCd – Prostration