Catching both values in a dropdown selection

Andrei König asked on October 9, 2018 11:55

Hey everyone,

i was wondering if it is possible to get the values of a selection taken in a dropdown list in two separate form fields. Let me give an example:

Our user can select from a couple of stores from a dropdown list. They can see the name of the store but the transmitted value is the store ID

<option value="001">Berlin, address & housenumber</option>
<option value="002">Munich, address & housenumber</option>

Our callcenter need the store ID to make an appointment in the correct store.

What i would like to accomplish is to populate another, hidden field with the the City name and address of the store itself, as seen by the customer.

so after a selection i would like the form to submit two fields, with the second beeing hidden to the customer:

storeID: 001

storeaddress: Berlin, address & housenumber

Your help would be highly appreciated!

All the best, Andrei

Recent Answers


Arun Kumar answered on October 9, 2018 12:47 (last edited on December 10, 2019 02:31)

You can add a label field with visibility condition which will work as hidden field and check dependent on other field option for this and add macro in display field something like

{% dropdown.Value |(identity)GlobalAdministrator%}

Other solution is to use Jquery, add change event to your dropdown field and then update your hidden field value

$("#dropdown").change(function () {
    $("#hiddenfield").val($(this).val());
});
1 votesVote for this answer Mark as a Correct answer

Andrei König answered on October 9, 2018 16:20 (last edited on December 10, 2019 02:31)

Thank you for your answer Arun,

i hope i understood everything:

when the field name of the dropdown is call "Prefstore" i have to define the default value of the hidden field with following macro:

{% Prefstore.Value |(identity)GlobalAdministrator%}

Am i correct? Sadly i am getting nothing. No StoreID, no address.

0 votesVote for this answer Mark as a Correct answer

Arun Kumar answered on October 9, 2018 16:43

Have you tried second option with JQuery?

0 votesVote for this answer Mark as a Correct answer

Andrei König answered on October 12, 2018 08:47 (last edited on October 12, 2018 08:49)

Hey Arun,

sorry for responding so late. I had to look into JQuery to understand your suggested solution in the first place. Now I also know specifically what i want to accomplish.

What i would like to get into the hidden field is not the value of a selection but its text. So the function has to look more like this:

$("#dropdown").change(function () {
    $("#hiddenfield :selected").text($(this).val());
 };

Right? Alsoo, where do i need to put this code in kentico?

0 votesVote for this answer Mark as a Correct answer

Arun Kumar answered on October 12, 2018 08:53 (last edited on October 12, 2018 08:53)

You need to put this code on same page where you have embedded your form. Just add Javascript web part there and this code or you can just use Javascript webpart directly on master page template as well.

To get dropdown text use below code

$("#dropdown").change(function () {
    $("#hiddenfield").val($("#dropdown option:selected").text());
 };
0 votesVote for this answer Mark as a Correct answer

Andrei König answered on October 24, 2018 16:42

okay...after several days of trying different things i think i am almost there. here is what i came up with:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script type="text/javascript">
    $(document).ready(function(){

    $("#p_lt_ctl05_pageplaceholder_p_lt_ctl01_firm_BizForm_viewBiz_Prefstore_dropDownList").change(function(){
    var selectedaddress = $('#p_lt_ctl05_pageplaceholder_p_lt_ctl01_firm_BizForm_viewBiz_Prefstore_dropDownList option:selected').text(); 


        alert(selectedaddress);
        $("#p_lt_ctl05_pageplaceholder_p_lt_ctl01_firm_BizForm_viewBiz_storeaddress_txtText").val(selectedaddress);
    });

    });
    </script>

I've just added the alert to show if anything happens...and YES...it shows the TEXT of my selected item of the dropdown. so i must be close right?

The formfield called storeaddress which is going to contain the TEXT simply does not change its default value. I am at a loss right now :(

Oh and i've tried the equivalent of your idea Arun, no difference

 $("#dropdown").change(function () {
    $("#hiddenfield").val($("#dropdown option:selected").text());
 };
0 votesVote for this answer Mark as a Correct answer

Arun Kumar answered on October 24, 2018 16:54

Instead of using the dynamics generated id, you can define your custom control classes in form fields settings and use that. What's the type of your storeaddress field? Is it a text field and what's the control type? Label? Text?

0 votesVote for this answer Mark as a Correct answer

Andrei König answered on October 24, 2018 17:26

Thank you so much for the tip regarding the custom form classes. Going to apply that asap.

And yes storeaddress is a Text field with the control Type text

0 votesVote for this answer Mark as a Correct answer

Andrei König answered on November 23, 2018 08:54 (last edited on November 23, 2018 08:55)

Sooo...i did it. Big thanks to you Arun!

Here is the code:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
 $(".storedropdown").change(function(){
 var selectedaddress = $('.storedropdown option:selected').text(); 
 var storeid = $('.storedropdown option:selected').val();
 var combination = "Store: " + storeid + ", " + selectedaddress;
    $(".storeaddress").val(combination);
}); 
});
</script>

.storedropdown is the class of the dropdown from which the user selects the store

.storeaddress is the class of the hidden field that is populated by the choices value and text. This is then submitted eventually.

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.