Text box execute function when it is externally assigned a value to it in Javascript and HTML

Asked

Viewed 556 times

2

I wanted to make a text box run a function when I assign a value to it by code, without user interaction.

I’ve tried the events onChange, onInput, onKeypress, but they all depend on the user’s contact with the text box.

Below is my progress with my doubt, when I press the "Validate" button is externally assigned "123" to a text box and my function ãno identifies the variation of the text box and does not perform the function, it executes only when the user interacts with it.

<form action="" name="f1">  
  <label>Comparar valores <BR>(Valores iguais = PRETO, Valores diferentes=VERMELHO)</label> <br>
  <input type="text" id="pass" oninput="Verifica()"/>
<input type="text" id="pass2"  oninput="Verifica()"/>
<script>
function Verifica(){
    val1=document.getElementById("pass").value;
    val2=document.getElementById("pass2").value;
    if(val1!=val2){
    document.getElementById("pass").style.borderColor="#f00";
        document.getElementById("pass2").style.borderColor="#f00";
    }
    else{document.getElementById("pass").style.borderColor="#000";
        document.getElementById("pass2").style.borderColor="#000";

        }
    }
</script>
<input type="button" value="Validar" onClick="validarSenha()">

<script>
function validarSenha(){
	document.getElementById("pass2").value = "123"
}
</script>

javascript html

  • But why don’t you call the function you want in the same code that assigns the value?

  • Because this code simulates an external response from an iframe, I can’t change anything from it, I can only get your feedback

  • It seems impossible or impractical to me. See this answer here: http://stackoverflow.com/a/1848008/1796236

  • I do not know if what I want to do can be considered an "elegant solution", but I believe it is the only way to get what I need, because I am limited to the server above me, I really want to know if it is possible to do this, thanks for the help

  • Have you tried focusout? https://api.jquery.com/focusout/

  • Have some css solutions or I’m wrong.

  • user5988, The focusout if I’m not mistaken depends on user interaction, and wanted this check of the text box to be done 100% via code

Show 2 more comments

1 answer

0

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>       
        <form action="" name="f1">  
            <label>Comparar valores <BR>(Valores iguais = PRETO, Valores diferentes=VERMELHO)</label> <br>
            <input type="text" id="pass" oninput="Verifica()"/>
            <input type="text" id="pass2"  oninput="Verifica()"/>
            <script>
                function Verifica(){
                    val1=document.getElementById("pass").value;
                    val2=document.getElementById("pass2").value;
                    if(val1 != val2){
                        document.getElementById("pass").style.borderColor="#f00";
                        document.getElementById("pass2").style.borderColor="#f00";
                    }else{
                        document.getElementById("pass").style.borderColor="#000";
                        document.getElementById("pass2").style.borderColor="#000";
                    }
                };
            </script>
            <input type="button" value="Validar" onClick="validarSenha()"/>

            <script>
                function validarSenha(){
                    senha1 = document.getElementById("pass").value;
                    senha2 = document.getElementById("pass2").value;
                    document.getElementById("pass2").value = "123";
                    if (senha2  != document.getElementById("pass2").value){
                        if (senha1 == senha2)
                            alert("SENHAS IGUAIS");
                    else
                        alert("SENHAS DIFERENTES");
                    }
                }
            </script>
        </form>
    </body>
</html>

  • Don’t forget to give a Reload on the page when you want to test again, because when you press the validate button, it is the action you are waiting for to occur, If you analyze your code you will find that the problem is in the acclimation of functions between filling and validation logic ;-)

  • Tiagoti, what I hope happens with the code and that if I type "123" from the text box 1 and press the "Validate" button will be automatically added "123" in the text box 2, with this the border of the text boxes should be black, signaling equal values

  • The validate button would only have the function of adding "123" in the text box

  • @So don’t focus on the event in the text box, don’t focus on the Validate: Step 1 method to get the value of the text box. Step 2 check if you set the text2 box to 123. Step 3 check if the value 123 is equal to the text1 box. Step 4 color as the result. If you focus on event it will be complicated because your Validate algorithm will not wait for an event from the text box to happen to validate (this is a Javascript feature).

  • Tiagoti, are you telling me to call the function and validate right in the boot? This way it works, however in my case in specific I can not focus on the boot validate, because I can not change it, because his code is on a server above me, I do not have access to it, I only get your feedback in the text box

  • Is it possible for me to create a function that runs automatically in the background always and every 1 second for example it does a check in the text box and compares if the value has been changed?

  • Yes it has a way, but it is inviavél because spend unnecessary cpu time ... a doubt you have how to explain better this thing of a server above ?

  • I want to take advantage of a feedback from an object, this object prints its state in a textbox, the problem is that this object is hosted on a server where I have no access, the only contact I have with it is through this textbox, I can analyze the state of this object by analyzing the text of the textbox

  • As you make contact with this server, you can use the callback itself to do the check, I imagine you should be using ajax would that ?

  • Vish does not know this area of ajax, but I do not believe that there is another way of obtaining this information from the server, I already talked to the responsible for the server and they spoke that for security matters the server is closed, I believe that it is only by the textbox same

Show 5 more comments

Browser other questions tagged javascript html

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