Is it possible to change the value of a Readonly with conditions?

Asked

Viewed 85 times

1

Good morning. I didn’t find anything similar in many posts so I decided to ask you: is it possible to change the value of a readonly field? For example, suppose you have two fields (number 1 and number 2) with values 3 and 3, and want to make their multiplication appear in a third readonly field with value 9 (result of this equation).

I made a code and I didn’t get any results. The theory is that one gets what is in the number field and, the user modifies, changes the result of the "value" field that shows the multiplication by 2. I can change the number field but my multiplication value field remains null. 

<script>
let numero = document.getElementById("numero");
function valor() {
    let novoValor = 2 * numero;
    $("#valor").val('novoValor');
}
numeroKm.addEventListener('change', valor); 
</script>
javascript html

  • But if you are going to modify a field you should not declare it as readonly.

  • It is because this field is changeable as the person goes through a SELECT, with several options. Then when you arrive at this specific option, I made a number field appear and the result field was readonly.

  • Wanted this readonly value to keep its property from being changed directly by the user, but changing its value according to the input on its side.

2 answers

0

If I understand the question correctly there is no problem, the attribute readyonly determines that the element is read-only for the interface.

For the script is indifferent. See the example: 

let a = document.getElementById("A");
let b = document.getElementById("B");
//res é a referência para um elemento readonly 
let res = document.getElementById("Resultado");

function multiplicar() {
  //O valor do readonly foi modificado
  res.value = Number(a.value) * Number(b.value);
}
<input type="number" id="A" value="0" />
<span>x</span>
<input type="number" id="B" value="0">
<button onclick="multiplicar()">Multiplicar</button>
<br><br>
<!-- O input a seguir é readonly e não pode ser alterado pelo usuário -->
<label>Total:
   <input type="number" id="Resultado" readonly>
</label>

  • Show, I get it. For example, if it was without this button that calls the function, could I use an Eventlistener that, by changing the value of any of the two variables, automatically calls the result? I tried to use.addeventlistener('change', value); but apparently it is not changing, it is still null.

  • @Gustavos.Rocha Yes, it sure could be numero.addEventListener('change', valor); how could it be numero.addEventListener('input', valor);

  • Unfortunately I’m not getting the value in the field of readonly. See my method: <script> Let numero = Document.getElementByName("numero"); Let preco = Document.getElementByName("preco"); Function alterarPreco() { preco.value = 2 * Number(numero.value); } numero.addeventlistener('change', alterarPreco); </script>

  • @Gustavos.Rocha Edit the question and put the HTML together so you can analyze the problem as a whole.

  • Sorry for the delay, Augusto! Duda ended up helping me in the same way that you also helped me a lot, so I think it will no longer be necessary!

0


Hello,

readolny is only for the user’s browser to block editing! Via code goes normal!

In the code that is here, you first use the variable number to get the field and then add Eventlistener to the number one.

It also uses pure Javascript and Jquery (No problem, as long as you have Jquery on the rs page)

To get the value have use number of value.

addeventlistener has to be added after loading the Element in question! The script should be after it, or associated with the window.onload event

That’s how it worked:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<script>    

window.onload = function(){ 

    let campoNumero = document.getElementById("numero");
    let campoValor = document.getElementById("valor");

    campoNumero.addEventListener('change', valor);

    function valor() {

        let novoValor = 2 * campoNumero.value;
        campoValor.value = novoValor;
    }
}
</script>
</head>
<body>
    <input type="text" id="numero">
    <input type="text" readonly id="valor">
</body>
</html>

I hope I’ve helped!

  • Show, then my mistake in the case would be the lack of window.onload? What would be the property of it? Hugs.

  • Basically, it only performs the function, when all the DOM is loaded! In this case, as to define the addeventlistener the element needs to be loaded, it resolves, as ALL elements of the page will be loaded when executing it. To work, without window.onload, you would have to declare the script after the inputs!

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.