Recover label value from an HTML select

[emran]

I have the following select:

<span class="IWLABEL11CSS" id="IWLABEL7">Órgão: </span>
<select name="Distrito" size="1" width="180" class="COMBODISTCSS" id="COMBOFAB" tabindex="1">
    <option value="01">Gabinete do Prefeito</option>
    <option value="02">Coordenadoria de Governo e Comunicação Social</option>
    <option value="03">Secertaria Municipal de Planejamento</option>
    <option value="04">Procuradoria Jurídica</option>
    <option value="05">Ouvidoria Municipal</option>
    <option value="06">Secretaria Municipal de Administração</option>
</select>

I would like to recover not only the value, but also the label, how could it be done?

[Trenton]

In pure Javascript, such as the question tag, change the select to perform a function when the value is changed, through the event onchange:

 <select name="Distrito" size="1" width="180" class="COMBODISTCSS" id="COMBOFAB" tabindex="1" onchange="mudouValor()">

Create the function mudouValor, responsible for obtaining the value of the label:

 function mudouValor() {
      //instancia um elemento do DOM através do respectivo id, que nesse caso é "COMBOFAB"
      var elemento = document.getElementById('COMBOFAB');
      //com o elemento instanciado, é possível capturar o valor da label
      var texto = elemento.options[elemento.selectedIndex].innerHTML;
 }

Directly with PHP will not be possible. However you can use Javascript to fill a type field hidden in your form, for example:

 <form name="myform" id="myform" action="teste.php" method="POST">
     <span class="IWLABEL11CSS" id="IWLABEL7">Órgão: </span>
     <select name="Distrito" size="1" width="180" class="COMBODISTCSS" id="COMBOFAB" tabindex="1" onchange="mudouValor()">
         <option value="01">Gabinete do Prefeito</option>
         <option value="02">Coordenadoria de Governo e Comunicação Social</option>
         <option value="03">Secertaria Municipal de Planejamento</option>
         <option value="04">Procuradoria Jurídica</option>
         <option value="05">Ouvidoria Municipal</option>
         <option value="06">Secretaria Municipal de Administração</option>
     </select>
     <input type="hidden" name="label" id="label" />
</form>

Notice that the type field has been added at the end of the form hidden with value filled with the value of the first option select:

<input type="hidden" name="label" id="label" value="Gabinete do Prefeito" />

The problem of manually booting the field label with the value corresponding to the first element select is that if that value changes, the programmer also needs to change the value of the field label and surely someone will forget it in the future, so we can automate this part:

window.onload = function(){
    mudouValor();
}

The Javascript code would be as follows:

function mudouValor() {
      var elemento = document.getElementById('COMBOFAB');
      var texto = elemento.options[elemento.selectedIndex].innerHTML;
  //altera o valor do campo cujo o id seja igual a "label"
  document.getElementById("label").value = texto;

}
window.onload = function(){

mudouValor();

}

Notice that for example, the form is with the attribute action defined with value teste.php and with the attribute method with the value POST, that is, a POST Request will be made for the file teste.php:

  <form name="myform" id="myform" action="teste.php" method="POST">

Just create the file teste.php:

  <?php

//Através da variável global "$_POST" é possível obter os valores do seu formulário.

//Cada index do array "$_POST" representa um campo do formulário, ou seja, no formulário existe um campo com o atributo name="Distrito" e outro campo com o atributo name="label"

$distrito = $_POST['Distrito'];

$label= $_POST['label'];

  //...

?>

Change the names according to your need, the names above were set for example only.