Forums

Problem with get value from dropdown with JS code

danielitob 05 Apr, 2018
Hi,
i have a strange problem with my form.
I have more dropdown, the first populated from database. If i want to get text value through JS code, i do:[pre]var el = document.getElementById('categoria');
var categoria= el.options[el.selectedIndex].innerHTML;[/pre]

and it works, because the html code is:
<option value="35">Acquisti di Gruppo</option>
My second dropdown is similar to the Dynamic Dropdown example (ie a dropdown that populates a second dropdown)
The logic of the dropdown works, but if I go to getthe dropdown value through JS it does not work, I always recover the id and not text. The reason is that the dropdown html is as follows:
<option value = "64" class = "addition"> 64 </ option>
How can is possible?
The link is:
http://www.condominiosereno.it/index.php?option=com_chronoforms6&chronoform=form-fornitore-copy
and the dropdown field is : Comune
In Read Data, i have correctly, as fields to retrieve,
Data.idProvincia ->key[br]Data.nomeComune -> value

Thanks and regards
Daniele
GreyHead 05 Apr, 2018
Hi Daniele,

That is because - to JavaScript - the drop-down value is the id - the 'value' attribute. See this StackOverFlow answer for a way to get the label using jQuery.

Bob
danielitob 05 Apr, 2018
Thanks Bob, i see. i 've tried:
comune =  jQuery('#comune option:selected').text();
but it doesn't work, i get always the ID.
I attach a printscreen about page's html.[file=10369]dropdown.PNG[/file]

I have to get the text "Avellino" , not the Id.

Thank you
Regards
danielitob 09 Apr, 2018
Hi,
any news?
thanks in advance

Regards
Daniele
GreyHead 09 Apr, 2018
Hi Daniele,

The text of the value is in the HTML twice - you should be able to read one of these with your JavaScript.
<div class=" fields" id="area_fields_56">
<div class="field twelve wide required">
<label for="comune">Comune</label>
<div class="search selection ui dropdown">
<select data-validationrules=". . ." data-validate="comune-main" data-events=". . ." data-autocomplete="1" data-url=". . ." name="comune" id="comune" data-mincharacters="3" type="select">
<option value="2" class="addition">2</option></select>
</select>
<i class="dropdown icon"></i>
<input class="search" autocomplete="off" tabindex="0">
<div class="text">Alagna Valsesia</div>
<div class="menu transition hidden" tabindex="-1">
<div class="item" data-value="1">Ala di Stura</div>
<div class="item active selected" data-value="2">Alagna Valsesia</div>
<div class="item" data-value="9">Alassio</div>
<div class="item" data-value="18">Alagna</div>
<div class="item" data-value="22">Ala</div>
<div class="item" data-value="25">Alano di Piave</div>
<div class="item" data-value="60">Alatri</div>
<div class="item" data-value="68">Alanno</div>
</div>
</div>
<small class="field-desc">inserisci almeno 3 caratteri</small>
</div>
<div class="field four wide required">
<label for="provincia">Provincia</label>
<input name="provincia" value="Vercelli" readonly="true" ='readonly="true" '="" . . . placeholder="" id="provincia" type="text">
Bob
danielitob 09 Apr, 2018
Hi Bob,
thanks for your reply but doesn't work.
By reading the html code, you would use this code[pre]
jQuery ('# common option: selected'). text ()[br][/pre]
to retrieve the dropdown text or another identifier than "#comune" ?

Perhaps using this code i should get id(2) because the html code is:
<select data-validationrules=". . ." data-validate="comune-main" data-events=". . ." data-autocomplete="1" data-url=". . ." name="comune" id="comune" data-mincharacters="3" type="select">        
<option value="2" class="addition">2</options>
You can check also here:
https://jsfiddle.net/aa7b65c3/2/ using library jQuery 3.3.1


Thanks and regards
[br]​
Daniele
danielitob 09 Apr, 2018
Hi Bob,
i solved using this JS code
 jQuery('#area_fields_56 .text').text();
I hope it can help someone🙂

Last question, i think it's a bug:

http://www.condominiosereno.it/index.php?option=com_chronoforms6&chronoform=form-fornitore-copy

in dropdown "Comuni" please search a city, when you select one and refresh the dropdown, the previous textarea field (Servizi Offerti) become a Rich Text Editor (although it was already set in the settings). However, this behavior does not occur for the textarea field "Note"

How is possible?
regards
This topic is locked and no more replies can be posted.

VPS & Email Hosting 20% discount
hostinger