Place selected input option into variable

JavaScript
1

I am very new to programming, but I have some experience with HTML and CSS. I decided I would start learning to program with javascript because it seemed like the logical next step.
I have been through tutorials on LyndaDotCom and Udemy, and they were great, but they seem to only cover the basics of syntax and defining the basic terms. I learned how to write simple functions, loops, define variables…etc. I decided to come up with a project on my own to get some practice in and I ran into a problem. I created a form with two dropdown menus and some radio buttons. I have been looking for an explanation of how to take the selected user input from these and place the input into variables.It seems like this would be widely available in forums, but I’m having a really hard time locating the answer.
I know how to use document.getElementById() to access the dropdown, but how do I take the user’s selection and place it into a variable?
For the radio buttons, I know I can use the document.getElementsByName() to get the items, but how do I take the selected item and place it into a variable?

It seems like it should be pretty easy, but I haven’t been able to find an easy example, and certainly none that some with a good explanation of how it works.

Any help would be greatly appreciated.

2

Hi chisao101, welcome to the forum

Lots of various approaches, so an example of what you’re wanting to do would help. But for a simple example:

Assuming an input won’t have a user supplied value until a user does something, you will likely want to assign an event handler - change, blur, submit, etc.

Then you assign the value to a variable. eg.
var input_val = document.getElementById('some_input_id').value;

3

Thanks for the response.

It’s really a pretty simple idea. I think I’m just missing some syntax.

I have a dropdown menu in my html, like this:

<select id="dropdown">
   <option>A</option>
   <option>B</option>
   <option>C</option>
</select>

Let’s say the user selects option B.
How to I place the contents of the selection into a variable?

Same for the radio buttons. If I have a set of radio buttons like this:

<input type="radio" name="radioBtns" value="val1">Val1
<input type="radio" name="radioBtns" value="val2">Val2

How do I get that selection into a variable?

So that is the question. If I’m understanding you correctly though, to do this I need and event handler?
After “handling” the event, I can then place the selection into a variable?

If that is the case, I will start researching how to create an event handler.

4

Select options are a bit different, in that you need to get the “selected index”.

This example - which uses alert() instead of the better console.log() - should be enough to help give you the idea

5

nope. non-multiple select elements work with value as well. see the IDL I have linked in the OP’s other thread.

6

Thanks for the help, guys. I have the dropdown menu selection working perfectly, and I have written the code a number of times with different menus so I will understand and remember it.

The radio buttons are still giving me trouble. I will keep working on it, though.

7

besides the fact that only checked radio buttons are submitted?

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.