Recover label value from an HTML select
-
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?
-
In pure Javascript, such as the question tag, change the
select
to perform a function when the value is changed, through the eventonchange
:<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
withvalue
filled with the value of the first optionselect
:<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 elementselect
is that if that value changes, the programmer also needs to change thevalue
of the fieldlabel
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 valueteste.php
and with the attributemethod
with the valuePOST
, that is, a POST Request will be made for the fileteste.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.