Dropdown value entered in textbox automatically

Using JavaScript with Hype
1

Is there a way to select an option from a dropdown list and have that selection’s value entered in a textbox without having to press another button? I can find plenty of examples that get the selection and enter it in a textbox when another button is clicked. I think this should be easy, but I haven’t found a solution.
thanks

2

This seems to work…

var x = hypeDocument.getElementById('sel');

var y = x.options[x.selectedIndex].value;

hypeDocument.getElementById('text').innerHTML = y;

drop-down.hype.zip (13.5 KB)

3 Likes
3

Wow… I no where NEAR where I thought I was on this stuff. I have another question, lol, if you’d like to tackle it as well. Should I as a separate question in the forum? Thanks for this answer!

4

What is the second ? ?

5

I might be able to figure it out from what you gave me earlier. I have a series of buttons. Each one enters a value that is concatenated to form a number. That number is used to equal a product number. does that make sense? I’ll work on it and get back to you. I may need to explain a little better. Thanks, Happy Father’s Day!

1 Like
7

Hi Greg,

I’ve been spending nights and days learning javascript for another problem I had and I found a solution!!! Now I’m back on the menu… Is there a way to make it scrollable? I’m looking into it elsewhere as well. Maybe through CSS? It would be great with javascript.

thanks,

Randy

8

you can put all together in a symbol - groups and symbols can be scrollable within hype.
no javascript is necessary.

1 Like
9

And if instead text in a box I want to show different images chose their names on dropdown menu? How do that?

10

@Thiago

I read in another post that You are not familiar with JavaScript so I’ve broken this explanation down to the basics. Even so there might be things You do not follow. The only thing You really need to do is to make sure the image file name You want to show corresponds to the menu selection:

<option value="Cow.jpg">Cow</option>

Demo here.
Hype Project: drop-down_JHSv2.hype.zip (57.7 KB)

Please note the images must all have the same dimensions, otherwise they will be distorted in one direction or another.

This code is very similar to the previous example that changed the text. In this example we are taking the value selected from the drop-down menu (note that these values are also the names of the images we are swapping).

innerHTML of the drop-down menu:

<select id="sel" onchange="swapImage()">
  <option value="Cow.jpg">Cow</option>
  <option value="Pig.jpg">Pig</option>
  <option value="Rooster.jpg">Rooster</option>
</select>

When this drop-down menu is clicked on, in addition to making the menu selection, the function “menuSelector” is triggered by the “On Mouse Down” event.

In the “function menuSelector” script (at the end of this post) the selected value from the drop-down menu is placed in the variable “selection”- if “Pig” was selected then “Pig.jpg” would be the “value”.
var selection = x.options[x.selectedIndex].value;

Next the variable “whichPix” is set to the ID of the element that displays the images (id= “pix”).
and then use the “setElementProperty” to change the “background-image” of the “pix” element:

var whichPix = hypeDocument.getElementById('pix'); hypeDocument.setElementProperty(whichPix, 'background-image', "${resourcesFolderName}/"+selection);

Note that the variable “selection” (which holds the name of the image selected in the drop-down menu) is placed at the end of the line with the “+” character joining the variable “selection” to the first part of the image pathway “${resourcesFolderName}/”):

Assuming we selected “Pig” in the menu this would be the same as “${resourcesFolderName}/Pig.jpg”);

function menuSelector(hypeDocument, element,event) {
    var x = hypeDocument.getElementById('sel');
    var selection = x.options[x.selectedIndex].value;
    var whichPix = hypeDocument.getElementById('pix');
    hypeDocument.setElementProperty(whichPix, 'background-image', "${resourcesFolderName}/"+selection);
 )
6 Likes
11

How detailed! Thank you!

1 Like