How to set var JS value for html field?

Asked

Viewed 918 times

3

I have the following code that: When a field enters Focus it calls a function to check which field is in phocus 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 function Aalert() 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 stand in the place of the $j!"

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

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

Changing only the $j!

php javascript html

  • Alexandre, can you use libraries like Mootools or jQuery? I’d like to get you on chat because there are concepts I think are still unclear between client and server side.

  • unfortunately I cannot use such libraries by "technical" means of work!

  • 1

    Alexandre, we can conclude that this answer was clarified with the chat? if you want to accept.

  • Yes we can clarify that everything was correct' Thanks for the support'

1 answer

3


I suggest creating an Event Handler and do the set with sthis.setAttribute('data-title', texto); and the text of the element 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 of each field and fetch that string using the .name of active element/focus.

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 as:

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

Browser other questions tagged php javascript html

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