How to set var JS value for html field?

3

I have the following code that: When a field goes into focus it calls a function to check which field is in focus to change the value of a variable in a tooltip!

Example:

    //Aqui quando o campo entra no focus ele chama a função Aalerta passando o nome!
                    <td align="right" >
                        <font face="arial" color="blue" size="-1" disabled="">Nome do Usuário : </font>
                    </td>
                    <td align="left">
                        <input type="text" aonfocus="Aalerta(this.name)" name="tx_nome_usua" onblur="evento(this)" id="nome"  size="15" value="" >
                    </td>
//Essa é a tooltip que no echo do data-title eu quero mudar o valor de $j
<td><span name="tooltip" style="color: blue;" data-title="<?php echo $campo[$j]?>" class="tooltip">?</span></td>

In the Aalert() function I check the field name and want to change the value of $ j

function Aalerta(nome){
    switch(nome){
        case 'tx_nome_usua' :
            var value = 1;
            document.getElementsByName('tooltip')[0].setAttribute("data-title",[+ value]);          
        break;
    }
    return true;
  }
</script>
So I would like to know how to set the value that I determine in the case, to stay in place of $ j !

If you are to follow the scope after running JS 'I wanted it to be like this in span do html :

<td><span name="tooltip" style="color: blue;" data-title="<?php echo $campo['1']?>" class="tooltip">?</span></td>

Changing only $j !

    
asked by anonymous 12.12.2014 / 17:05

1 answer

3

I suggest creating an event handler and doing the set with s this.setAttribute('data-title', texto); and the text of the element that is in focus.

To know which element in focus on the page you can use document.activeElment . You can create an array with the text of each friendly name in each field and fetch this string using the .name of the active / focus element.

Something like:

<script>
var tooltipSpan = document.querySelectorAll('.tooltip');
for (var i = 0; i < tooltipSpan.length; i++) {
    tooltipSpan[i].addEventListener('mouseover', fnTitulo, false);
}

function fnTitulo() {
    if (!document.activeElement || document.activeElement == document.body || !document.activeElement.name) return;
    var texto = arrayTexto[document.activeElement.name] || 'Nenhum input focado';
    this.setAttribute('data-title', texto);
}
</script>

You can put this script at the bottom of the page, after HTML, or inside a function that only runs when the DOM is ready to:

document.addEventListener("DOMContentLoaded", function() {
  // código aqui
});
    
13.12.2014 / 22:32